@charset "utf-8";

/* ------------------------- */
/* 1. Fonts
/* ------------------------- */

/* ------------------------- */
/* 1.1. Fixedsys
/* ------------------------- */

@font-face {
	font-family: 'Fixedsys Excelsior';
	src: url('../fonts/fixedsys-excelsior/FixedsysExcelsiorIIIb.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/fixedsys-excelsior/FixedsysExcelsiorIIIb.woff') format('woff'), 
		 url('../fonts/fixedsys-excelsior/FixedsysExcelsiorIIIb.ttf') format('truetype'), 
		 url('../fonts/fixedsys-excelsior/FixedsysExcelsiorIIIb.svg#FixedsysExcelsiorIIIb') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* ------------------------- */
/* 2. General
/* ------------------------- */

#elapsed-time {
	position:fixed;
	bottom:10px;
	right:10px;
	font-size:10px;
	font-weight:bold;
}

* {
	-moz-box-sizing:border-box;
		 box-sizing:border-box;
}

html {
	overflow-x:hidden;
	height:100%;
}

body {
	overflow-x:hidden;
	font-family:'Fixedsys Excelsior', monospace;
	font-size:19px;
	text-transform:uppercase;
	text-shadow:0 0 2px rgba(0, 238, 0, 1);
	color:#00ee00;
	background-color:#000;
}

p {
	margin:0;
}

h1, h2, h3, h4, h5 {
	margin:0;
	font-weight:normal;
	font-size:19px;
}

ul,
ol {
	margin:0;
	padding:0;
	list-style:none;
}

a {
	outline:0;
	text-decoration:none;
	color:#00ee00;
}

a:hover, a:active, a:focus {
	outline:0;
}

a:hover {
	text-decoration:none;
	color:#0a0a0a;
	background-color:#00ee00;
	box-shadow:0 0 3px rgba(0, 238, 0, 1);
}

::-moz-selection { 
	color:#111;
	background-color:rgba(0, 238, 0, .9);
}

::selection { 
	color:#111;
	background-color:rgba(0, 238, 0, .9);
}

/* ------------------------- */
/* 3. Header
/* ------------------------- */

#header {
	margin:0 0 20px;
}

#header .line {
	position:relative;
	padding:0 0 0 40px
}

#header .line:before {
	content:'###';
	position:absolute;
	top:0;
	left:0;
}

/* ------------------------- */
/* 4. Content
/* ------------------------- */

#monitor {
	position:fixed;
	top:-45px;
	left:-45px;
	bottom:-45px;
	right:-45px;
	border:75px solid #000;
	border-radius:140px;
	box-shadow:inset 0 0 160px #000;
	z-index:100;
	pointer-events:none;
}

#screen {
	overflow:hidden;
	position:relative;
	padding:85px 100px;
	width:100%;
	height:100%;
	background-color:#111;
	opacity:0;
	animation:turn-on 4.5s .5s linear forwards;
}

#screen::after,
#screen::before {
	content:"";
	display:block;
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
	z-index:2;
	pointer-events:none;
}

#screen::after {
	background:rgba(8, 8, 8, 0.1);
	opacity:0;
	animation:flicker 1s infinite;
}

#screen::before {
	background:linear-gradient(rgba(8, 8, 8, 0) 50%, rgba(0, 0, 0, 0.35) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
	background-size:100% 2px, 3px 100%;
}

#screen-content .screen-content-aux-1 {
	animation:tearing 8s infinite ease alternate;
}

#screen-content .screen-content-aux-2 {
	animation:tearing 11s infinite ease alternate-reverse;
}

.inline-cursor {
	display:inline;
	background-color:red;
}

#danger {
	position:fixed;
	top:0;
	left:0;
	bottom:0;
	right:0;
	background-image:url(../images/666.gif);
	background-repeat:no-repeat;
	background-position:center center;
	background-attachment:fixed;
	background-size:cover;
	opacity:0;
}

.easter-egg #screen-content {
	position:fixed;
	top:0;
	left:0;
	bottom:0;
	right:0;
	animation:turn-off 0.55s forwards cubic-bezier(0.23, 1, 0.32, 1);
}

.easter-egg #danger {
	animation:turn-on 4s linear 2s forwards;
}

.cursor {
	animation:blink 1s infinite;
}

.pre-wrap {
	white-space:pre-wrap;
}

.lowercase {
	text-transform:lowercase;
}

.line-break {
	margin:20px 0 0;
}

.tab-1 {
	padding:0 0 0 75px;
}

.list-item {
	padding:0;
	position:relative;
}

.list-item:before {
	content:'-';
	position:absolute;
	top:0;
	left:0;
}

.tab-1.list-item {
	padding:0 0 0 95px;
}

.tab-1.list-item:before {
	left:75px;
}

@keyframes flicker {
	0% { opacity: 0.95982; }
	5% { opacity: 0.93112; }
	10% { opacity: 0.00000; }
	15% { opacity: 0.87793; }
	20% { opacity: 0.83645; }
	25% { opacity: 0.04187; }
	30% { opacity: 0.43544; }
	35% { opacity: 0.16915; }
	40% { opacity: 0.9898; }
	45% { opacity: 0.0158; }
	50% { opacity: 1.0000; }
	55% { opacity: 0.10658; }
	60% { opacity: 0.22326; }
	65% { opacity: 0.91066; }
	70% { opacity: 0.88971; }
	75% { opacity: 0.26001; }
	80% { opacity: 0.90551; }
	85% { opacity: 0.26165; }
	90% { opacity: 0.04034; }
	95% { opacity: 1.0000; }
	100% { opacity: 0.00098; }
}

@keyframes blink {
	0% { visibility:hidden; }
	50% { visibility:hidden; }
	100% { visibility:visible; }
}

@keyframes tearing {
	0% { 
		transform:skew(0, 0) scale(1, 1) translate(0, 0); 
		text-shadow:0 0 3px rgba(0, 238, 0, 1); 
	}
	25% { 
		transform:skew(-.2deg, -.3deg); 
		text-shadow:5px 2px 3px rgba(255, 0, 0, 1); 
	}
	31% { 
		transform:skew(-.2deg, -.3deg); 
	}
	32% { 
		transform:none; 
		text-shadow:0 0 3px rgba(0, 238, 0, 1); 
	}
	48% { 
		transform:none; 
		text-shadow:0 0 4px rgba(0, 238, 0, 1); 
	}
	49% { 
		transform:skew(0, 2.5deg) scale(1, 1) translate(0, -1%); 
		text-shadow:1px 4px 6px rgba(0, 0, 255, 1); 
	}
	50% { 
		transform:skew(0, 0) scale(1, .97) translate(0, 0); 
	}
	51% { 
		text-shadow:1px 4px 2px rgba(255, 0, 0, 1); 
	}
	52% { 
		transform:none;
		text-shadow:0 0 2px rgba(0, 238, 0, 1); 
	}
	66% { 
		transform:none;
		text-shadow:0 0 2px rgba(255, 0, 0, 1); 
	}
	71% { 
		transform:skew(0, 0) scale(1, 1) translate(-.2%, 0); 
		text-shadow:0 0 3px rgba(0, 238, 0, 1); 
	}
	72% { 
		text-shadow:5px 2px 3px rgba(255, 0, 0, 1);
	}
	73% { 
		transform:skew(0, -.5deg) scale(1, 1) translate(0, -1%); 
	}
	74% { 
		transform:none;
		text-shadow:1px 4px 2px rgba(0, 0, 255, 1); 
	}
	75% { 
		transform:none;
		text-shadow:0 0 3px rgba(0, 238, 0, 1); 
	}
}

@keyframes turn-on {
	0% {
		transform: scale(1, 0.8) translate3d(0, 0, 0);
		filter: brightness(30);
		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(30);
		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 turn-off {
	0% {
		transform: scale(1, 1.3) translate3d(0, 0, 0);
		filter: brightness(1);
		opacity: 1;
		background-color:#111;
	}
	60% {
		transform: scale(1.3, 0.001) translate3d(0, 0, 0);
		filter: brightness(10);
	}
	100% {
		animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
		transform: scale(0, 0.0001) translate3d(0, 0, 0);
		filter: brightness(50);
		background-color:#00ff00;
	}
}

/* ------------------------- */
/* 5. Footer
/* ------------------------- */

#footer {
	margin:20px 0 0;
}

/* ------------------------- */
/* 7. Make responsive 
/* ------------------------- */

@media all and (max-width: 1023px) {
	#monitor {
		top:-8px;
		left:-8px;
		bottom:-8px;
		right:-8px;
		border:15px #000 solid;
		border-radius:30px;
		box-shadow:inset 0 0 240px #000;
	}

	#screen {
		padding:65px 80px;
	}

	@keyframes tearing {
		0% { 
			transform:skew(0, 0) scale(1, 1.01) translate(0, 0); 
			text-shadow:0 0 3px rgba(0, 238, 0, 1); 
		}
		25% { 
			transform:skew(-.25deg, -.35deg); 
			text-shadow:5px 2px 3px rgba(255, 0, 0, 1); 
		}
		31% { 
			transform:skew(-.25deg, -.35deg); 
		}
		32% { 
			transform:none; 
			text-shadow:0 0 3px rgba(0, 238, 0, 1); 
		}
		48% { 
			transform:none; 
			text-shadow:0 0 4px rgba(0, 238, 0, 1); 
		}
		49% { 
			transform:skew(0, 3deg) scale(1, 1) translate(-50px, -1.5%); 
			text-shadow:1px 4px 6px rgba(0, 0, 255, 1); 
		}
		50% { 
			transform:skew(0, 0) scale(1, .96) translate(0, 0); 
		}
		51% { 
			transform:skew(50deg, 0) scale(1, 1); 
			text-shadow:1px 4px 2px rgba(255, 0, 0, 1); 
		}
		52% { 
			transform:none;
			text-shadow:0 0 2px rgba(0, 238, 0, 1); 
		}
		71% { 
			transform:skew(0, 0) scale(1, 1) translate(-.7%, 0); 
			text-shadow:0 0 3px rgba(0, 238, 0, 1); 
		}
		72% { 
			transform:skew(60deg, 0) scale(.9, 1) translate(0, 30px); 
			text-shadow:5px 2px 3px rgba(255, 0, 0, 1);
		}
		73% { 
			transform:skew(-20deg, -3deg) scale(1, 1) translate(0, 0); 
		}
		74% { 
			transform:none;
			text-shadow:1px 4px 2px rgba(0, 0, 255, 1); 
		}
		75% { 
			transform:none;
			text-shadow:0 0 3px rgba(0, 238, 0, 1); 
		}
	}
}

@media all and (max-width: 749px) {
	#screen {
		padding:35px;
	}

	.tab-1 {
		padding:0 0 0 50px;
	}

	.tab-1.list-item {
		padding:0 0 0 70px;
	}

	.tab-1.list-item:before {
		left:50px;
	}
}

@media all and (max-width: 567px) {
	.tab-1 {
		padding:0 0 0 20px;
	}

	.tab-1.list-item {
		padding:0 0 0 40px;
	}

	.tab-1.list-item:before {
		left:20px;
	}
}