@font-face {
	font-family: 'Paw Wow';
	src: url(PawWow.otf);
}
:root {
	color-scheme: light dark;
	--text: light-dark(#000, #BBB);
	--back: light-dark(#F2F2F2, #000);
	--accent: light-dark(#639, #bab1ed);
}
* {
	font-size: 16pt;
	font-family: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', sans-serif;
}
body {
	color: var(--text);
	background-color: var(--back);
	margin: 0 auto;
	a {
		color: var(--accent);
		&:hover {
			background-color: hwb(from var(--accent) h w b / 0.5);
		}
	}
}
h1 {
	font-family: 'Paw Wow';
	font-size: 200%;
	text-align: center;
	font-weight: normal;
}
[disabled] {
	border-color: var(--back);
	background-color: var(--back);
}
@media (orientation: landscape) {
	body {
		width: 70lvw;
	}
}
button, input, select {
	color: var(--text);
	border: 1px solid var(--accent);
	background-color: hwb(from var(--accent) h w b / 0.25);
	padding: 1ex;
}
button {
	margin: 0 auto;
}