* {
	transition: all 0.25s;
	color: #fff;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
		Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

html,
body {
	margin: 0;
	padding: 0;
	background: #111;
}

body {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	flex-direction: column;
	gap: 2rem;
}

.element {
	font-size: 4rem;
	font-weight: bold;
}

.answer {
	background: transparent;
	border: none;
	border-bottom: 0.05em solid #ddd;
	border-radius: 0;
	padding: 0.2em 0;
	font-family: inherit;
	width: 20ch;
	font-size: 4rem;
}

.answer:focus {
	outline: none;
	border-bottom-color: #fff;
}

.toggles {
	position: fixed;
	bottom: 1rem;
	right: 1rem;
	background: #0004;
	padding: 1em;
}

/* buttons */

button {
	font: inherit;
	background: #111;
	border: none;
	padding: 0.5em 1em;
	cursor: pointer;
}

button:hover {
	background: #222;
}

h3 {
	margin: 0.5em 0.2em;
}

/* checkboxes */

input[type="checkbox"] {
	opacity: 0;
}

label::before {
	content: "";
	display: inline-block;

	height: 1em;
	width: 1em;

	background: #0008;
	transition: background 0.2s, filter 0.2s;

	position: absolute;
	top: 0.25em;
	left: -1.375em;
	border-radius: 0.25em;
	cursor: pointer;
}

input[type="checkbox"]:hover + label::before {
	background: #fff2;
}

label::after {
	content: "";
	display: inline-block;
	height: 0.25em;
	width: 0.6em;
	border-left: 0.125em solid;
	border-bottom: 0.125em solid;
	border-color: #fff;

	transform: rotate(-45deg);
	transition: opacity 0.1s, border-color 0.2s;
	opacity: 0;

	position: absolute;
	left: -1.25em;
	top: 0.5em;
	cursor: pointer;
}
input[type="checkbox"]:checked + label::after {
	opacity: 0.8;
}
input[type="checkbox"]:checked:hover + label::after {
	opacity: 1;
}

label {
	position: relative;
}