.fira-code {
  font-family: "Fira Code", monospace;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

* {
	padding: 0;
	margin: 0;
}

html {
	--fg-color: #EEE;
	--bg-color: #080808;
	--fin-bg-color: #060;
	--rad: 0.5em;
	padding: 1em;
	color: var(--fg-color);
	background-color: var(--bg-color);
	font-size: 1.2rem;

	font-family: "Fira Code", monospace;
	font-optical-sizing: auto;
	font-weight: <weight>;
	font-style: normal;
}

body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1em;
}

p {
	max-width: 32em;
}

#fields {
	display: flex;
	flex-direction: column;
	gap: calc(1em / 4);
}

input {
	background-color: var(--bg-color);
	color: var(--fg-color);
	border: solid var(--fg-color) 0.125em;
	border-radius: var(--rad);
	padding: 0.125em 0.25em;

	font-size: 1em;
	font-family: "Fira Code", monospace;
	font-optical-sizing: auto;
	font-weight: <weight>;
	font-style: normal;
	font-variant-ligatures: none;
}

input.finished {
	background-color: var(--fin-bg-color);
	border-color: var(--fin-bg-color);
}

button {
	border-radius: var(--rad);
	background-color: var(--fg-color);
	border: solid var(--fg-color) 0.125em;
	color: var(--bg-color);
	padding: 0.25em 0.5em;
	font-size: 1em;
}