/*
hansenmarcus.se
© 2023-2025 Marcus Hansen
Created: 2023-07-23
Last changed: 2025-03-01
*/

/*
Table of Contents
1. Basic Typography
2. Section Styling
3. Media Queries
*/

/* 1. Basic Typography */
:root {
	--background_main: #EEEEEE;
	--border_main: #CCCCCC;
	--background_footer: #282828;
	--text_footer: #838383;
	--text_footer_current: white;
	--font_main: Arial, sans-serif;
	--font_monospace: Consolas, monospace;
}

body {
	background: var(--background_main);
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	margin: 0;
	font-family: var(--font_main);
}

p {
	font-family: var(--font_main);
	line-height: 1.5; /* Increased visual accessibility. */
}

a {
	font-family: var(--font_main);
}

/* 2. Section Styling */
/* Body */
.container {
	margin: 1rem;
}

.container__wrapper {
	background: white;
	border: 1px solid var(--border_main);
	border-radius: 4px;
	max-width: 1280px;
	margin: 0 auto;
	box-shadow: 0 0.25rem 0.5rem darkgrey;
}

/* Header */
.header {
	padding: 1rem;
}

.header__wrapper {
	display: inline-block;
}

.header__link {
	color: inherit;
	display: block;
	height: 100%;
	width: 100%;
	text-decoration: none;
}

.header__logo {
	vertical-align: middle;
	image-rendering: pixelated;
}

.header__title {
	display: inline;
	vertical-align: middle;
}

/* Navigation Bar */
.navigation_bar {
	background: #66AACC;
	display: flex;
	border-top: 1px solid var(--border_main);
	border-bottom: 1px solid var(--border_main);
	padding: 1rem;
}

.navigation_bar__button {
	background: lightgrey;
	color: black;
	border: 1px solid black;
	border-radius: 4px;
	padding: 4px;
	margin-right: 0.5rem;
	text-decoration: none;
	transition-duration: 0.2s;
}

.navigation_bar__button:hover {
	background: grey;
	color: white;
	box-shadow: 0 2px 2px black;
}

.navigation_bar__button:active {
	background: grey;
	color: white;
}

.navigation_bar__button--current {
	background: grey;
	color: white;
	border: 1px solid black;
	border-radius: 4px;
	padding: 4px;
	margin-right: 0.5rem;
}

/* Main */
.main {
	margin: 1rem 1rem 1rem 1rem;
}

.main__title {
	margin-bottom: 0.5rem;
	text-align: center;
}

.main__text {
	max-width: 800px;
	margin: 1rem auto;
}

.main__text--centered {
	max-width: 800px;
	margin: 1rem auto;
	text-align: center;
}

/* Main - Index */
.main__name {
	margin-top: 0;
	margin-bottom: 0.5rem;
	text-align: center;
}

.main__roles {
	margin: 0;
	text-align: center;
}

/* Main - Blog */
.main__blog_entry {
	background: var(--background_main);
	border: 1px solid var(--border_main);
	border-radius: 4px;
	max-width: 320px;
	margin: 0 auto;
}

/* Footer */
.footer {
	background: var(--background_footer);
	flex-shrink: 0;
	padding: 1rem;
	margin-top: auto;
	box-shadow: 0 -0.25rem 0.5rem darkgrey;
}

.footer__wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	max-width: 1280px;
	margin: 0 auto;
}

.footer__title {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	border-right: 1px solid var(--text_footer);
	padding-right: 0.5rem;
	margin: 0 0.5rem 0 0;
}

.footer__title_logo {
	image-rendering: pixelated;
	margin-right: 0.5rem;
}

.footer__title_text {
	color: var(--text_footer);
	margin: 0;
	font-size: 16px;
}

.footer__text {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	/* border-right: 1px solid var(--text_footer); */
	padding-right: 0.5rem;
	margin: 0 0.5rem 0 0;
}

.footer__copyright {
	color: var(--text_footer);
	margin: 0;
	font-size: 12px;
}

.footer__last_changed {
	color: var(--text_footer);
	margin: 0;
	font-size: 12px;
}

/*
.footer__legal {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.footer__interpunct {
	color: var(--text_footer);
	margin: 0 0.25em 0 0.25em;
}

.footer__about_website {
	color: var(--text_footer);
	margin: 0;
	font-size: 12px;
	text-decoration: none;
	transition-duration: 0.2s;
}

.footer__about_website:hover {
	color: white;
}

.footer__about_website:active {
	color: white;
}

.footer__about_website--current {
	color: var(--text_footer_current);
	margin: 0;
	font-size: 12px;
}

.footer__attributions {
	color: var(--text_footer);
	margin: 0;
	font-size: 12px;
	text-decoration: none;
	transition-duration: 0.2s;
}

.footer__attributions:hover {
	color: white;
}

.footer__attributions:active {
	color: white;
}

.footer__attributions--current {
	color: var(--text_footer_current);
	margin: 0;
	font-size: 12px;
}

.footer__privacy_policy {
	color: var(--text_footer);
	margin: 0;
	font-size: 12px;
	text-decoration: none;
	transition-duration: 0.2s;
}

.footer__privacy_policy:hover {
	color: white;
}

.footer__privacy_policy:active {
	color: white;
}

.footer__privacy_policy--current {
	color: var(--text_footer_current);
	margin: 0;
	font-size: 12px;
}
*/

/* 3. Media Queries */
/* Examples */
/*
@media screen and (max-width: 1200px) and (min-width: 721px) {
	.wrapper {
		width: auto;
	}
}

@media screen and (max-width: 720px) {
	.wrapper {
		width: auto;
	}
*/