:root.light {
	--fg0: #000;
	--fg1: #333;
	--fg2: #666;
	--bg0: #eee;
	--bg1: #bbb;
	--lnk: #00a;
}

:root.dark {
	--fg0: #eee;
	--fg1: #bbb;
	--fg2: #888;
	--bg0: #000;
	--bg1: #222;
	--lnk: #aaf;
}

body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100vh;
	display: flex;
	align-items: center;
	font-family: sans-serif;
	background-color: var(--bg0);
	color: var(--fg0);
}

a {
	color: var(--lnk);
}

#controls {
	display: flex;
	padding: 0 18pt;
	flex-direction: column;
	justify-content: center;
	height: 100%;
}

#controls #about {
	text-align: center;
}

#display {
	display: block;
	text-align: center;
	flex-grow: 1;
	font-size: 36pt;
	padding-bottom: 10vh;
}

input[type=checkbox] {
	display: none;
}

input[type=checkbox] + label {
	cursor: pointer;
	display: flex;
	margin: 8pt;
	font-size: 16pt;
	background-color: var(--bg1);
	border-radius: 15pt;
	user-select: none;
	justify-content: space-between;
}

input[type=checkbox] + label .n {
	padding: 8pt;
}

input[type=checkbox] + label .y {
	text-align: right;
	padding: 8pt;
}

input[type=checkbox]:checked + label .n {
	display: inline;
	color: var(--fg2);
}

input[type=checkbox]:checked + label .y {
	display: inline;
	color: var(--f0);
}

input[type=checkbox]:not(checked) + label .n {
	display: inline;
	color: var(--f0);
}

input[type=checkbox]:not(checked) + label .y {
	display: inline;
	color: var(--fg2);
}

@media (width < 500pt) {
	/* TODO */
	body {
		background-color: red;
		flex-direction: column;
	}

	#controls {
		flex-direction: row;
	}
}