:root {
	--green-color: #5bf870;
	--green-bg: #05321e;
	--red-color: #c0100a;
	--red-bg: #1b0302;
	--blue-color: #a5a5ff;
	--blue-bg: #4242e7;
	--off: #050505;
	--dark: #111;
	--term: "> ";
	--white: #fff;
	--black: #000;
	--monitor-body: #3f3933;
	--post-it-yellow: #ffff88;
	--post-it-highlight: #ffffc6;
	--font-mono: "VT323", monospace;
	--font-system-shock: "Lucida Console", "Consolas", monospace;
}
.theme-red {
	--color: var(--red-color);
	--bg: var(--red-bg);
	--term: "$ ";
}
.theme-green {
	--color: var(--green-color);
	--bg: var(--green-bg);
}
.theme-blue {
	--color: var(--blue-color);
	--bg: var(--blue-bg);
	--term: "";
}
.theme-red .char {
	animation: type 0.5s linear 0s 1;
}
.theme-red #crt {
	font-family: "Share Tech Mono", monospace;
	font-size: max(1rem, 1.6vmin);
}
.theme-blue #crt {
	background-image: none;
	background-color: var(--bg);
	box-shadow: none;
	border-radius: 1em;
	padding: 2rem;
}
.theme-blue #monitor:not(.off) #crt:before {
	background: none;
	background-color: var(--bg);
	top: 3rem;
	left: 3rem;
	bottom: 3rem;
	right: 3rem;
	z-index: 0;
}
.theme-blue .scanline {
	display: none;
}
.theme-blue .terminal {
	padding: 0;
}
html {
	font-size: 12px;
	box-sizing: border-box;
}
*,
*:before,
*:after {
	box-sizing: inherit;
}
body {
	background: var(--dark);
	margin: 0;
	overflow: hidden;
	font-family: sans-serif;
}
a {
	outline: none;
}
a:focus {
	outline: 1px solid var(--color);
	outline-offset: 2px;
}
#prompt {
	display: none;
}
[contenteditable] {
	caret-color: transparent;
	outline: 1px solid transparent;
}
[contenteditable]:focus {
	outline: 1px solid var(--color);
	outline-offset: 2px;
}
#input {
	position: relative;
	display: block;
	white-space: pre-wrap;
}
#input:before {
	content: var(--term);
}
#input[contenteditable="true"]:after,
.typer.active:after {
	content: "■";
	animation: cursor 1s infinite;
	animation-timing-function: step-end;
	margin-left: 1px;
	line-height: 1rem;
}
[contenteditable="true"] br:last-child {
	display: none;
}
#input.password {
	color: transparent;
	user-select: none;
}
#input.password:after {
	color: var(--color);
}
#input.password:before {
	color: var(--color);
	content: var(--term) attr(data-pw);
}
.typer {
	word-break: break-all;
}
#monitor {
	margin: 3vmin auto;
	padding: 5.5vmin;
	width: min-content;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: var(--monitor-body);
	border-radius: 0.5rem;
}
#monitor:not(.off) {
	box-shadow: 0.6px 90px 110px -60px var(--bg);
}
#screen {
	position: relative;
	border: 30px solid transparent;
	border-image-source: url(/img/bezel_gray.webp);
	border-image-slice: 30 fill;
	border-image-outset: 0;
	overflow: hidden;
}
#crt,
pre {
	font-family: var(--font-mono);
}
#crt {
	min-width: 80ch;
	height: calc(80ch * 0.8);
	font-size: max(1rem, 2.2vmin);
	position: relative;
	background: var(--bg);
	background-image: radial-gradient(ellipse, var(--bg) 0%, var(--off) 90%);
	animation: on 2s linear;
	transition: all 0.5s;
	overflow: hidden;
}
#crt:after {
	content: " ";
	opacity: 0;
	background: var(--white);
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 3;
}
#monitor.turn-off #crt:after {
	animation: turnOff 0.4s ease-in-out;
}
#monitor:not(.off) #crt:before {
	content: " ";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: linear-gradient(
		to bottom,
		rgba(18, 16, 16, 0.1) 50%,
		rgba(0, 0, 0, 0.25) 50%
	);
	background-size: 100% 8px;
	z-index: 2;
	pointer-events: none;
	animation: fadeIn 2s;
}
#monitor.off #crt {
	background: var(--off);
}
#monitor.off #crt:before {
	background: none;
}
#monitor.off #crt * {
	display: none !important;
}
body.fullscreen #crt {
	font-size: 2.5rem;
	position: fixed;
	width: 100vw;
	height: 100vh;
	left: 0;
	top: 0;
	z-index: 999;
	border-radius: 0;
}
body.fullscreen #monitor {
	margin: 0;
	padding: 0;
	background: none;
	box-shadow: none;
}
body.fullscreen #screen {
	border: none;
}
.fullscreen {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: var(--bg);
}
.terminal {
	position: relative;
	height: 100%;
	padding: 2rem;
	overflow-y: auto;
	overflow-x: hidden;
	word-break: break-word;
	text-transform: uppercase;
	animation: textShadow 4s infinite;
}
.terminal,
.fullscreen {
	color: var(--color);
	text-shadow: 0 0 8px var(--color);
}
.phosphor {
	text-shadow:
		0 0 5px var(--color),
		0 0 15px var(--color);
}
#monitor:not(.off) #crt::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 4;
	opacity: 0.025;
	background-image: repeating-conic-gradient(
		var(--black) 0% 25%,
		transparent 0% 50%
	);
	background-size: 3px 3px;
}
#monitor.off #crt::after {
	display: none;
}
.glitch {
	position: relative;
}
.glitch::before,
.glitch::after {
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}
.glitch::before {
	animation: glitch 2s infinite;
	color: rgba(255, 0, 0, 0.6);
	z-index: -1;
}
.glitch::after {
	animation: glitch 2s infinite reverse;
	color: rgba(0, 0, 255, 0.6);
	z-index: -2;
}
.wobble {
	animation: wobble 8s ease-in-out infinite;
}
.blink {
	animation: blink 1s step-end infinite;
}
.pulse-glow {
	animation: pulseGlow 2s ease-in-out infinite;
}
#crt {
	will-change: transform;
}
.terminal {
	contain: layout style;
	will-change: scroll-position;
}
.scanline {
	will-change: transform;
}
::selection {
	background: var(--color);
	color: var(--bg);
	text-shadow: none;
}
.scanline {
	width: 100%;
	height: 100px;
	z-index: 8;
	background: linear-gradient(
		0deg,
		rgba(0, 0, 0, 0) 0%,
		rgba(255, 255, 255, 0.2) 10%,
		rgba(0, 0, 0, 0.1) 100%
	);
	opacity: 0.1;
	position: absolute;
	bottom: 100%;
	pointer-events: none;
	animation: scanline 10s linear infinite;
}
button {
	cursor: pointer;
	color: var(--dark);
}
button:focus-visible {
	outline: 2px solid var(--color);
	outline-offset: 2px;
}
#controls {
	width: 100%;
	margin-top: 2em;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
#volume {
	position: relative;
	color: #888;
	font-variant: small-caps;
}
#volume:after {
	position: absolute;
	content: "volume";
	bottom: -1.5rem;
	width: 100%;
	left: 0;
	text-align: center;
}
#dial-container {
	display: inline-block;
	padding: 5px;
	transform: rotate(-130deg);
}
#dial {
	outline: none;
	display: inline-block;
	width: 5rem;
	height: 5rem;
	border-radius: 50%;
	border: 0.25rem solid var(--dark);
	pointer-events: none;
}
.knob_gfx {
	pointer-events: auto;
	-webkit-touch-callout: none;
	user-select: none;
}
#monitor:not(.off) button:active,
#monitor:not(.off) #themes button.active {
	background-color: var(--color);
	position: relative;
}
#monitor:not(.off) #themes button.active:before {
	content: " ";
	position: absolute;
	width: 100%;
	height: 100%;
	box-shadow: 0.6px 0px 25px -3px var(--color);
	left: 0;
	top: 0;
	border-radius: 50%;
}
#themes {
	display: flex;
	flex-direction: column;
}
#themes button {
	width: 3rem;
	height: 3rem;
	margin: 0.5rem;
	border: 0.25rem solid var(--dark);
	border-radius: 50%;
	box-shadow: inset 0 0 10px 0 var(--black);
	cursor: pointer;
}
#power {
	display: flex;
	align-items: flex-end;
}
#fullscreen {
	border: 0.25rem solid var(--dark);
	padding: 1rem;
	background-color: rgb(186, 189, 182);
	transition: opacity 0.5s;
	font-weight: bold;
	line-height: 1rem;
}
#fullscreen-exit {
	display: none;
	position: fixed;
	top: 1rem;
	right: 1rem;
	z-index: 1001;
	border: 0.25rem solid var(--dark);
	padding: 1rem;
	background-color: rgb(186, 189, 182);
	font-weight: bold;
	line-height: 1rem;
	cursor: pointer;
	transform: rotate(180deg);
	opacity: 0.5;
	transition: opacity 0.3s;
}
#fullscreen-exit:hover {
	opacity: 1;
}
body.fullscreen #fullscreen-exit {
	display: block;
}
body.fullscreen #controls {
	display: none;
}
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}
.access-granted {
	animation: flicker 2s infinite;
	position: fixed;
	text-align: center;
	background: var(--bg);
	border: 2px solid var(--color);
	padding: 10px 30px;
	left: 50%;
	top: 40%;
	transform: translateX(-50%);
	z-index: 999;
}
.post-it {
	transform: rotate(3deg);
	line-height: 1;
	text-align: center;
	padding: 1rem;
	border: 1px solid #e8e8e8;
	font-family: "Permanent Marker", cursive;
	font-size: 1rem;
	color: #333;
	border-bottom-right-radius: 40px 14px;
	display: inline-block;
	background: var(--post-it-yellow);
	background: linear-gradient(
		135deg,
		var(--post-it-yellow) 81%,
		var(--post-it-yellow) 82%,
		var(--post-it-yellow) 82%,
		var(--post-it-highlight) 100%
	);
	transition:
		transform 0.4s ease-in-out,
		opacity 0.4s ease-in-out;
	cursor: pointer;
}
.post-it:hover {
	border-bottom-left-radius: 20px 5px;
	border-bottom-right-radius: 40px 28px;
}
.post-it.fly {
	transform: rotate(3deg) scale(0.2);
	opacity: 0;
}
#slider {
	display: none;
}
.switch {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 34px;
}
.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}
.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--bg);
	-webkit-transition: 0.4s;
	transition: 0.4s;
}
.slider:before {
	position: absolute;
	content: "O";
	height: 26px;
	width: 26px;
	left: 4px;
	bottom: 4px;
	background-color: var(--color);
	-webkit-transition: 0.4s;
	transition: 0.4s;
	display: grid;
	place-items: center;
}
input:checked + .slider {
	background-color: var(--color);
}
input:focus + .slider {
	box-shadow: 0 0 6px 1px var(--color) inset;
}
input:checked + .slider:before {
	background-color: var(--bg);
	color: var(--color);
	content: "I";
	-webkit-transform: translateX(26px);
	-ms-transform: translateX(26px);
	transform: translateX(26px);
}
@media only screen and (max-width: 425px), (max-height: 425px) {
	#monitor {
		margin: 0;
		padding: 0;
		background: none;
	}
	#screen {
		border: none;
	}
	#crt {
		min-width: unset;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 999;
	}
	#controls {
		display: none;
	}
	#slider {
		display: initial;
		position: fixed;
		top: 50%;
		right: 50%;
		opacity: 1;
		transition:
			top 1s ease-out,
			right 1s ease-out,
			opacity 1s ease-out;
		animation: glow 3s ease-in-out infinite;
	}
	#slider.on {
		top: 10px;
		right: 10px;
		opacity: 0.2;
		animation: none;
	}
}
@media only screen and (max-width: 768px) {
	.post-it,
	#themes,
	#volume {
		display: none;
	}
	#power {
		width: 100%;
		justify-content: space-around;
	}
}
@media only screen and (min-width: 800px) {
	#themes {
		flex-direction: row;
	}
	.post-it {
		font-size: 2rem;
	}
}