* {
	font-family: 'Space Mono', monospace;
}

body,
html {
	padding: 0;
	margin: 0;
	overflow-x: hidden;
	background-color: #111111 !important;
	width: 100vw !important;
	/* Hide horizontal scrollbar */
}

p {
	text-align: center;
}

h1 {
	text-align: center;
	background-color: #111111;
}

.sticky {
	position: sticky;
	/* todo make sticky work - maybe change glitch text or make custom webgl?*/
	position: -webkit-sticky;
	top: 0;
}

h2 {
	text-align: center;
}

a {
	text-decoration: none;
	color: inherit;
}

footer {
	color: #ececec;
}

/* Scrollbar */
::-webkit-scrollbar {
	width: 15px;
	background: transparent;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background: #ececec;
}

::-webkit-scrollbar-thumb:hover {
	background: #bebebe;
}

/* boxes */
.title_box {
	margin: 0;
	padding-top: 40vh;
	height: 80vh;
	color: #ececec;
}

.comment_box {
	margin: 0;
	padding-top: 8vh;
	background-color: #ececec;
	height: 250px;
	color: #111111;
}

/*text glitch*/
.glitch_text {
	position: relative;
	color: #ececec;
	font-size: 3em;
	letter-spacing: 0.2em;
	/* Animation provies a slight random skew. */
	animation: glitch-skew 1s infinite linear alternate-reverse;
	/* Creates a copy before our text.*/
	/* Creates a copy after our text. Note comments from ::before.*/
}

.glitch_text::before {
	/* Duplicates our text with the mixin.*/
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* Scoots text slightly to the left for the color offset.*/
	left: 1px;
	/* Creates the color 'shadow' that happens on the glitch.*/
	text-shadow: -1px 0 #40a1f7;
	/* Creates an initial clip for our glitch. This works in a typical top,right,bottom,left fashion and creates a mask to only show a certain part of the glitch at a time. */
	clip: rect(44px, 450px, 56px, 0);
	/* Runs our glitch-anim defined below to run in a 5s loop, infinitely, with an alternating animation to keep things fresh. */
	animation: glitch-anim 5s infinite linear alternate-reverse;
}

.glitch_text::after {
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	left: -1px;
	text-shadow: -1px 0 #f755de, 1px 1px #40a1f7;
	animation: glitch-anim2 1s infinite linear alternate-reverse;
}

/* Creates an animation with 20 steaps. For each step, it calculates a percentage for the specific step. It then generates a random clip box to be used for the random glitch effect. Also adds a very subtle skew to change the 'thickness' of the glitch.*/
@keyframes glitch-anim {
	0% {
		clip: rect(16px, 9999px, 20px, 0);
		transform: skew(0.63deg);
	}

	5% {
		clip: rect(53px, 9999px, 49px, 0);
		transform: skew(0.6deg);
	}

	10% {
		clip: rect(95px, 9999px, 26px, 0);
		transform: skew(0.62deg);
	}

	15% {
		clip: rect(43px, 9999px, 67px, 0);
		transform: skew(0.4deg);
	}

	20% {
		clip: rect(61px, 9999px, 97px, 0);
		transform: skew(0.28deg);
	}

	25% {
		clip: rect(42px, 9999px, 23px, 0);
		transform: skew(0.45deg);
	}

	30% {
		clip: rect(33px, 9999px, 45px, 0);
		transform: skew(0.15deg);
	}

	35% {
		clip: rect(33px, 9999px, 24px, 0);
		transform: skew(0.74deg);
	}

	40% {
		clip: rect(60px, 9999px, 15px, 0);
		transform: skew(0.56deg);
	}

	45% {
		clip: rect(34px, 9999px, 42px, 0);
		transform: skew(0.08deg);
	}

	50% {
		clip: rect(92px, 9999px, 52px, 0);
		transform: skew(0.85deg);
	}

	55% {
		clip: rect(86px, 9999px, 72px, 0);
		transform: skew(0.62deg);
	}

	60% {
		clip: rect(34px, 9999px, 78px, 0);
		transform: skew(0.26deg);
	}

	65% {
		clip: rect(62px, 9999px, 46px, 0);
		transform: skew(0.92deg);
	}

	70% {
		clip: rect(98px, 9999px, 81px, 0);
		transform: skew(0.5deg);
	}

	75% {
		clip: rect(24px, 9999px, 99px, 0);
		transform: skew(0.87deg);
	}

	80% {
		clip: rect(17px, 9999px, 25px, 0);
		transform: skew(0.04deg);
	}

	85% {
		clip: rect(23px, 9999px, 31px, 0);
		transform: skew(0.56deg);
	}

	90% {
		clip: rect(85px, 9999px, 32px, 0);
		transform: skew(0.24deg);
	}

	95% {
		clip: rect(75px, 9999px, 27px, 0);
		transform: skew(0.78deg);
	}

	100% {
		clip: rect(92px, 9999px, 84px, 0);
		transform: skew(0.9deg);
	}
}

/* Same deal, just duplicated for ultra randomness.*/
@keyframes glitch-anim2 {
	0% {
		clip: rect(30px, 9999px, 40px, 0);
		transform: skew(0.02deg);
	}

	5% {
		clip: rect(89px, 9999px, 67px, 0);
		transform: skew(0.96deg);
	}

	10% {
		clip: rect(69px, 9999px, 40px, 0);
		transform: skew(0.06deg);
	}

	15% {
		clip: rect(9px, 9999px, 55px, 0);
		transform: skew(0.25deg);
	}

	20% {
		clip: rect(3px, 9999px, 30px, 0);
		transform: skew(0.96deg);
	}

	25% {
		clip: rect(46px, 9999px, 39px, 0);
		transform: skew(0.26deg);
	}

	30% {
		clip: rect(87px, 9999px, 68px, 0);
		transform: skew(0.07deg);
	}

	35% {
		clip: rect(48px, 9999px, 42px, 0);
		transform: skew(0.03deg);
	}

	40% {
		clip: rect(24px, 9999px, 83px, 0);
		transform: skew(0.22deg);
	}

	45% {
		clip: rect(18px, 9999px, 97px, 0);
		transform: skew(0.99deg);
	}

	50% {
		clip: rect(63px, 9999px, 56px, 0);
		transform: skew(0.55deg);
	}

	55% {
		clip: rect(30px, 9999px, 55px, 0);
		transform: skew(0.2deg);
	}

	60% {
		clip: rect(80px, 9999px, 43px, 0);
		transform: skew(0.63deg);
	}

	65% {
		clip: rect(21px, 9999px, 98px, 0);
		transform: skew(0.05deg);
	}

	70% {
		clip: rect(27px, 9999px, 67px, 0);
		transform: skew(0.08deg);
	}

	75% {
		clip: rect(13px, 9999px, 74px, 0);
		transform: skew(0.03deg);
	}

	80% {
		clip: rect(14px, 9999px, 10px, 0);
		transform: skew(0.73deg);
	}

	85% {
		clip: rect(4px, 9999px, 100px, 0);
		transform: skew(0.08deg);
	}

	90% {
		clip: rect(26px, 9999px, 64px, 0);
		transform: skew(1deg);
	}

	95% {
		clip: rect(18px, 9999px, 18px, 0);
		transform: skew(0.09deg);
	}

	100% {
		clip: rect(95px, 9999px, 27px, 0);
		transform: skew(0.98deg);
	}
}

/* Does the same deal as before, but now only skews. Used for main text.*/
@keyframes glitch-skew {
	0% {
		transform: skew(0deg);
	}

	10% {
		transform: skew(-2deg);
	}

	20% {
		transform: skew(1deg);
	}

	30% {
		transform: skew(0deg);
	}

	40% {
		transform: skew(0deg);
	}

	50% {
		transform: skew(0deg);
	}

	60% {
		transform: skew(-3deg);
	}

	70% {
		transform: skew(1deg);
	}

	80% {
		transform: skew(2deg);
	}

	90% {
		transform: skew(-2deg);
	}

	100% {
		transform: skew(-1deg);
	}
}

/*end text glitch*/

@media only print {
	html {
		display: none;
	}
}