html, body { width: 100%; height: 100%; }


/* USING CUSTOM FONTS */

@font-face { font-family: "brownstdlight"; src: url("../fonts/brown.std.light.otf"); }
@font-face { font-family: "brownstdreg"; src: url("../fonts/brown.std.regular.otf"); }
@font-face { font-family: "brownstdbold"; src: url("../fonts/brown.std.bold.otf"); }

h1 { font: normal 36px "brownstdbold"; }
h2 { font: normal 26px "brownstdreg"; }
h3 { font: normal 16px "brownstdlight"; }


/* defaults so we can see what we're doing */
#foreground { background: rgba(0,0,0,0.2); }
#background { background: rgba(0,0,0,0.2); }

img{
	width:100%;
	height:auto;
}

/*---------------------------
			button
---------------------------*/

#button{
	width:125px;
	height:125px;
	border-radius: 125px;
	background-color:#c60000;
	position: absolute;
	top:75%;
	right:5%;
	box-shadow: 3px 5px 5px #242424;

}

#button:hover{
	background-color: #a30000;
	box-shadow: 3px 3px 5px #242424;
}

/*---------------------------
			index
---------------------------*/

#tube2 {
	opacity:0.5;
	transform: rotate(180deg);
}






/*---------------------------
			page2
---------------------------*/


#tube3 {
	opacity:0.5;
	transform: rotate(180deg);
}

/*---------------------------
			page3
---------------------------*/

#page-03{
	background-color: #01064c;
}


#dot{
	width:50px;
	height: 50px;
	border-radius: 50px;
	background-color: #024d07;
	animation-name: dota;
  animation-duration: .5s; 
   animation-iteration-count: infinite;

}


@keyframes dota {
	0%, 100% {
    transform: translate(0, 200px);
  }
  
  25% {
    transform: translate(100px, 200px);
  }

  50% {
    transform: translate(600px, 200px);
  }
  
  75% {
    transform: translate(1500px, 200px);
  
}
}



#dot2{
	width:100px;
	height: 100px;
	border-radius: 100px;
	background-color: #008009;
	animation-name: dotb;
  animation-duration: 1s; 
   animation-iteration-count: infinite;
    

}

@keyframes dotb {
	0%, 100% {
    transform: translate(0, 300px);
  }
  
  25% {
    transform: translate(250px, 300px);
  }

  50% {
    transform: translate(800px, 300px);
  }
  
  75% {
    transform: translate(1500px, 300px);
  
}
}




/*---------------------------
			page4
---------------------------*/

#cheese{
	width:100%;
	height:100vh;
	display:inline-block;
	opacity: .75;

}



#page-04{
	background-color: #ffc600;
}

#cheese_please{
	font-family: 'Space Mono', monospace;
	font-size: 50pt;
	transform:rotate(35deg);
	color:#ffee2b;
	 text-shadow: 4px 4px 3px #fffabe;
	 position:absolute;
	 left:5%;
	 top:30%;
}


/*---------------------------
			page5
---------------------------*/

#cheese1{
	width:100%;
	height:100vh;
	position:absolute;
	left:20%;


}

#cheese2{
	width:100%;
	height:100vh;
	position:absolute;
	left:50%;
}

#cheese3{
	width:100%;
	height:100vh;
	position:absolute;
	left:80%;
}

#page-05{
	background-color: #ffc600;
}

#cheese_wedge{
	width:10%;
	height:auto;
	animation-name:cheese;
  animation-duration: 1s; 
   animation-iteration-count: infinite;

}




@keyframes cheese {
	0%, 100% {
    transform: translate(0, 0px);
  }
  
  25% {
    transform: translate(250px, 250px) rotate(45deg);
  }

  50% {
    transform: translate(1200px, 35px) rotate(-75deg);
  }
  
  75% {
    transform: translate(150px, 700px)rotate(-180deg);
  
}
}




/*---------------------------
			page6
---------------------------*/


#countryside{
	width:100%;
	height:100vh;
}

#beautiful{
	font-family: 'Space Mono', monospace;
	font-size: 80pt;
	transform:rotate(15deg);
	color:#ffffff;
	 text-shadow: 3px 3px 8px #7eff00;
	 position:absolute;
	 left:25%;
	 top:45%;
}


/*---------------------------
			page7
---------------------------*/

#page-07{
	background-color: white;
}


#syllabus2{
	opacity:.5;

}

/*---------------------------
			page8
---------------------------*/


#fat{
	font-size:60pt;
	font-family: 'Space Mono', monospace;
	background-color: #00ff12;
	width:20%;
	height:15%;
	padding-top: 10px;
	padding-top: 10px;
	position:absolute;
	left:40%;
	top:25%;
	box-shadow: 5px 5px 8px #969696;
}




/*---------------------------
			page9
---------------------------*/

#spring1 img{
	width:100%;
	height: auto;
	opacity:.75;
}


#spring2{
	width:50%;
	height:auto;
	opacity:.4;
}



/*---------------------------
			page10
---------------------------*/


#aerial_oxford{
	position:absolute;
	top:20%;
}


/*---------------------------
			page11
---------------------------*/


  #sticker{
	width:25%;
	height:auto;
	position: absolute;
	top:7%;
	left:37%;
	box-shadow: 3px 4px 4px black;

}

#sticker2{
	font-size:14pt;
	font-family: 'Space Mono', monospace;
	background-color: white;
	width:100%;
	position: absolute;
	top:45%;
}

/*---------------------------
			page12
---------------------------*/

#stickers3{
	width:200px;
	height:200px;

}


#stickers4 img{
	width:25%;
	height:auto;

}

/*---------------------------
			page13
---------------------------*/


#page-13{
	background-color: #0023d4;
}


#thanks{
	font-size:50pt;
	font-family: 'Space Mono', monospace;
	color:red;
	text-shadow: 4px 3px 4px #ed5858;
	position:absolute;
	left:35%;
	top:8%;
	transform:rotate(24deg);

}




#polite{
	font-size:80pt;
	font-family: 'Space Mono', monospace;
	color:white;
	text-shadow: 5px 4px 4px #d2d2d2;
	position:absolute;
	left:20%;
	top:30%;
	transform:rotate(-10deg);

}


#british{
	font-size:35pt;
	font-family: 'Space Mono', monospace;
	color:#0030ff;
	text-shadow: -3px -4px 4px #a2b4ff;
	position:absolute;
	left:50%;
	top:60%;
	transform:rotate(7deg);

}




/*---------------------------
			page14
---------------------------*/



#circle{
	border-radius: 200px;
	height: 200px;
	width: 200px;
	border:solid red 4px;
	position:absolute;
	left:38%;
	top:50%;
	box-shadow: 0 0 0 #fe5252;
	animation: pulse 2s infinite;
}


#circle:hover {
  animation: none;
}


@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 #fe5252;
    box-shadow: 0 0 0 0 #fe5252;opacity: .5;
  }
  70% {
      -moz-box-shadow: 0 0 0 10px #fe5252;
      box-shadow: 0 0 0 10px #fe5252;opacity: .5;
  }
  100% {
      -moz-box-shadow: 0 0 0 0 #fe5252;
      box-shadow: 0 0 0 0 #fe5252; opacity: .5;
  }
}



#keira{
	font-size:14pt;
	font-family: 'Space Mono', monospace;
	color:#ff2d44;
	border-radius: 200px;
	height: 200px;
	width: 200px;
	position:absolute;
	left:42%;
	top:40%;
	opacity: 0;
}

#keira:hover{
	font-size:20pt;
	font-family: 'Space Mono', monospace;
	color:#ff2d44;
	border-radius: 200px;
	height: 200px;
	width: 200px;
	position:absolute;
	left:42%;
	top:40%;
	opacity: 1;
}


/*---------------------------
			page15
---------------------------*/


#page-15{
	background-color: black;
}


/*---------------------------
			page16
---------------------------*/





/*---------------------------
			page17
---------------------------*/

#page-17{
	animation-name: relief;
	animation-duration: 1.3s;
	background-color: #4f72a3;

}

@keyframes relief{
	0%{ background-color:black }
	100%{background-color:#4f72a3 }


}

/*---------------------------
			page18
---------------------------*/
#church{width:40%

}

#live_div{
	width:25%;
	height:50%;
	position: absolute;
	right:10%;
	top:15%;
	font-size:50pt;
	font-family: 'Space Mono', monospace;
	color:#ff2d44;
	text-align: justify;

}


/*---------------------------
			page19
---------------------------*/


#monopoly{
	width:100%;
	height:auto;
	
	animation:rotate 2s infinite;
	
	

}

@keyframes rotate{
	0%{transform:rotate(0deg);}

	25%{transform:rotate(90deg);}
	50%{transform:rotate(180deg);}
	75%{transform:rotate(270deg);}
	100%{transform:rotate(360deg);}
}

/*---------------------------
			page20
---------------------------*/

#page-20{
	background-color: white;
}

 video #copy{
	width:100%
	height:100vh;
}




/*---------------------------
			page21
---------------------------*/

#stickers_again{
	width:26%;
	height:auto;
	position:absolute;
	transform: rotate(10deg);
	left:13%;
	top:7%;

}

#jessica{
	width:50%;
	position:absolute;
	left:25%;
	top:-7%;

}

#sticker_fiend{
	font-size:35pt;
	font-family: 'Space Mono', monospace;
	color:#f800a3;
	position: absolute;
	left:30%;
	top:65%;
	transform:rotate(-15deg);
	text-shadow: 4px 3px 4px #140270;
}

#page-21{
	background-color: white;
}



/*---------------------------
			page23
---------------------------*/

#rupaul{
	width:100%;
	height:auto;
}

#white{
	background-color: black;
	width:100%;
	height:100%;
}


/*---------------------------
			page24
---------------------------*/

#lying{
	width:50%;
	transform:rotate(90deg);
	animation:badish .5s infinite;
	border: solid black 8px;

}

@keyframes badish{
	0%{border: solid black 8px;}
	50%{border: solid red 8px;}
}

#page-24{
	background-color: red;
	animation:bad .5s infinite;
}


@keyframes bad{
	0%{background-color: red}
	50%{background-color: black}
}