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;
}

iframe{
	border: none;
}

script{
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}


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

.computerWrapper{
	position: absolute;
	z-index: 100;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

h1{
	font-family: paralucent, sans-serif;
	font-size: 12vh;
	font-style: normal;
	letter-spacing: .15em;
	line-height: 1.4;
	margin: 0;
	padding: 0;
	text-align: right;
}

.front h1{
	color: #fff;
}

.front{
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
}

#blue{
	color:#00ffff;
	position: absolute;
	z-index: 9;
	top: -.5%;
	left: -.5%;

}

#pink{
	color: #ff00fc;
	position: absolute;
	z-index: 8;
	top: .5%;
	left: .5%;
}

.left, .center, .right{
	height: 87%;
	position: absolute;
	bottom: 0;
}

.left, .right{
	width: 33%;
}

.left h1, .center h1{
	font-weight: 300;
	color: #000;
}

.left{
	left: 0%;
}

.right{
	background-image: url('../assets/3b-restroom.jpg');
	background-size: contain;
	background-position: center;
	right: 0;
}

.right h1{
	color: #fff;
}

.center{
	left: 33%;
	width: 34%;
}


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

.yeah1, .yeah2, .yeah3, .yeah4, .yeah5, .full1, .full2, .full3, .full4{
  	animation: flash 3s linear infinite;
}

.left .yeah2, .center .yeah1{
	animation-delay: .1s;
}

.left .yeah3, .center .yeah2{
	animation-delay: .2s;
}

.left .yeah4, .center .yeah3{
	animation-delay: .3s;
}

.left .yeah5, .center .yeah4{
	animation-delay: .4s;
}

.center .yeah5, .right .full4{
	animation-delay: .5s;
}

@keyframes flash {
    0%{     
    	color: transparent;   
    }
    58.5%{    
    	color: transparent;
    }
    59%{    
    	color: #000;
    }
    65%{    
    	color: #000;
    }
    65.5%{    
    	color: transparent; 
    }
    100%{   
    	color: transparent;   
    }
}


.right .full1{
	animation-delay: .2s;
}

.right .full2{
	animation-delay: .3s;
}

.right .full3{
	animation-delay: .4s;
}

.right .full4{
	animation-delay: .5s;
}

.right .full5{
	animation-delay: .6s;
}

.full1, .full2, .full3, .full4, .full5{
	animation: flashFull 3s linear infinite;
}

@keyframes flashFull {
    0%{     
    	color: transparent;   
    }
    58%{    
    	color: transparent;
    }
    58.5%{    
    	color: #fff;
    }
    65%{    
    	color: #fff;
    }
    65.5%{    
    	color: transparent; 
    }
    100%{   
    	color: transparent;   
    }
}

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

a{
	background-color: #fff;
	box-shadow: 10px 10px #0e119e;
    border: 3px solid #000;
	color: #000;
	font-family: orator-std, monospace;
	font-size: 1em;
	font-weight: 100;
	margin:0;
	padding: 15px 25px;
	position: absolute;
	text-decoration: none;
	width: 20%;
	z-index: 3;
}

.userButton1 a{
	animation: flashBTN1 infinite linear 2s;
}

.userButton2 a{
	animation: flashBTN2 infinite linear 2.1s;
}

.userButton2 a:hover, .userButton1 a:hover{
	color: #000;
	box-shadow: 10px 10px #f4df2f;
}


@keyframes flashBTN1 {
	0%{
		top: 50%;
		left: 3%;
	}
	5.9%{
		top: 50%;
		left: 3%;
	}
	6%{
		top: 51%;
		left: 8%;
	}
	10%{
		top: 51%;
		left: 8%;
	}
	10.1%{
		top: 48%;
		left: 0%;
	}
	24.9%{
		top: 48%;
		left: 0%;
	}
	25%{
		top: 50%;
		left: 1%;
	}
	34.9%{
		top: 50%;
		left: 1%;
	}
	35%{
		top: 53%;
		left: 4%;
	}
	46.9%{
		top: 53%;
		left: 4%;
	}
	47%{
		top: 50%;
		left: 7%;
	}
	52.9%{
		top: 50%;
		left: 7%;
	}
	53%{
		top: 49%;
		left: 2%;
	}
	66.9%{
		top: 49%;
		left: 2%;
	}
	67%{
		top: 51%;
		left: 1%;
	}
	71.9%{
		top: 51%;
		left: 1%;
	}
	72%{
		top: 53%;
		left: 6%;
	}
	87.9%{
		top: 53%;
		left: 6%;
	}
	88%{
		top: 50%;
		left: 8%;
	}
	90.9%{
		top: 50%;
		left: 8%;
	}
	91%{
		top: 49%;
		left: 4%;
	}
	99.9%{
		top: 49%;
		left: 4%;
	}
	100%{
		top: 50%;
		left: 3%;
	}
}

@keyframes flashBTN2 {
	0%{
		top: 67%;
		left: 45%;
	}
	6.9%{
		top: 67%;
		left: 45%;
	}
	7%{
		top: 70%;
		left: 40%;
	}
	12.9%{
		top: 70%;
		left: 40%;
	}
	13%{
		top: 65%;
		left: 43%;
	}
	27.9%{
		top: 65%;
		left: 43%;
	}
	28%{
		top: 68%;
		left: 47%;
	}
	30.9%{
		top: 68%;
		left: 47%;
	}
	31%{
		top: 62%;
		left: 49%;
	}
	42.9%{
		top: 62%;
		left: 49%;
	}
	43%{
		top: 60%;
		left: 47%;
	}
	54.9%{
		top: 60%;
		left: 47%;
	}
	55%{
		top: 65%;
		left: 45%;
	}
	61.9%{
		top: 65%;
		left: 45%;
	}
	62%{
		top: 69%;
		left: 41%;
	}
	76.9%{
		top: 69%;
		left: 41%;
	}
	77%{
		top: 66%;
		left: 51%;
	}
	85.9%{
		top: 66%;
		left: 51%;
	}
	86%{
		top: 68%;
		left: 46%;
	}
	94.9%{
		top: 68%;
		left: 46%;
	}
	95%{
		top: 62%;
		left: 44%;
	}
	99.9%{
		top: 62%;
		left: 44%;
	}
	100%{
		top: 67%;
		left: 45%;
	}

}