:root {
	--background: white;
	--foreground: black;
	--foreground-muted: #555;
	--background-muted: #eee;
	--accent: #916e53;
	--link: #00f;
}

html, body {
	background-color: var(--background);
	color: var(--foreground);
	font-family: system-ui, sans-serif;
}

button, input[type=submit], input[type=button] {
	background-color: var(--background-muted);
	color: var(--foreground);
	border-color: var(--foreground-muted);
}

p {
	margin: 0;
}

body {
	display: flex;
	flex-direction: column;
	width: 100vw;
	min-height: 100vh;
	padding: 0;
	margin: 0;
	text-align: center;
}

header, footer {
	padding: 1rem;
	color: var(--foreground-muted);
}

code {
	font-family: monospace;
}

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

main, .horizontal {
	display: flex;
	gap: 0.3rem;
	align-items: center;
	justify-content: center;
}

main {
	flex-direction: column;
	padding: 1rem;
	flex-grow: 1;
}

.horizontal {
	flex-direction: row;
}

.hidden {
	display: none;
}

@media screen and (prefers-color-scheme: dark) {
	:root {
		--background: black;
		--foreground: white;
		--foreground-muted: #999;
		--background-muted: #111;
		--link: #aaf;
	}
}