:root {
	--background-1: #000;
	--background-2: #0a0a0a;
	--background-3: #222;
	--text: #FFF;

	--canvas-width: min(calc(16 * 75vh / 9), 75vw);
}

@media (prefers-color-scheme: light) {
	:root {
		--background-1: #FFF;
		--background-2: #f5f5f5;
		--background-3: #ddd;
		--text: #000;
	}
}

body {
	background: var(--background-1);
	margin: 0;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	gap: 1em;
	color: var(--text);
	font-family: 'Roboto Mono', monospace;
	padding: 1em;
	box-sizing: border-box;
	height: 100%;
	width: 100%;
	position: fixed;
	overflow: hidden;
}

canvas {
	width: var(--canvas-width);
	background-color: black;
}

canvas {
	width: var(--canvas-width);
	max-height: 100vh;
	max-width: 177.7778vh;
}

#settings {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 1em;
	width: var(--canvas-width);
}

hr {
	width: 100%;
	margin: 0;
}

#code {
	background: none;
	border: none;
	outline: none;
	box-sizing: border-box;
	padding: 7px;
	width: var(--canvas-width);
	border-radius: 5px;
	background: var(--background-2);
	color: var(--text);
	font-family: 'Roboto Mono', monospace;
}

button {
	background: var(--background-2);
	color: var(--text);
	border: none;
	outline: none;
	border-radius: 5px;
	padding: 7px 15px;
	cursor: pointer;
	font-family: 'Roboto Mono', monospace;
	transition: transform 50ms ease;
}

button:hover {
	background: var(--background-3);
	transform: scale(1.05);
}

button:active {
	background: var(--background-3);
	transform: scale(0.95);
}

label:has(:disabled), :disabled {
	text-decoration: line-through;
	opacity: 0.5;
}

#inspired {
	position: fixed;
	right: 1em;
	bottom: 1em;
	font-size: 0.75rem;
}

@keyframes draw-attention {
	from {
		box-shadow: 0px 0px 10px -5px gold;
	}

	to {
		box-shadow: 0px 0px 25px -5px gold;
	}
}

#help {
	animation-name: draw-attention;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-direction: alternate-reverse;
}

#help.visited {
	animation: none;
}