* {
	margin: 0;
	font-family: 'Courier New', Courier, monospace;
	color: inherit;

	--running-height: 60px;
}

html,
body {
	color: white;
	background-color: black;
	width: 100%;
	height: 100%;
	display: grid;
}

/* ---- */

main {
	margin: auto;
	display: grid;
	justify-items: center;
	grid-template-rows: var(--running-height) 1fr var(--running-height);
	gap: 40px;
}

html.blackout main {
	visibility: hidden;
}

/* ---- */

main .mode {
	display: none;
}

main .mode.active {
	display: contents;
}

main #nine-i {
	height: 100%;
	max-height: 60vh;
}

main div {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
}

main div svg {
	height: 3rem;
}

main div.blackout {
	padding: 20px 40px;
	color: black;
	background-color: white;
	user-select: none;
	cursor: pointer;
}