*{
	user-select: none;
	
}


body
{
	overflow: hidden;
	width: 100vw;
	height: 100vh;
	padding: 0;
	margin: 0;
}

#BG 
{	
	width: 100%;
	width: 100%;
	top: -400px;
	position: absolute;
	float:  left;

}


#diver {
	position: fixed;
	top: 1px;
	left: 650px;
	width: 250pt;
	z-index: 1;
	text-align: center;
}




#result {
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	color: black;
	z-index:1000;
	
	
}

#resultText {
	display: block;
	position: fixed;
	top: 100px;
	width: 1000px;
	height: 500px;
	color: white;
	text-align: left;
	font-size: 17pt;
	margin-left: 350px;
	z-index:1000;
	font-family: "Courier New";
}

#goodEnding {
	display: none;
	position: absolute;
	top: -20px;
	width: 100vw;
	height: 100vh;
	background-color: #EEFDFA;
	color:  #757D7A;
	text-align: center;
	padding: 200px;

	
}


#midEnding {
	display: none;
	position: absolute;
	top: -20px;
	width: 100vw;
	height: 100vh;
	background-color: #8AAFB8;
	color: #2E3A3D;
	text-align: center;
	padding: 200px;

	
}


#badEnding {
	display: none;
	position: absolute;
	top: -20px;
	width: 100vw;
	height: 100vh;
	background-color: #3A3D3C;
	color: #E5E8DA;
	text-align: center;
	padding: 200px;
}


#dontReach {

	white-space: nowrap;
	display: block;
	opacity: 0;
	position: fixed;
	top: 650px;
	color: white;
	font-family: "Courier New";
	font-size: 20px;
	text-align: center;
	animation-name: papaDontReach;
	animation-fill-mode: forwards;
    animation-duration: 8s;
	animation-delay: 2s;
	}
	
@keyframes papaDontReach{
	0%  {opacity: 0; left:0%;}
	60% {opacity: 1; left:35%;}
    100% {opacity: 0; left:110%;}
	
}
	
#tutorial {

	white-space: nowrap;
	display: block;
	opacity: 0;
	position: fixed;
	top: 600px;
	left: 300px;
	color: white;
	font-family: "Courier New";
	font-size: 20px;
	text-align: center;
	animation-name: tutorial;
	animation-fill-mode: forwards;
    animation-duration: 8s;
	animation-delay: 5s;
	}
	
@keyframes tutorial{
	0%  {opacity: 0; top:100%;}
	40% {opacity: 1; top:50%;}
    100% {opacity: 0; top:30%;}
	
}
	
	
/* The Modal (background) */
.modal 
{

  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 4; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content
{

	background-color: #000000;
	margin: 15% auto; /* 15% from the top and centered */
	padding: 20px;
	border: 1px solid #888;
	width: 30%;
	height: 30%;  /* Could be more or less, depending on screen size */
	text-align: center;
	font-family: "Courier New";
}

/* The Close Button */
.close 
{
  color: white;
  /* float: right; */
  font-size: 26px;
  font-weight: bold;
  display: inline-block;
}

.close:hover,
.close:focus 
{
  color: #cc0000;
  text-decoration: none;
  cursor: pointer;
}

#imgObj
{
	opacity: 0;
	text-align: center;
	position: fixed;
	z-index: 2; /* Sit on top */
	width: 50%;
	top: -60%;
    animation-name: enterObj, floatObj, exitObj;
	animation-fill-mode: forwards;
	animation-timing-function: ease-out, ease-in-out, ease-in-out;
    animation-duration: 4s, 6s, 4s;
	animation-delay: 12s, 16s, 21s;
	
	
}

@keyframes enterObj
{
    0%   {opacity: 0; top:-50%;}
    100% {opacity: 1; top:5%;}

}


 @keyframes floatObj
{
    0%   {opacity: 1; top:5%;}
    100% {opacity: 1; top:30%;}
}

@keyframes exitObj
{
    0%   {opacity: 1; top:30%;}
    100% {opacity: 0; top:100%;}
}

#startOver
{
	display: inline-block;
	font-size: 30pt;
	text-align: center;
	margin-top: 0px;
	cursor: pointer;
	color: white;
	
}

#startOver:hover,
#startOver:focus 
{
  color: #cc0000;
  text-decoration: none;
  cursor: pointer;
}

.answerOn
{

	cursor: pointer;
}

.answerOff
{
	position: fixed;
	font-size: 25pt;
	text-align: center;
	margin-right: 50px;
	z-index: 3; /* Sit on top */
	opacity: 0;
	color: white;
	font-family: "Courier New";
	max-height: 25pt;
	cursor: auto;
}


.answerOn:hover {
	color: gray;
	
}
	
	


#ansBox1{
	
    top: 30%;
	animation-name: enterAns, floatAns, exitAns;
	animation-fill-mode: forwards;
	animation-timing-function: ease-out, ease-in-out, ease-in-out;
    animation-duration: 4s, 6s, 4s;
	animation-delay: 14s, 19s, 23s	
	
}

#ansBox2{
	
    top: 40%;
	animation-name: enterAns, floatAns, exitAns;
	animation-fill-mode: forwards;
	animation-timing-function: ease-out, ease-in-out, ease-in-out;
    animation-duration: 4s, 6s, 4s;
	animation-delay: 15s, 20s, 24s	
}	

.answerG{
	position: fixed;
	font-size: 25pt;
	text-align: center;
	margin-right: 50px;
	z-index: 3; /* Sit on top */
	opacity: 0;
	color: white;
	font-family: "Courier New";
}

.pressedOn{
	color:red;

}

.pressedOn.hover:{
	color:DarkRed;
}	

#deadTxt
{

	text-align: center;
	font-size: 50px;
	color: white;
	top: 50px;
	font-family: "Courier New";
	font-weight: bold
	

}


@keyframes enterAns
{
    0%   {opacity: 0; right:-50%;}
    100% {opacity: 1; right:5%;}

}


 @keyframes floatAns
{
    0%   {opacity: 1; right:5%;}
    100% {opacity: 1; right:30%;}
}

@keyframes exitAns
{
    0%   {opacity: 1; right:30%;}
	50%   {opacity: 0; right:55%;}
    100% {opacity: 0; right:100%;}
}

#endingImage
{
	margin-top: 550px;
	margin-left: 700px;
	width: 300px;
	align-text: center;
	
}