:root {
	color-scheme: light dark;
	--text-color: light-dark(#282828, #e1e1e1);
	--bg-color: light-dark(#f1f1f1, #1e1e1e);
	--code-color: light-dark(#101010, #eaeaea);
	--code-bg-color: light-dark(#dfdfdf, #111111);
	--link-color: light-dark(#0000ee, #60a0ff);
	--visited-link-color: light-dark(#551a8b, #df80df);
}

body {
	font-family: monospace;
	font-size: 16pt;
	color: var(--text-color);
	background-color: var(--bg-color);
	min-height: calc(100dvh - 2em);
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 1em;
}

nav {
	display: flex;
	align-items: center;
	flex-direction: row;
	gap: 32px;

	@media (max-width: 720px) {
		flex-direction: column;
		gap: 8px;
	}
}

nav > * {
	margin: 0;
}

nav menu {
	background: var(--code-bg-color);
	color: var(--code-color);
	list-style: none;
	padding: 0 4px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 32px;
}

nav a, nav a:active {
	color: inherit;
	text-decoration: none;
}

nav .active-page {
	font-weight: bold;
	text-decoration: underline;
}

main {
	width: 100%;
	max-width: 800px;
	margin-bottom: 1em;
}

main a:link,
footer a:link {
	color: var(--link-color);
}

main a:visited,
footer a:visited {
	color: var(--visited-link-color);
}

footer {
	font-size: 12pt;
	margin-top: auto;
}

#projects li {
	margin: 1em 0;
}

code {
	font-size: 14pt;
}

/* inline code */
p > code {
	background: var(--code-bg-color);
	color: var(--code-color);
	padding: 0 4px;
}

/* code blocks */
pre {
	background: var(--code-bg-color);
	color: var(--code-color);
	padding: 0.5em;
	overflow: scroll;
	width: inherit;
}