/* Theme */

html,
body {
	background-color: #011;
	color: #5A5;
	font-family: 'Cascadia Code', monospace;
}

#app {
	padding: 1rem;
	height: 100vh;
}

/*	CRT Effect  */

body::before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(transparent 50%, rgba(0, 0, 0, 0.1) 50%);
	background-size: 100% 4px;
	z-index: 2;
	pointer-events: none;
	opacity: 0.3;
}

body::after {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom,
			rgba(255, 255, 255, 0.03) 50%,
			rgba(0, 0, 0, 0.1) 50%);
	background-size: 100% 6px;
	z-index: 2;
	pointer-events: none;
	animation: scanline 8s linear infinite;
}

@keyframes scanline {
	0% {
		background-position: 0 0;
	}

	100% {
		background-position: 0 100%;
	}
}