.layers {
	position: relative;
}

.layers::before,
.layers::after {
	content: attr(data-text);
	position: absolute;
	width: 110%;
	z-index: -1;
}

.layers::before {
	top: 10px;
	left: 15px;
	color: #d3d3d3;
}

.layers::after {
	top: 5px;
	left: -10px;
	color: #d3d3d3;
}

.single-path {
	clip-path: polygon(0% 12%,
			53% 12%,
			53% 26%,
			25% 26%,
			25% 86%,
			31% 86%,
			31% 0%,
			53% 0%,
			53% 84%,
			92% 84%,
			92% 82%,
			70% 82%,
			70% 29%,
			78% 29%,
			78% 65%,
			69% 65%,
			69% 66%,
			77% 66%,
			77% 45%,
			85% 45%,
			85% 26%,
			97% 26%,
			97% 28%,
			84% 28%,
			84% 34%,
			54% 34%,
			54% 89%,
			30% 89%,
			30% 58%,
			83% 58%,
			83% 5%,
			68% 5%,
			68% 36%,
			62% 36%,
			62% 1%,
			12% 1%,
			12% 34%,
			60% 34%,
			60% 57%,
			98% 57%,
			98% 83%,
			1% 83%,
			1% 53%,
			91% 53%,
			91% 84%,
			8% 84%,
			8% 83%,
			4% 83%);
}

.paths {
	animation: paths 5s step-end infinite;
}

@keyframes paths {
	0% {
		clip-path: polygon(0% 43%,
				83% 43%,
				83% 22%,
				23% 22%,
				23% 24%,
				91% 24%,
				91% 26%,
				18% 26%,
				18% 83%,
				29% 83%,
				29% 17%,
				41% 17%,
				41% 39%,
				18% 39%,
				18% 82%,
				54% 82%,
				54% 88%,
				19% 88%,
				19% 4%,
				39% 4%,
				39% 14%,
				76% 14%,
				76% 52%,
				23% 52%,
				23% 35%,
				19% 35%,
				19% 8%,
				36% 8%,
				36% 31%,
				73% 31%,
				73% 16%,
				1% 16%,
				1% 56%,
				50% 56%,
				50% 8%);
	}

	5% {
		clip-path: polygon(0% 29%,
				44% 29%,
				44% 83%,
				94% 83%,
				94% 56%,
				11% 56%,
				11% 64%,
				94% 64%,
				94% 70%,
				88% 70%,
				88% 32%,
				18% 32%,
				18% 96%,
				10% 96%,
				10% 62%,
				9% 62%,
				9% 84%,
				68% 84%,
				68% 50%,
				52% 50%,
				52% 55%,
				35% 55%,
				35% 87%,
				25% 87%,
				25% 39%,
				15% 39%,
				15% 88%,
				52% 88%);
	}

	30% {
		clip-path: polygon(0% 53%,
				93% 53%,
				93% 62%,
				68% 62%,
				68% 37%,
				97% 37%,
				97% 89%,
				13% 89%,
				13% 45%,
				51% 45%,
				51% 88%,
				17% 88%,
				17% 54%,
				81% 54%,
				81% 75%,
				79% 75%,
				79% 76%,
				38% 76%,
				38% 28%,
				61% 28%,
				61% 12%,
				55% 12%,
				55% 62%,
				68% 62%,
				68% 51%,
				0% 51%,
				0% 92%,
				63% 92%,
				63% 4%,
				65% 4%);
	}

	45% {
		clip-path: polygon(0% 33%,
				2% 33%,
				2% 69%,
				58% 69%,
				58% 94%,
				55% 94%,
				55% 25%,
				33% 25%,
				33% 85%,
				16% 85%,
				16% 19%,
				5% 19%,
				5% 20%,
				79% 20%,
				79% 96%,
				93% 96%,
				93% 50%,
				5% 50%,
				5% 74%,
				55% 74%,
				55% 57%,
				96% 57%,
				96% 59%,
				87% 59%,
				87% 65%,
				82% 65%,
				82% 39%,
				63% 39%,
				63% 92%,
				4% 92%,
				4% 36%,
				24% 36%,
				24% 70%,
				1% 70%,
				1% 43%,
				15% 43%,
				15% 28%,
				23% 28%,
				23% 71%,
				90% 71%,
				90% 86%,
				97% 86%,
				97% 1%,
				60% 1%,
				60% 67%,
				71% 67%,
				71% 91%,
				17% 91%,
				17% 14%,
				39% 14%,
				39% 30%,
				58% 30%,
				58% 11%,
				52% 11%,
				52% 83%,
				68% 83%);
	}

	76% {
		clip-path: polygon(0% 26%,
				15% 26%,
				15% 73%,
				72% 73%,
				72% 70%,
				77% 70%,
				77% 75%,
				8% 75%,
				8% 42%,
				4% 42%,
				4% 61%,
				17% 61%,
				17% 12%,
				26% 12%,
				26% 63%,
				73% 63%,
				73% 43%,
				90% 43%,
				90% 67%,
				50% 67%,
				50% 41%,
				42% 41%,
				42% 46%,
				50% 46%,
				50% 84%,
				96% 84%,
				96% 78%,
				49% 78%,
				49% 25%,
				63% 25%,
				63% 14%);
	}

	90% {
		clip-path: polygon(0% 41%,
				13% 41%,
				13% 6%,
				87% 6%,
				87% 93%,
				10% 93%,
				10% 13%,
				89% 13%,
				89% 6%,
				3% 6%,
				3% 8%,
				16% 8%,
				16% 79%,
				0% 79%,
				0% 99%,
				92% 99%,
				92% 90%,
				5% 90%,
				5% 60%,
				0% 60%,
				0% 48%,
				89% 48%,
				89% 13%,
				80% 13%,
				80% 43%,
				95% 43%,
				95% 19%,
				80% 19%,
				80% 85%,
				38% 85%,
				38% 62%);
	}

	1%,
	7%,
	33%,
	47%,
	78%,
	93% {
		clip-path: none;
	}
}

.movement {
	/* Normally this position would be absolute & on the layers, set to relative here so we can see it on the div */
	position: relative;
	animation: movement 8s step-end infinite;
}

@keyframes movement {
	0% {
		top: 0px;
		left: -20px;
	}

	15% {
		top: 10px;
		left: 10px;
	}

	60% {
		top: 5px;
		left: -10px;
	}

	75% {
		top: -5px;
		left: 20px;
	}

	100% {
		top: 10px;
		left: 5px;
	}
}

.opacity {
	animation: opacity 5s step-end infinite;
}

@keyframes opacity {
	0% {
		opacity: 0.1;
	}

	5% {
		opacity: 0.7;
	}

	30% {
		opacity: 0.4;
	}

	45% {
		opacity: 0.6;
	}

	76% {
		opacity: 0.4;
	}

	90% {
		opacity: 0.8;
	}

	1%,
	7%,
	33%,
	47%,
	78%,
	93% {
		opacity: 0;
	}
}

@keyframes flicker {
	0% {
		opacity: 0.27861;
	}

	5% {
		opacity: 0.34769;
	}

	10% {
		opacity: 0.23604;
	}

	15% {
		opacity: 0.90626;
	}

	20% {
		opacity: 0.18128;
	}

	25% {
		opacity: 0.83891;
	}

	30% {
		opacity: 0.65583;
	}

	35% {
		opacity: 0.67807;
	}

	40% {
		opacity: 0.26559;
	}

	45% {
		opacity: 0.84693;
	}

	50% {
		opacity: 0.96019;
	}

	55% {
		opacity: 0.08594;
	}

	60% {
		opacity: 0.20313;
	}

	65% {
		opacity: 0.71988;
	}

	70% {
		opacity: 0.53455;
	}

	75% {
		opacity: 0.37288;
	}

	80% {
		opacity: 0.71428;
	}

	85% {
		opacity: 0.70419;
	}

	90% {
		opacity: 0.7003;
	}

	95% {
		opacity: 0.36108;
	}

	100% {
		opacity: 0.24387;
	}
}

.font {
	animation: font 7s step-end infinite;
}

@keyframes font {
	0% {
		font-weight: 100;
		color: #fff;
		filter: blur(3px);
	}

	20% {
		font-weight: 500;
		color: #fff;
		filter: blur(0);
	}

	50% {
		font-weight: 300;
		color: #fff;
		filter: blur(2px);
	}

	60% {
		font-weight: 700;
		color: #fff;
		filter: blur(0);
	}

	90% {
		font-weight: 500;
		color: #fff;
		filter: blur(6px);
	}
}

@keyframes scanline {
	0% {
	  transform: translate3d(-150%);
	}
  
	80%,
	100% {
	  transform: translateY(150%);
	}
  }

/* Scanline moving top to bottom over the screen */
.scanline {
    width: 100%;
	height: 100%;
	z-index: 1;
	background: linear-gradient(
		0deg,
		rgba(0, 0, 0, 0) 0%,
		rgba(255, 255, 255, 0.35) 5%,
		rgba(0, 0, 0, 0.1) 11.5%);
	opacity: 0.1;
	position: absolute;
	bottom: 100%;
	pointer-events: none;
	animation: scanline 10s linear infinite;
}

.gradient {
	height: 100%;
	width: 100%;
	z-index: 2;
	background: radial-gradient(circle, rgb(35, 35, 35) 0%, rgb(5, 5, 5) 100%);
}

.sticky {
	margin-left: -10%;
	z-index: -1;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	background: #ffffff00;
}

.background-effect::before {
	content: " ";
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: linear-gradient(rgba(18, 16, 16, 0) 75%, 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));
	z-index: 1;
	background-size: 100% 0.15vw, 2.5px 100%;
	pointer-events: none;
}

.background-effect::after {
	content: " ";
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: rgba(18, 16, 16, 0.1);
	opacity: 0;
	z-index: 10;
	pointer-events: none;
	animation: flicker 0.15s infinite;
}

.glitch span {
	animation: paths 5s step-end infinite;
}

.glitch::before {
	animation: paths 5s step-end infinite, opacity 5s step-end infinite,
		font 8s step-end infinite, movement 10s step-end infinite;
}

.glitch::after {
	animation: paths 5s step-end infinite, opacity 5s step-end infinite,
		font 7s step-end infinite, movement 8s step-end infinite;
}

.hero-container {
	align-items: center;
	display: flex;
	position: relative;
	width: 100%;
	text-align: left;
	margin-bottom: 24vh;
}

.previous {
	font-size: 2.7rem;
	/* font-size: 3.5vw; */
	align-items: center;
	display: flex;
	position: relative;
	text-align: left;
	line-height: 1;
	color: #a0a0a0;
}

.slash {
	color: #a0a0a0;
	font-size: 2.7rem;
	/* font-size: 3.5vw; */
}

.current {
	font-size: 2.7rem;
	/* font-size: 3.5vw; */
	line-height: 1;
	color: #a0a0a0;
	/* Bright things in dark environments usually cast that light, giving off a glow */
}

body {
	margin-top: 50px;
	margin-bottom: 250px;
	margin-left: 10%;
	margin-right: 10%;
	font-family: "VCR", monospace;
	animation: textShadow 1.6s infinite;
	text-shadow: 0.175vw 0.05vw 0.5px rgba(0,30,255,0.325), -0.175vw -0.05vw 0.5px rgba(255,0,80,0.225);
	/* text-shadow: 4.5px 0 1px rgba(0, 0, 0, 0.5), 5px 0 0.5px rgba(255, 255, 255, 0.25); */
	background: url('/assets/effect-artifacts.gif');
	cursor: url('/assets/cursor-default.png') 0 0,auto;
	z-index: 15;
}

.cursor{
	cursor: url('/assets/cursor-default.png') 0 0,auto;
}

.century {
	font-size: 50px;
	color: #d3d3d3;
}

::selection {
	background: #9b9b9b;
	color: #0f0f0f;
	text-shadow: none;
}

@font-face {
	font-family: 'VCR';
	src: url('VCR.eot');
	/* IE9 Compat Modes */
	src: url('VCR.eot?#iefix') format('embedded-opentype'),
		/* IE6-IE8 */
		url('VCR.woff') format('woff'),
		/* Modern Browsers */
		url('VCR.ttf') format('truetype'),
		/* Safari, Android, iOS */
		url('VCR.svg#svgFontName') format('svg');
	/* Legacy iOS */
}

.non-clickable {
	text-decoration: none;
	width: 100%;
	color: #fff;
	/* text-shadow: 0px 0px 0.175vw #fff; */
}

.clickable {
	text-decoration: none;
	width: 100%;
	color: #fff;
	/* text-shadow: 0px 0px 0.175vw #fff; */
}

.clickable:hover {
	/* background-color: #777777; */
	background-image: url('/assets/crt2.gif');
	cursor: url('/assets/cursor-pointer.png') 0 0,auto;
}

.spacing {
	margin-bottom: 100px;
}

.pages {
	font-size: 4.1rem;
	/* font-size: 4.5vw; */
	text-decoration: none;
	width: 100%;
}

.personal {
	line-height: 1.15;
	font-size: 4.1rem;
	/* font-size: 4.5vw; */
	text-decoration: none;
	width: 100%;
	color: #a0a0a0;
}

.description {
	line-height: 1.05;
	font-size: 32.5px;
	width: 100%;
	color: #a0a0a0;
}

.noise::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url('/assets/background-noise.png');
	animation: 0.2s infinite noise;
	pointer-events: none;
	z-index: 5;
}

@keyframes noise {
	0%,
	100% {
		background-position: 0 0;
	}

	10% {
		background-position: -5% -10%;
	}

	20% {
		background-position: -15% 5%;
	}

	30% {
		background-position: 7% -25%;
	}

	40% {
		background-position: 20% 25%;
	}

	50% {
		background-position: -25% 10%;
	}

	60% {
		background-position: 15% 5%;
	}

	70% {
		background-position: 0% 15%;
	}

	80% {
		background-position: 25% 35%;
	}

	90% {
		background-position: -10% 10%;
	}
}

.hiddenimg {
	display: none;
}

.hiddentxt:hover ~ .hiddenimg {
	display: block;
	position: absolute;
	z-index: 0;
	margin-left: 30vw;
}

/* @keyframes textShadow {
	0% {
	  text-shadow: 0.4389924193300864px 0 0.5px rgba(0,30,255,0.5), -0.4389924193300864px 0 0.5px rgba(255,0,80,0.35), 0 0 1.5px;
	}
	5% {
	  text-shadow: 1.9928974010788217px 0 0.5px rgba(0,30,255,0.5), -1.9928974010788217px 0 0.5px rgba(255,0,80,0.35), 0 0 1.5px;
	}
	10% {
	  text-shadow: 0.02956275843481219px 0 0.5px rgba(0,30,255,0.5), -0.02956275843481219px 0 0.5px rgba(255,0,80,0.35), 0 0 1.5px;
	}
	15% {
	  text-shadow: 0.40218538552878136px 0 0.5px rgba(0,30,255,0.5), -0.40218538552878136px 0 0.5px rgba(255,0,80,0.35), 0 0 1.5px;
	}
	20% {
	  text-shadow: 2.0794037899852017px 0 0.5px rgba(0,30,255,0.5), -2.0794037899852017px 0 0.5px rgba(255,0,80,0.35), 0 0 1.5px;
	}
	25% {
	  text-shadow: 1.6125630401149584px 0 0.5px rgba(0,30,255,0.5), -1.6125630401149584px 0 0.5px rgba(255,0,80,0.35), 0 0 1.5px;
	}
	30% {
	  text-shadow: 0.7015590085143956px 0 0.5px rgba(0,30,255,0.5), -0.7015590085143956px 0 0.5px rgba(255,0,80,0.35), 0 0 1.5px;
	}
	35% {
	  text-shadow: 2.096914047650351px 0 0.5px rgba(0,30,255,0.5), -2.096914047650351px 0 0.5px rgba(255,0,80,0.35), 0 0 1.5px;
	}
	40% {
	  text-shadow: 1.870905614848819px 0 0.5px rgba(0,30,255,0.5), -1.870905614848819px 0 0.5px rgba(255,0,80,0.35), 0 0 1.5px;
	}
	45% {
	  text-shadow: 1.231056963361899px 0 0.5px rgba(0,30,255,0.5), -1.231056963361899px 0 0.5px rgba(255,0,80,0.35), 0 0 1.5px;
	}
	50% {
	  text-shadow: 0.08084290417898504px 0 0.5px rgba(0,30,255,0.5), -0.08084290417898504px 0 0.5px rgba(255,0,80,0.35), 0 0 1.5px;
	}
	55% {
	  text-shadow: 1.3758461067427543px 0 0.5px rgba(0,30,255,0.5), -1.3758461067427543px 0 0.5px rgba(255,0,80,0.35), 0 0 1.5px;
	}
	60% {
	  text-shadow: 2.002193051050636px 0 0.5px rgba(0,30,255,0.5), -2.002193051050636px 0 0.5px rgba(255,0,80,0.35), 0 0 1.5px;
	}
	65% {
	  text-shadow: 1.9638780614874975px 0 0.5px rgba(0,30,255,0.5), -1.9638780614874975px 0 0.5px rgba(255,0,80,0.35), 0 0 1.5px;
	}
	70% {
	  text-shadow: 0.48874025155497314px 0 0.5px rgba(0,30,255,0.5), -0.48874025155497314px 0 0.5px rgba(255, 0, 80, 0.35), 0 0 1.5px;
	}
	75% {
	  text-shadow: 1.8948491305757957px 0 0.5px rgba(0,30,255,0.5), -1.8948491305757957px 0 0.5px rgba(255,0,80,0.35), 0 0 1.5px;
	}
	80% {
	  text-shadow: 0.0833037308038857px 0 0.5px rgba(0,30,255,0.5), -0.0833037308038857px 0 0.5px rgba(255,0,80,0.35), 0 0 1.5px;
	}
	85% {
	  text-shadow: 0.09769827255241735px 0 0.5px rgba(0,30,255,0.5), -0.09769827255241735px 0 0.5px rgba(255,0,80,0.35), 0 0 1.5px;
	}
	90% {
	  text-shadow: 1.443339761481782px 0 0.5px rgba(0,30,255,0.5), -1.443339761481782px 0 0.5px rgba(255,0,80,0.35), 0 0 1.5px;
	}
	95% {
	  text-shadow: 2.0841838852799786px 0 1px rgba(0,30,255,0.5), -2.0841838852799786px 0 0.5px rgba(255,0,80,0.35), 0 0 1.5px;
	}
	100% {
	  text-shadow: 1.7208764473832513px 0 1px rgba(0,30,255,0.5), -1.7208764473832513px 0 0.5px rgba(255,0,80,0.35), 0 0 1.5px;
	}
}
.crt {
	animation: textShadow 1.6s infinite;
} */