@charset "UTF-8";
@import url("webfonts/VCR/stylesheet.css");


/* CSS Document */

body {
    max-width: 100%;
height: auto;
    margin-left: auto;
    margin-right: auto;
    font-family: VCR;
    background-color: black;
    text-decoration: none;
    color: black;
}


h1 {
	
    color: #FFFFFF;
    font-size: 3vw;
    text-align: center;
    font-family: VCR;
}

h2 {
	padding-top:1%;
	padding-bottom:1%;
	padding-left:1%;
	color: blue;
	background-color:white;
	font-size:3vw;
	text-align: left;
}

p {
	font-size:2vw;
}


::-webkit-scrollbar {
  width: 20px;
}

::-webkit-scrollbar-track {
  background: black; 
}

::-webkit-scrollbar-thumb {
  background: black ; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: hotpink ; 
}



/* -------------*/
/* SPLASH */
/* -------------*/

.splash {
	margin: auto;
	float:none;
	display: block;
	padding-top:30%;
    width: 85%;
	height: 878px;
	background-image: url("images/splash.gif");
    background-size:100%;
	background-repeat: no-repeat;
	background-position:50% 2%;
}




.splash h1{
padding-top:100px;
}



.splash a{
text-align: center;
	color: white;
	text-decoration: none;
	font-size: 8vw;
}


.splash a:hover{
	color: hotpink;
	text-decoration: none;
}


/* -------------*/
/* START */
/* -------------*/


.start{
	margin: auto;
	float:none;
	display: block;
	padding-top:15%;
    width: 70%;
	height: 1400px;
	background-image: url("images/splash.gif");
    background-size:100%;
	background-repeat: no-repeat;
	background-position:50% 1%;
}


.start h1 {
	padding-top: 10%;
	height: 10px;
    color: #FFFFFF;
    font-size: 3vw;
    text-align: center;
    text-decoration: none;
    text-decoration-line: none;
}


.start p {
	padding-top: 3%;
	padding-bottom: 5%;
	height: 10px;
    color: #FFFFFF;
    font-size: 1.4vw;
    text-align: center;
    text-decoration: none;
    text-decoration-line: none;
}


.start button {
font-size: 3vw;
}


/* -------------*/
/* PAGE */
/* -------------*/

.page {
	text-align: center;
	margin: auto;
	float:none;
	display: block;
	padding-top:0%;
    width: 65%;
	height: auto;
    background-size:95%;
	background-position: center;
	background-repeat: no-repeat;
}

.anger1 {
			padding-top: 45%;
		background-size: 85%;
		background-position: 50% 10%;
	background-repeat: no-repeat;
	background-image: url("images/angry1.gif");

}



.anger2 {
			padding-top: 45%;
		background-size: 85%;
	background-repeat: no-repeat;
	background-image: url("images/angry2.gif");
	background-position: 50% 10%;
}


.badSuprise {
		padding-top: 45%;
		background-size: 85%;
	background-repeat: no-repeat;
	background-image: url("images/bad-surprise.gif");
	background-position: 50% 10%;
}

.sad1 {
	padding-top: 45%;
	background-repeat: no-repeat;
	background-size: 85%;
	background-image: url("images/sad1.gif");
	background-position: 50% 10%;



}

.sad2 {
	padding-top: 45%;
	background-repeat: no-repeat;
	background-size: 85%;
	background-image: url("images/sad2.gif");
	background-position: center;

}

.sad3 {
	padding-top: 45%;
	background-repeat: no-repeat;
	background-size: 85%;
	background-image: url("images/sad3.gif");
	background-position: 50% 10%;

}

.sad4 {
	padding-top: 45%;
	background-repeat: no-repeat;
	background-size: 85%;
	background-image: url("images/sad4.gif");
	background-position: 50% 10%;

}

.sad5 {
	padding-top: 45%;
	background-size: 85%;
	background-repeat: no-repeat;
	background-image: url("images/sad5.gif");
	background-position: 50% 10%;

}

.cry {
	padding-top: 45%;
	background-size: 85%;
	background-repeat: no-repeat;
	background-image: url("images/cry.gif");
	background-position: 50% 10%;

}

.peaceful {
		padding-top: 45%;
	background-size: 85%;
		background-repeat: no-repeat;
	background-image: url("images/peaceful.gif");
	background-position: 50% 10%;

}


.bw {
	margin: auto;
	float:none;
	display: block;
	padding-top:10%;
    width: 80%;
	height: 1400px;
	background-image: url("images/bw.png");
    background-size:100%;
	background-repeat: no-repeat;
	background-position:50% 1%;

}

.happy1 {
		padding-top: 45%;
	background-size: 85%;
	background-repeat: no-repeat;
	background-image: url("images/happy1.gif");
	background-position: 50% 10%;
}

.happy2 {
			padding-top: 45%;
	background-size: 85%;
	background-repeat: no-repeat;
	background-image: url("images/happy2.gif");
	background-position: 50% 10%;

}

.page h1 {
    padding-top: 0%;
	display: block;
	height: auto;
    color: #FFFFFF;
    font-size: 3vw;
    text-align: center;
    font-family: VCR;
    text-decoration: none;
    text-decoration-line: none;
    text-emphasis-color: aliceblue;
    text-decoration-color: blue;
}


.page p {
	padding-top: 0%;
    color: #FFFFFF;
    font-size: 1.6vw;
    text-align: center;
    font-family: VCR;
    text-decoration: none;
    text-decoration-line: none;
}


.page a {
text-decoration: none;
}

.page a:hover {
text-decoration: underline;
color: hotpink;
}


/* -------------*/
/* CHOICES */
/* -------------*/


.choicelist p {
	font-size: 2vw;
	color: darkseagreen;
	line-height: 1.5;
}


.choice p {
	color: yellow;
	font-size: 1.8vw;
}

/* -------------*/
/* END */
/* -------------*/

.end {
	margin: auto;
	float:none;
	display: block;
	padding-top:8%;
    width: 50%;
	height: 800px;
	background-image: url("images/test-2.gif");
    background-size:100%;
}

.end h1 {
	padding-top:15%;
    color: #FFFFFF;
    font-size: 9vw;
    text-align: center;
    font-family: VCR;
	text-decoration:none;
    text-decoration-line:none;
    text-emphasis-color: aliceblue;
    text-decoration-color: blue;
}

/* BUTTONS */


.Buttons{
    color: #FFFFFF;
    text-align: center;
    padding-left: auto;
    padding-right: auto;
	padding-bottom: 10%;
}

.Buttons button{
	font-size: 1.4vw;
    font-family: VCR;
    font-weight: bold;
	color: black;
	display: block;
    margin: 1% 1%;
    padding: 1% 2%;
	margin-left: auto;
    margin-right: auto;
}

.Buttons button:hover {
    color: hotpink;
	outline: auto;
	outline-style:dotted;
	outline-color: hotpink;
}