* {
	box-sizing: border-box;
}

:root {
	--space: 10px;
	--bg: whitesmoke;
	--fg: black;
	--link: blue;
	--hover: #ddd;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #111;
		--fg: whitesmoke;
		--link: #0ff;
		--hover: #444;
	}

	canvas {
		filter: invert(1);
	}
}

body {
	display: flex;
	flex-direction: column;
	gap: var(--space);
	margin: 0;
	padding-top: var(--space);
	min-height: 100vh;
	background-color: var(--bg);
	color: var(--fg);
}

body > * {
	margin: 0 var(--space) 0 var(--space);
}

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

details {
	max-width: 100ch;
}

summary {
	cursor: pointer;
	user-select: none;
}

summary:hover {
	background-color: var(--hover);
}

ul {
	padding-left: 1em;
}

section {
	display: flex;
	flex-direction: column;
	gap: var(--space);
	padding: var(--space);
	background-color: var(--hover);
}

section > * {
	margin: 0;
}

fieldset {
	user-select: none;
}

canvas {
	--vm: calc(var(--space) * 3);
	margin: var(--vm) auto var(--vm) auto;
	background-color: white;
	box-shadow: 5px 5px 20px #0004;
}

.overflow-x-scroll {
	overflow-x: scroll;
}