:root {
	--dim-black:     #1d2021;
	--dim-red:       #cc241d;
	--dim-green:     #98971a;
	--dim-yellow:    #d79921;
	--dim-blue:      #458588;
	--dim-purple:    #b16286;
	--dim-aqua:      #689d6a;
	--dim-white:     #a89984;
	--bright-black:  #928374;
	--bright-red:    #fb4934;
	--bright-green:  #b8bb26;
	--bright-yellow: #fabd2f;
	--bright-blue:   #83a598;
	--bright-purple: #d3869b;
	--bright-aqua:   #8ec07c;
	--bright-white:  #ebdbb2;
	--bg0: #282828;
	--bg1: #3c3836;
	--bg2: #504945;
	--bg3: #665c54;
	--bg4: #7c6f64;
 	--gray: #928374;
	--fg4: #a89984;
	--fg3: #bdae93;
	--fg2: #d5c4a1;
	--fg1: #ebdbb2;
	--fg0: #fbf1c7;
	--dim-orange: #d65d0e;
	--bright-orange: #fe8019;

	--code-font-family: "Maple Mono", monospace;
	--symbols-font-family: "Noto Sans Math", monospace;
	--text-font-family: "Host Grotesk", sans-serif;
}

body {
	background-color: var(--bg0);
	color: var(--fg0);
	font-family: var(--text-font-family);
	font-size: 1.1em;
	padding: 0.5em 0 1em 0;
}
a { color: var(--dim-blue); }
a:hover { color: var(--bright-blue); }
code { font-family: var(--code-font-family); }

main > header {
	align-items: center;
	display: flex;
	max-width: calc(42em + 1em + 2px);
}
main > header > h1 {
	font-size: 2.5em;
	margin: 0 1em 0 0;
}
@media (max-width: calc(42em + 2em + 4px + 2em)) {
	main > header > h1 { font-size: 5.4vw; }
}
main > header > p { line-height: 1.3em; }
main > header > p > s { text-decoration-thickness: 2px; }

main > header, main > article { margin: 1em; }
main > nav { margin: 0.5em 1em; }
@media (min-width: calc(42em + 2em + 4px + 2em)) {
	main > header, main > nav, main > article {
		margin-left: auto;
		margin-right: auto;
	}
}

main > nav { max-width: calc(42em + 2em + 4px); }
main > nav > ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 1em;
	justify-content: space-between;
	list-style: none;
	margin: 0;
	padding: 0;
}
@media (max-width: calc(42em + 2em + 4px + 2em)) {
	main > nav > ul { justify-content: center; }
}
main > nav > ul > li {
	background-color: var(--bg1);
	border: 2px solid var(--bg2);
	display: flex;
}
main > nav > ul > li:hover { background-color: var(--bg3); }
main > nav > ul > li:active { background-color: var(--bg4); }
main > nav > ul > li > a {
	color: inherit;
	min-width: 5em;
	padding: 0.25em;
	text-align: center;
	text-decoration: inherit;
	user-select: none;
	width: 100%;
}
main > nav > ul > li > a:hover { color: inherit; }

main > article {
	background-color: var(--bg1);
	border: 2px solid var(--bg2);
	max-width: 42em;
	padding: 0.5em 1em;
}

main > article > header { margin: 0.25em 0 1em 0; }
main > article > header > h2 { margin: 0; }
main > article > header > h2 > a {
	color: inherit;
	text-decoration: inherit;
}
main > article > header > h2 > a:hover { text-decoration: underline; }
main > article > :not(header) { margin: 0 0 1em 0; }
main > article > code.block {
	background-color: var(--bg0);
	border: 2px solid var(--bg2);
	color: var(--fg0);
	display: block;
	line-height: 1.5em;
	overflow-x: auto;
	padding: 0.5em 0.75em;
	white-space: pre;
	word-break: break-all;
}
main > article > p { line-height: 1.3em; }
main > article > p code { white-space: nowrap; }

code.language-console > span.comment { user-select: none; }