body {
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
}

/* Scan lines */
body::after {
	content: ' ';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: rgba(18, 16, 16, 0.1);
	opacity: 0;
	z-index: 2000;
	pointer-events: none;
}
body::before {
	content: ' ';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(0deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
	z-index: 2000;
	background-size: 100% 3px, 3px 100%;
	pointer-events: none;
	opacity: 0.4;
}

#editor {
	margin: 0;
	padding: 0;
	border: none;
	overflow: hidden;
	position: absolute;
	bottom: 65px;
	left: 1.5rem;
	width: calc(60vw - 40px);
	height: calc(100vh - 100px);
	display: none;
	clip-path: url(#tv-clipping);
	transform: rotate(.75deg);
}

#emulator {
	margin: 0;
	padding: 0;
	border: none;
	overflow: hidden;
	width: calc(40% - 1.5rem);
	height: calc(100vw * 0.4 * 0.75 - 1.5rem);
	position: absolute;
	right: 1.5rem;
	bottom: 75px;
	display: none;
	clip-path: url(#tv-clipping);
	animation-delay: 100ms;
	transform: rotate(-.75deg);
}

#auth {
	margin: 0;
	padding: 0;
	border: 2px solid #6c5eb5;
	overflow: hidden;
	width: 40rem;
	height: 30rem;
	position: absolute;
	bottom: 70px;
	left: 25%;
	transform-origin: -50%;
	transform: rotate(.8deg);
	display: none;
	clip-path: url(#tv-clipping);
}

#sky {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	background: url(../images/sky.png) no-repeat center center fixed;
	background-size: cover;
	pointer-events: none;
}

#clouds-far,
#clouds-near,
#mountains-far,
#mountains-near,
#grass-near,
#grass-far {
	pointer-events: none;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
}

#clouds-far {
	background: url(../images/clouds-far.png) repeat-x center 40px fixed;
	background-size: 50%;
	animation: animatedCloudsFar 4000s linear infinite;
}

#clouds-near {
	background: url(../images/clouds-near.png) repeat-x center top fixed;
	animation: animatedCloudsNear 1500s linear infinite;
}

#mountains-far {
	background: url(../images/mountains-far.png) repeat-x center calc(100% - 150px) fixed;
}

#mountains-near {
	background: url(../images/mountains-near.png) repeat-x center calc(100% - 100px) fixed;
}

#grass-near {
	animation-delay: 200ms;
	background: url(../images/grass-near.png) repeat-x center bottom fixed;
}

#grass-far {
	animation-delay: 250ms;
	background: url(../images/grass.png) repeat-x center calc(100% - 75px) fixed;
	transform: rotate(-.5deg);
}

@keyframes animatedCloudsNear {
	from {
		background-position: 0 -20%;
	}
	to {
		background-position: -10000px -20%;
	}
}

@keyframes animatedCloudsFar {
	from {
		background-position: 0 10%;
	}
	to {
		background-position: -10000px 20%;
	}
}