html {
	background-color: #222;
	color: #eee;
	font-family: monospace;
	font-size: 0.8em;
}

button {
	font-family: monospace;
	border: solid 2px #eee;
	background-color: #222;
	color: #eee;
	font-size: 1rem;
}

button[aria-pressed] {
	border-bottom: none;
	font-size: 1.6rem;
}

button[aria-pressed="true"] {
	background-color: #eee;
	color: #222;
}

form {
	font-size: 1.6rem;
	display: grid;
	grid-template-columns: 12ch 12ch;
	gap: 0.5 em;
}

form[hidden] {
	display: none;
}

input {
	color: #eee;
	background-color: #222;
	border: solid 2px #eee;
	font-size: 1.6rem;
}

button {
	font-size: 1.6rem;
}

#container {
	display: flex;          /* places children side by side */
	align-items: flex-start;    /* vertically align items (optional) */
	flex-wrap: wrap;
	gap: 20px;
}

#shapes-container {
	flex: 1 1 150px;
	max-width: 400px;
}

.shape-container {
	margin-bottom: 8px;
	border: solid 2px white;
	font-size: 1.2em;
}

.shape-container>button {
	display: block;
	font-size: 1em;
	border: none;
}

.shape-container>p {
	margin: 0.4em;
	border-bottom: solid 2px white;
}

input[type=checkbox] {
	transform: scale(1.5);
}

canvas {
	user-select: none;
	touch-action: none;
	image-rendering: pixelated;
}