:root {
	color-scheme: dark;
	--background: #050805;
	--terminal-green: #5cff5c;
	--terminal-green-dim: #2e9e3d;
	--panel-background: rgba(0, 12, 2, 0.88);
	--border-width: 0.25rem;
}

* {
	box-sizing: border-box;
}

html,
body {
	min-height: 100%;
}

body {
	margin: 0;
	height: 100svh;
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
	gap: clamp(0.75rem, 2vw, 1.25rem);
	padding: clamp(0.75rem, 2vw, 1.5rem);
	overflow: hidden;
	background: var(--background);
	color: var(--terminal-green);
	font-family: "Cascadia Code", "Lucida Console", Consolas, monospace;
	font-size: clamp(0.9rem, 1.6vw, 1.05rem);
	line-height: 1.55;
	text-shadow: 0 0 0.25rem rgba(92, 255, 92, 0.72);
}

body::before,
body::after {
	position: fixed;
	inset: 0;
	z-index: 10;
	pointer-events: none;
	content: "";
}

body::before {
	background: repeating-linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0) 0,
		rgba(0, 0, 0, 0) 2px,
		rgba(0, 0, 0, 0.22) 3px,
		rgba(0, 0, 0, 0.22) 4px
	);
	opacity: 0.16;
}

body::after {
	z-index: 11;
	background: radial-gradient(circle at center, transparent 52%, rgba(0, 0, 0, 0.52) 100%);
}

body[data-crt-flicker="true"]::before {
	animation: crt-flicker 180ms infinite;
}

a, button {
	color: var(--terminal-green);
	cursor: pointer;
	font: inherit;
	text-shadow: inherit;
	text-decoration: none;
	transition: background 180ms steps(2, end), color 180ms steps(2, end);
}

a:hover, button:hover {
	background: var(--terminal-green);
	color: var(--background);
	text-shadow: none;
}

a:focus-visible, button:focus-visible {
	outline: 0.15rem solid var(--terminal-green);
	outline-offset: 0.15rem;
	background: var(--terminal-green);
	color: var(--background);
	text-shadow: none;
}

.monitor-element {
	width: 100%;
	border: var(--border-width) solid var(--terminal-green-dim);
	border-radius: 0.25rem;
	background: var(--panel-background);
	box-shadow: 0 0 0.8rem rgba(46, 158, 61, 0.32), inset 0 0 1rem rgba(46, 158, 61, 0.08);
}

.visually-hidden {
	display: none;
	visibility: hidden;
}

@keyframes crt-flicker {
	0%, 100% {
		opacity: 0.16;
	}
	20% {
		opacity: 0.12;
	}
	43% {
		opacity: 0.19;
	}
	70% {
		opacity: 0.14;
	}
	91% {
		opacity: 0.18;
	}
}

@media (prefers-reduced-motion: reduce) {
	body[data-crt-flicker="true"]::before {
		animation: none;
	}
}

@media (max-width: 35rem) {
	body {
		padding: 0.6rem;
		gap: 0.6rem;
	}

	#navigation,
	#console,
	#console-input {
		border-width: 0.2rem;
	}
}