body {
	background: #1b2838 none repeat scroll 0 0;
	margin: 0;
	overflow: hidden;
	height: 100vh;
	width: 100vw;
}
@font-face {
	src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/86186/terminal_copy.ttf);
	font-family: 'Terminal';
}
@font-face {
	src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/86186/sys.ttf)
		format('truetype');
	font-family: 'Sys';
}

.screen::before {
	background: transparent
		linear-gradient(to bottom, #85908c 0%, #323431 100%)
		repeat
		scroll
		0
		0;
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate3d(-50%, -50%, 0);
	width: 100%;
	height: 100%;
	z-index: -1;
}

.scanlines .overlay {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.scanlines .overlay::after {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/86186/crt.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	content: "";
}

.scanlines .overlay::before {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	content: " ";
	background: linear-gradient(
			rgba(18, 16, 16, 0) 50%,
			rgba(0, 0, 0, 0.25) 50%
		),
		linear-gradient(
			90deg,
			rgba(255, 0, 0, 0.06),
			rgba(0, 255, 0, 0.02),
			rgba(0, 0, 255, 0.06)
		);
	z-index: 2;
	background-size: 100% 2px, 3px 100%;
	pointer-events: none;
}

.picture {
	height: 100vh;
	overflow: hidden;
	width: 100vw;
	z-index: -1;
	transform: scale(0, 0);
	background: transparent
		linear-gradient(to bottom, #85908c 0%, #323431 100%)
		repeat
		scroll
		0
		0;
}

.menu {
	opacity: 0;
	background-color: #0069ff;
	box-sizing: border-box;
	font-family: "Sys";
	font-size: 40px;
	height: auto;
	text-transform: uppercase;
	width: 30%;
	text-shadow: 1px 1px 0 #000000,
		-1px -1px 0 #000000,
		1px -1px 0 #000000,
		-1px 1px 0 #000000;
	filter: blur(1px);
	color: #fff;
	animation: jerkup 100ms infinite;
}


.menu header {
	color: #e7e05c;
	margin-bottom: 10px;
	padding: 5px 15px;
	animation: 5s ease 2000ms normal none infinite running glitch;
}


.menu ul {
	margin: 0;
	padding: 0;
	animation: 5s ease 2000ms normal none infinite running glitch;
}


.menu ul li {
	box-sizing: border-box;
	list-style: outside none none;
	padding: 5px 15px;
}


.menu ul li.active {
	background-color: #1af2ff;
}


.menu ul li a {
	color: #fff;
	text-decoration: none;
}


.menu footer {
	background-color: #2afd72;
	margin-top: 10px;
	padding: 5px 15px;
	animation: 5s ease 2000ms normal none infinite running glitch;
}


.menu footer::after {
	clear: both;
	content: " ";
	display: table;
}


.menu footer .key {
	float: left;
	width: 50%;
}


.menu footer .key span {
	background-color: #0069ff;
	border: 6px solid #e7e05c;
	border-radius: 6px;
	display: inline-block;
	height: 34px;
	line-height: 36px;
	padding-left: 6px;
}

.menu footer .key:last-child {
	text-align: right;
}

.on .picture {
	animation: 3000ms linear 0ms normal forwards 1 running on;
}
.off .picture {
	animation: 750ms
		cubic-bezier(0.230, 1.000, 0.320, 1.000)
		0ms
		normal
		forwards
		1
		running
		off;
}

.text {
	color: lime;
	opacity: 0;
	filter: blur(0.5px);
	font-family: Sys;
	font-size: 6vmin;
	left: 5%;
	position: absolute;
	text-shadow: 0 0 3px lime;
	top: 10%;
	width: 200px;
}

.on .text,
.on .menu {
	opacity: 1;
	transition: opacity 10ms ease 2000ms;
}

@keyframes on {
	0% {
		transform: scale(1, 0.8) translate3d(0, 0, 0);
		filter: brightness(4);
		opacity: 1;
	}
	3.5% {
		transform: scale(1, 0.8) translate3d(0, 100%, 0);
	}

	3.6% {
		transform: scale(1, 0.8) translate3d(0, -100%, 0);
		opacity: 1;
	}

	9% {
		transform: scale(1.3, 0.6) translate3d(0, 100%, 0);
		filter: brightness(4);
		opacity: 0;
	}

	11% {
		transform: scale(1, 1) translate3d(0, 0, 0);
		filter: contrast(0) brightness(0);
		opacity: 0;
	}

	100% {
		transform: scale(1, 1) translate3d(0, 0, 0);
		filter: contrast(1) brightness(1.2) saturate(1.3);
		opacity: 1;
	}
}

@keyframes off {
	0% {
		transform: scale(1, 1);
		filter: brightness(1);
	}
	40% {
		transform: scale(1, 0.005);
		filter: brightness(100);
	}
	70% {
		transform: scale(1, 0.005);
	}
	90% {
		transform: scale(0.005, 0.005);
	}
	100% {
		transform: scale(0, 0);
	}
}

.text span {
	filter: blur(1px);
	position: absolute;
}
.text span:nth-child(1) {
	color: red;
	margin-left: -2px;
	filter: blur(2px);
}
.text span:nth-child(2) {
	color: lime;
	margin-left: 2px;
	filter: blur(2px);
}
.text span:nth-child(3) {
	color: blue;
	position: 20px 0;
	filter: blur(1px);
}
.text span:nth-child(4) {
	color: #fff;
	filter: blur(1px);
	text-shadow: 0 0 50px rgba(255, 255, 255, 0.4);
}
.text span:nth-child(5) {
	color: rgba(255, 255, 255, 0.1);
	filter: blur(15px);
}

.text span {
	animation: blur 30ms infinite, jerk 50ms infinite;
}

@keyframes blur {
	0% {
		filter: blur(1px);
		opacity: 0.8;
	}
	50% {
		filter: blur(1px);
		opacity: 1;
	}
	100% {
		filter: blur(1px);
		opacity: 0.8;
	}
}
@keyframes jerk {
	50% {
		transform: translateX(1px);
	}
	51% {
		transform: translateX(0);
	}
}
@keyframes jerkup {
	0% {
		transform: translateY(1px);
	}
	100% {
		transform: translateY(0);
	}
}
.text span:nth-child(2) {
	animation: jerkup 1s infinite;
}
.text span:nth-child(3) {
	animation: glitch1 1s infinite;
}
@keyframes glitch1 {
	0% {
		transform: translateX(0);
	}
	30% {
		transform: translateX(0);
	}
	31% {
		transform: translateX(10px);
	}
	32% {
		transform: translateX(0);
	}
	98% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(10px);
	}
}
.text span:nth-child(2) {
	animation: glitch2 1s infinite;
}
@keyframes glitch2 {
	0% {
		transform: translateX(0);
	}
	30% {
		transform: translateX(0);
	}
	31% {
		transform: translateX(-10px);
	}
	32% {
		transform: translateX(0);
	}
	98% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-10px);
	}
}

.overlay .text {
	animation: 5s ease 2000ms normal none infinite running glitch;
}
@keyframes glitch {
	30% {
	}
	40% {
		opacity: 1;
		transform: scale(1, 1);
		transform: skew(0, 0);
	}
	41% {
		opacity: 0.8;
		transform: scale(1, 1.2);
		transform: skew(80deg, 0);
	}
	42% {
		opacity: 0.8;
		transform: scale(1, 1.2);
		transform: skew(-50deg, 0);
	}
	43% {
		opacity: 1;
		transform: scale(1, 1);
		transform: skew(0, 0);
	}
	65% {
	}
}

/*-------------------------------------------*/

.menu-selector {
    max-height: 200px;
    overflow: hidden;
    position: relative;
    margin: 10px 0;
	transition: none;
}

.menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu-selector ul {
	animation: none;
	transform: translateY(0);
	transition: transform 120ms ease-out;
	will-change: transform;
}

.menu li {
    height: 50px;
    line-height: 50px;
}

.menu, .text {
    transition: opacity 0.15s steps(4); /* Steps makes it flicker like a digital HUD */
}

main.off {
    pointer-events: none;
    filter: brightness(2) contrast(3);
    transform: scaleY(0.01);
    transition: all 0.5s cubic-bezier(0.1, 0, 0, 1);
    opacity: 0;
}