html, body {
	margin: 0; 
	height: 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;
	width:100%;
	/*background-image: url("../assets/2a-man.jpg");
	background-position: center;
	background-repeat: no-repeat;
  	background-size: 60% 40%;*/
}

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

.backgroundImg{
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 85%;
	width: 70%;
	left: 15%;
	top: 0%;
	position: absolute;
	text-align: center;
}

.backgroundBack{
	background-image: url("../assets/2a-how_back.png");
	z-index: -1;
}

.backgroundFront{
	background-image: url("https://sites.temple.edu/2019fallseminarmw/files/2019/11/2a-how_front.png");
	z-index: 5;
}


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

.computerWrapper{
	height: 100%;
	width: 98%;
	left: 1%;
	position: absolute;
}

.top{
	top: 1%;
	position: relative;
	color:#9ae7f0;
}

.top h1{
  	animation: flash 1s linear infinite;
}

.bottom{
	bottom: 1%;
	right: 1%;
	position: relative;
}

.bottom h1{
	color: transparent;
  	animation: flash 1s linear infinite;
  	text-align: right;
}

h1{
	color: transparent;
	font-family: paralucent, sans-serif;
	font-size: 13.5vh;
	font-style: normal;
	font-weight: 400;
	letter-spacing: .15em;
	margin: 0;
	padding: 0;
}

.h {
	position: relative;
}

.questionWrapper{
	position: absolute;
	right: 1%;
	top: 16%;
}

#h1, #h2, #h3, #h4, #question1, #question2, #question3, #question4 {
  	animation: flash 1s linear infinite;
}

#h1, #question4{
	animation-delay: .1s;
}

#h2, #question3{
	animation-delay: .2s;
}

#h3, #question2{
	animation-delay: .3s;
}

#h4, #question1{
	animation-delay: .4s;
}



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


@keyframes flash {
    0%{     
    	color: transparent;   
    }
    49%{    
    	color: transparent;
    }
    50%{    
    	color: #000;
    }
    99%{    
    	color: #000; 
    }
    100%{   
    	color: transparent;   
    }
}





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

a{
	font-family: orator-std, monospace;
	box-shadow: 10px 10px transparent;
	color: transparent;
	font-size: 1.1em;
	font-style: normal;
	margin:0;
	padding: 15px 25px;
	position: absolute;
	text-decoration: none;
	width: 20%;
	z-index: 100;
}

.userButton1 a{
  	animation: buttonFlash .9s linear infinite;
	top: 10%;
	left: 5%;
  	animation-delay: .2s;
}

.userButton2 a{
  	animation: buttonFlash 1.1s linear infinite;
	left: 15%;
	top: 36%;
  	animation-delay: .49s;
}

.userButton2 a:hover, .userButton1 a:hover{
	animation-play-state: paused;
}

@keyframes buttonFlash {
    0%{     
    	background-color: transparent;   
    	color: transparent;
    	box-shadow: 10px 10px transparent;
		border: 3px solid transparent;
    }
    29.5%{    
    	background-color: transparent;
    	color: transparent;
    	box-shadow: 10px 10px transparent;
		border: 3px solid transparent;
    }
    30%{    
    	background-color: #14b6ce;
		box-shadow: 10px 10px #f4df2f;
		border: 3px solid #fff;
		color: #fff;
    }
    99.5%{    
    	background-color: #14b6ce; 
		box-shadow: 10px 10px #f4df2f;
		border: 3px solid #fff;
		color: #fff;
    }
    100%{   
    	background-color: transparent;   
    	color: transparent;
    	box-shadow: 10px 10px transparent;
		border: 3px solid transparent;
    }
}