:root {
	--content-width: 900px;
	--accent-color: hsl(0 0% 50%);
	
	--color-percent-dark-offset: 25;
	--color-percent-light-offset: 40;
	--color-percent-darker-offset: 35;
	--color-percent-lighter-offset: 45;
	--hue-offset: 0;
	
	--light-hsl-value: hsl(from var(--accent-color) h s calc(l + var(--color-percent-light-offset)));
	--dark-hsl-value: hsl(from var(--accent-color) h s calc(l - var(--color-percent-dark-offset)));
	--light-hsl-value-alpha: hsl(from var(--accent-color) h s calc(l + (var(--color-percent-light-offset) - 10)) / 0.8);
	--dark-hsl-value-alpha: hsl(from var(--accent-color) h s calc(l - (var(--color-percent-dark-offset) - 4)) / 0.8);
	--lighter-hsl-value: hsl(from var(--accent-color) calc(h + var(--hue-offset)) s calc(l + var(--color-percent-lighter-offset)));
	--darker-hsl-value: hsl(from var(--accent-color) calc(h + var(--hue-offset)) s calc(l - var(--color-percent-darker-offset)));
	--lighter-hsl-value-mono: hsl(0 0 calc(50 + var(--color-percent-lighter-offset)));
	--darker-hsl-value-mono: hsl(0 0 calc(50 - var(--color-percent-darker-offset)));

	--blur-px: 10px;
	--border-radius-px: 5px;
	--padding-left-right-px: 10px;
}

@font-face {
	font-family: "Badeen Display";
	src:
		url("../fonts/Badeen-Display/BadeenDisplay-Regular.ttf") format("truetype");
}

@font-face {
	font-family: "Quicksand";
	src:
		url("../fonts/Quicksand/Quicksand-VariableFont_wght.ttf") format("truetype");
}

body {
	font-family: "Quicksand", sans-serif;
	margin: 0;
	background-color: var(--lighter-hsl-value-mono);
	color: black;
}

main {
	max-width: var(--content-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--padding-left-right-px);
	padding-right: var(--padding-left-right-px);
}

nav {
	background-color: var(--light-hsl-value-alpha);
	backdrop-filter: blur(var(--blur-px));
	position: sticky;
	top: 0;
	
	ul {
		display: flex;
		justify-content: space-around;
		list-style-type: none;
		max-width: var(--content-width);
		margin-top: 0;
		margin-left: auto;
		margin-right: auto;
		padding: 0;

		li {
			display: flex;

			a {
				padding: 10px;
			}

			a:link {
				font-weight: bold;
				text-decoration: none;
			}
		}

		.current-section {
			border-width:0 0 4px 0;
			border-style: solid;
			border-color: var(--dark-hsl-value);
		}

	}
}

blockquote {
	border-style: solid;
	border-width: 0 0 0 5px;
	border-radius: var(--border-radius-px);
	border-color: var(--dark-hsl-value);
	background-color: var(--light-hsl-value);
	padding: 0.5em;
	margin-left: 1em;
	margin-right: 1em;
}

pre:has(> code) {
	background-color: hsl(from black h s l / 0.1);
	border-color: hsl(from black h s l / 0.5);
	border-style: solid;
	border-width: 1px;
	overflow-x: auto;
	overflow-y: auto;
	scrollbar-width: thin;
	max-height: 500px;
	padding: 0.5em;
	border-radius: var(--border-radius-px);
	margin-left: 1em;
	margin-right: 1em;
}

p > code {
	background-color: hsl(from black h s l / 0.1);
	border-color: hsl(from black h s l / 0.5);
	border-style: solid;
	border-width: 1px;
	border-radius: 2px;
}

a:link, a:visited {
	color: var(--dark-hsl-value);
}

p:has(> picture), p:has(> a > picture) {
	text-align: center;
	font-style: italic;
}

picture img {
	max-width: 100%;
	height: auto;
	border-radius: var(--border-radius-px);
}

footer {
	max-width: var(--content-width);
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	padding: 3em;
}

header {
	display: flex;
	justify-content: center;
	background-color: var(--light-hsl-value-alpha);
	backdrop-filter: blur(var(--blur-px));
	margin: 0;

	h1 {
		color: var(--dark-hsl-value);
		padding-left: var(--padding-left-right-px);
		padding-right: var(--padding-left-right-px);
		font-family: "Badeen Display", sans-serif;
		font-weight: normal;
		font-size: 3em;
		text-align: center;
	}
}

.eMailReply {
	font-style: italic;
}

@supports(color: AccentColor){
	:root {
		--accent-color: AccentColor;
	}
}

@supports(scrollbar-color: red blue){
	html {
		scrollbar-color: var(--dark-hsl-value) var(--light-hsl-value);
	}

	pre:has(> code) {
		scrollbar-color: var(--dark-hsl-value) hsl(from black h s l / 0.1);
	}

	@media (prefers-color-scheme: dark){
		html {
			scrollbar-color: var(--light-hsl-value) var(--dark-hsl-value);
		}

		pre:has(> code) {
			scrollbar-color: var(--light-hsl-value) hsl(from black h s l / 0.1);
		}
	}
}

@media (prefers-color-scheme: dark){
	header, nav {
		background-color: var(--dark-hsl-value-alpha);
	}

	header h1 {
		color: var(--light-hsl-value);
	}

	nav ul .current-section {
		border-color: var(--light-hsl-value);
	}

	blockquote {
		background-color: var(--dark-hsl-value);
		border-color: var(--light-hsl-value);
	}

	body {
		background-color: var(--darker-hsl-value-mono);
		color: white;
	}

	a:link, a:visited {
		color: var(--light-hsl-value);
	}
}