html, body {
	margin: 0; 
	height: 100%; 
	width:100%;
	overflow: hidden;
	user-select: none; /* supported by Chrome and Opera */
	   -webkit-user-select: none; /* Safari */
	   -khtml-user-select: none; /* Konqueror HTML */
	   -moz-user-select: none; /* Firefox */
	   -ms-user-select: none; /* Internet Explorer/Edge */
}

body{
	margin:0;
	background-color: #000;
}


/* --------------------------------------------------------------------------- COMPUTER TEXT */

h1{
	color: transparent;
	font-family: 'paralucent', sans-serif;
	font-size: 25vh;
	line-height: 1;
	font-style: normal;
	font-weight: 200;
	margin: 0;
	padding: 0;
}

.compText{
	position: absolute;
	z-index: -1;
}

.compText1{
 	top: -1%;
 	left: 50%;
}

.compText2{
	top: 68%;
	left: 10%;
}

.letters{
	animation: letterFlash 1.25s linear infinite;
}

.letter2{
	animation-delay: .5s;
}

.letter3{
	animation-delay: 1.3s;
}

.letter4{
	animation-delay: 1.5s;
}

.letter5{
	animation-delay: 2s;
}

.letter6{
	animation-delay: 2.25s;
}

.letter7{
	animation-delay: 2.7s;
}

.letter8{
	animation-delay: 3.95s;
}

.letter9{
	animation-delay: 4s;
}

.letter10{
	animation-delay: 4.5s;
}

.letter11{
	animation-delay: 4.2s;
}




/* --------------------------------------------------------------------------- COMPUTER TEXT ANIMATION */

@keyframes letterFlash{
    0%{     
    	color: transparent;   
    }
    4.9%{    
    	color: transparent;
    }
    5%{    
    	color: #fff;
    }
    54.9%{    
    	color: #fff; 
    }
    55%{   
    	color: transparent;   
    }
    100%{   
    	color: transparent;   
    }
}


/* --------------------------------------------------------------------------- IMAGE */

.imgWrapper{
	overflow: hidden;
	position: absolute;
	top: 10%;
	width: 70%;
	height: 70%;
}

.imgFarWrapper{
	animation: imgFarMaskForward 10s linear 1;
  	animation-fill-mode: forwards;
}

.imgFarWrapperLoop{
	animation: imgFarMaskForwardLoop 10s linear infinite;
	left: -100%;
}

.img{
	position: relative;
	top: -60%;
	width: 180%;
}

.imgFar{
	animation: imgFar 10s linear 1;
  	animation-fill-mode: forwards;
	left: 0%;
}

.imgFarWrapperLoop2{
	animation-delay: 5s;
}

.imgFarLoop{
	animation: imgFarLoop 10s linear infinite;
	left: -100%;
}

.imgFarLoop2{
	animation-delay: 5s;
}

/* --------------------------------------------------------------------------- IMAGE */

@keyframes imgFarMaskForward {
    0%{     
    	left: 0%;   
    }
    100%{   
    	left: 200%;   
    }
}

@keyframes imgFarMaskForwardLoop {
    0%{     
    	left: -100%;   
    }
    100%{   
    	left: 100%;   
    }
}

@keyframes imgFar {
    0%{     
    	left: 0%;   
    }
    100%{   
    	left: -100%;   
    }
}

@keyframes imgFarLoop {
    0%{     
    	left: 0%;   
    }
    100%{   
    	left: -100%;   
    }
}




/* --------------------------------------------------------------------------- USER BUTTON */

a{
	animation: buttonScroll 20s linear infinite;
	background-color: #ff2a00;
	bottom: 35%;
	box-shadow: 10px 10px #0e119e;
	border: 3px solid #fff;
	color: #fff;
	font-family: orator-std, monospace;
	font-size: 1.1em;
	font-style: normal;
	padding: 15px 25px;
	position: absolute;
	text-decoration: none;
	width: 20%;
	z-index: 3;
}

a:hover{
	animation-play-state: paused;
}

@keyframes buttonScroll{
  0% {
    left: -30%;
  }
  100% {
    left: 100%;
  }
}