* {overflow: hidden;}

.overwrapper {
	width: 100%;
	height: 100%;
}
/*--------------------------------
        page one
--------------------------------*/

.overlapper video {
	position: absolute;
	left: 20%;
	top: 15%;
	max-width: 60%;
	filter: hue-rotate(230deg) brightness(120%) drop-shadow(10px 10px black) drop-shadow(10px 10px lightpink);
	border-radius: 20px;
}

#one {
	background-color: #b4ede7;
}

#circle {
	position: absolute;
	top: 84%;
	left: 90%;
	background-color: white;
	height: 100px;
	width: 100px;
	border-radius:50%;
}

/*--------------------------------
        page two
--------------------------------*/
#page2 {
	background-color: black;
}
#image {
	width: 60%;
	position: absolute;
	animation-name: aleks;
	left: 20%;
	top: 15%;
	border-radius: 20px;
	animation-duration: 2s;
	filter: brightness(60%) drop-shadow(10px 10px black) drop-shadow(10px 10px brown) ;
	

}

/*@keyframes aleks {
	0% {width: 0%;}
	25% {width: 25% ease-in-out;}
	50% {width: 50% ease-in-out;}
	75% {width: 75% ease-in-out;}
	100% {width: 150% ease-in-out;}
}
*/
#twotext {
	animation-name: font;
	animation-duration: 2s;
	font-size: 30px;
	position: fixed;
	top: 78%;
	left: 40%;
	color:white;
	font-family: 'Roboto', sans-serif;
	opacity: .8;
	filter: drop-shadow(3px 3.5px black);
}

@keyframes font {
	0% {font-size: 0;}
	25% {font-size: 10px ease-in-out;}
	50% {font-size: 20px ease-in-out;}
	75% {font-size: 30px ease-in-out;}
	100% {font-size: 50px ease-in-out;}

}

#tear {
	width: 1%;
	position: absolute;
	left: 40%;
	top: 50%;
	animation-name: tear;
	animation-duration: 4s;
	}

@keyframes tear {
0% {width: 0}
25% {width: 0}
50% {width: 0}
75% {top:55% ease-in-out;}
100% {top:60% ease-in-out;}
}

/*--------------------------------
        page three
--------------------------------*/
#page3 {
	background-color: black;
}


#drop {
	position: absolute;
	left: 18%;
	top: 10%;
	border-radius: 20px;

}

#fuck1 {
	border-bottom-right-radius: 20px;
	border-top-right-radius: 20px;
}

#drop img {
	width: 40%;
	float: left;
	filter: hue-rotate(180deg);

}

#mirror {
	width: 220px;
	height: 220px;
	border-radius: 50%;
	background-color: white;
	position: absolute;
	top: 18.5%;
	left: 54.5%;
	opacity: .3;
	border: 3px solid black;
}

/*--------------------------------
        page four
--------------------------------*/
#pasta {
	position: absolute;
	width: 35%;
	opacity: 1.0;
	top: 10%;
	left: 30%;
	animation-name: pasta;
	animation-duration: 5s;
	border-radius: 20px;
	filter: drop-shadow(10px 10px white) drop-shadow(10px 10px red)

}



#page4 {
	background-color: black;
}

#circle4 {
	position: absolute;
	top: 84%;
	left: 90%;
	background-color: white;
	height: 100px;
	width: 100px;
	border-radius:50%;
}

#page4 div p {
	color: white;
	font-family: 'Roboto', sans-serif;
	opacity: .4;
	font-size: 30px;
	position: absolute;
	left: 29%;
	top: 60%;
}

/*--------------------------------
        page five
--------------------------------*/
	
#pasta1 {
	position: absolute;
	width: 55%;
	opacity: 1.0;
	top: 20%;
	left: 20%;
	animation-name: pasta;
	animation-duration: 5s;
	border-radius: 20px;
	filter: brightness(120%) drop-shadow(10px 10px pink) drop-shadow(10px 10px yellow);

}

#page5 {
	background-color: black;
}

#page5 div p {
	color: white;
	font-family: 'Roboto', sans-serif;
	font-size: 30px;
	position: absolute;
	left: 21%;
	top: 50%;
}

#circle5 {
	position: absolute;
	top: 84%;
	left: 90%;
	background-color: white;
	height: 100px;
	width: 100px;
	border-radius:50%;

}

/*--------------------------------
        page six
--------------------------------*/
	
#cafe {
	position: absolute;
	width: 55%;
	opacity: 1.0;
	top: 15%;
	left: 20%;
	animation-name: pasta;
	animation-duration: 5s;
	border-radius: 20px;
	filter: saturate(120%) brightness(130%) drop-shadow(10px 10px black) drop-shadow(10px 10px pink)drop-shadow(10px 10px yellow);

}

#page6 {
	background-color: #b4ede7;
}

#page5 div p {
	color: white;
	font-family: 'Roboto', sans-serif;
	font-size: 30px;
	position: absolute;
	left: 21%;
	top: 50%;
}

#circle6 {
	position: absolute;
	top: 34%;
	left: 40%;
	opacity: .4;
	background-color: white;
	height: 200px;
	width: 200px;
	border-radius:50%;
}


/*--------------------------------
        page seven
--------------------------------*/
	
#run {
	position: absolute;
	width: 55%;
	opacity: 1.0;
	top: 20%;
	left: 20%;
	animation-name: pasta;
	animation-duration: 5s;
	border-radius: 20px;
	filter: hue-rotate(90deg) brightness(130%) drop-shadow(10px 10px pink) drop-shadow(10px 10px yellow) drop-shadow(10px 10px green) ;

}

#page7 {
	background-color: #a7dff9;
}

#page5 div p {
	color: white;
	font-family: 'Roboto', sans-serif;
	font-size: 30px;
	position: absolute;
	left: 21%;
	top: 50%;
}

#circle7 {
	position: absolute;
	top: 84%;
	left: 90%;
	background-color: white;
	height: 100px;
	width: 100px;
	border-radius:50%;
}

/*--------------------------------
        page eight
--------------------------------*/
	
#frank {
	position: absolute;
	width: 55%;
	opacity: 1.0;
	top: 15%;
	left: 20%;
	animation-name: pasta;
	animation-duration: 5s;
	border-radius: 20px;
	filter: hue-rotate(90deg) brightness(130%) drop-shadow(10px 10px pink) drop-shadow(10px 10px yellow) drop-shadow(10px 10px green) ;

}

#frank1 {
	position: absolute;
	width: 40%;
	opacity: 1.0;
	top: 17%;
	left: 25%;
	opacity: .3;
	
	animation-name: pasta;
	animation-duration: 5s;
	border-radius: 20px;
}

#page8 {
	background-color: black;
}

#page8 div p {
	color: white;
	font-family: 'Roboto', sans-serif;
	font-size: 30px;
	position: absolute;
	left: 21%;
	top: 50%;
	transform: rotate(-10deg);
}

#circle8 {
	position: absolute;
	top: 84%;
	left: 90%;
	background-color: white;
	height: 100px;
	width: 100px;
	border-radius:50%;
}

/*--------------------------------
        page nine
--------------------------------*/
	
#book {
	position: absolute;
	width: 50%;
	opacity: 1.0;
	top: 13%;
	left: 25%;
	animation-name: pasta;
	animation-duration: 5s;
	border-radius: 20px;
	filter: drop-shadow(10px 10px pink) drop-shadow(10px 10px yellow) drop-shadow(10px 10px black) ;

}


#page9 {
	background-color: #b4ede7;
}

#page9 div p {
	color: white;
	font-family: 'Roboto', sans-serif;
	font-size: 30px;
	position: absolute;
	left: 27%;
	top: 11.5%;
	
}

#circle9 {
	position: absolute;
	top: 84%;
	left: 90%;
	background-color: white;
	height: 100px;
	width: 100px;
	border-radius:50%;
}

/*--------------------------------
        page ten
--------------------------------*/
	
#lake {
	position: absolute;
	width: 60%;
	opacity: 1.0;
	top: 18%;
	left: 20%;
	animation-name: pasta;
	animation-duration: 5s;
	border-radius: 20px;
	filter: hue-rotate(90deg) drop-shadow(10px 10px pink) drop-shadow(10px 10px orange) drop-shadow(10px 10px yellow) ;

}


#page10 {
	background-color: #dfffdd;
}

#page9 div p {
	color: white;
	font-family: 'Roboto', sans-serif;
	font-size: 30px;
	position: absolute;
	left: 27%;
	top: 11.5%;
	
}

#circle10 {
	position: absolute;
	top: 33%;
	left: 42%;
	opacity: .4;
	background-color: white;
	height: 200px;
	width: 200px;
	border-radius:50%;
}

/*--------------------------------
        page eleven
--------------------------------*/
	
#bath {
	position: absolute;
	width: 40%;
	opacity: 1.0;
	top: 15%;
	left: 28%;
	animation-name: pasta;
	animation-duration: 5s;
	border-radius: 20px;
	filter: brightness(120%) drop-shadow(10px 10px purple) drop-shadow(10px 10px white) drop-shadow(10px 10px lightpink) ;

}


#page11 {
	background-color: #b4ede7;
}

#page9 div p {
	color: white;
	font-family: 'Roboto', sans-serif;
	font-size: 30px;
	position: absolute;
	left: 27%;
	top: 11.5%;
	
}

#circle11 {
	position: absolute;
	top: 84%;
	left: 90%;
	background-color: white;
	height: 100px;
	width: 100px;
	border-radius:50%;
}


/*--------------------------------
        page twelve
--------------------------------*/
	
#blanket {
	position: absolute;
	width: 30%;
	opacity: 1.0;
	top: 15%;
	left: 34%;
	animation-name: pasta;
	animation-duration: 5s;
	border-radius: 20px;
	filter: brightness(80%) drop-shadow(10px 10px yellow) drop-shadow(10px 10px white) drop-shadow(10px 10px lightpink) ;

}


#page12 {
	background-color: #b4ede7;
}

#page12 div p {
	color: white;
	font-family: 'Roboto', sans-serif;
	font-size: 30px;
	position: absolute;
	left: 38%;
	top: 13.7%;
	
}

#circle12 {
	position: absolute;
	top: 84%;
	left: 90%;
	background-color: white;
	height: 100px;
	width: 100px;
	border-radius:50%;
}

/*--------------------------------
        page thirteen
--------------------------------*/
	
#paige {
	position: absolute;
	width: 25%;
	opacity: 1.0;
	top: 12%;
	left: 34%;
	animation-name: pasta;
	animation-duration: 5s;
	border-radius: 20px;
	filter: brightness(80%) drop-shadow(10px 10px yellow) drop-shadow(10px 10px white) drop-shadow(10px 10px lightpink) ;

}


#page13 {
	background-color: #b4ede7;
}

#page13 div p {
	color: white;
	font-family: 'Roboto', sans-serif;
	font-size: 30px;
	position: absolute;
	left: 35%;
	top: 11%;
	
}

#circle13 {
	position: absolute;
	top: 84%;
	left: 90%;
	background-color: white;
	height: 100px;
	width: 100px;
	border-radius:50%;
}
/*--------------------------------
        page 14
--------------------------------*/
	
#alley {
	position: absolute;
	width: 32%;
	opacity: 1.0;
	top: 12%;
	left: 34%;
	animation-name: pasta;
	animation-duration: 5s;
	border-radius: 20px;
	filter: brightness(80%) drop-shadow(10px 10px yellow) drop-shadow(10px 10px white) drop-shadow(10px 10px lightpink) ;

}


#page14 {
	background-color: #b4ede7;
}

#page13 div p {
	color: white;
	font-family: 'Roboto', sans-serif;
	font-size: 30px;
	position: absolute;
	left: 35%;
	top: 11%;
	
}

#circle14 {
	position: absolute;
	top: 84%;
	left: 90%;
	background-color: white;
	height: 100px;
	width: 100px;
	border-radius:50%;
}

/*--------------------------------
        page 15
--------------------------------*/
	
#soup {
	position: absolute;
	width: 32%;
	opacity: 1.0;
	top: 12%;
	left: 34%;
	animation-name: pasta;
	animation-duration: 5s;
	border-radius: 20px;
	filter: brightness(100%) drop-shadow(10px 10px yellow) drop-shadow(10px 10px white) drop-shadow(10px 10px lightgreen) ;

}


#page15 {
	background-color: #dfffdd;
}

#page15 div p {
	color: white;
	font-family: 'Roboto', sans-serif;
	font-size: 30px;
	position: absolute;
	left: 36%;
	top: 11.5%;
	
}

#circle15 {
	position: absolute;
	top: 84%;
	left: 90%;
	background-color: white;
	height: 100px;
	width: 100px;
	border-radius:50%;
}

/*--------------------------------
        page 16
--------------------------------*/
	
#soup1 {
	position: absolute;
	width: 40%;
	opacity: 1.0;
	top: 14%;
	left: 29%;
	animation-name: pasta;
	animation-duration: 5s;
	border-radius: 20px;
	filter: brightness(90%) drop-shadow(10px 10px yellow) drop-shadow(10px 10px pink) drop-shadow(10px 10px lightgreen) ;

}


#page16 {
	background-color: #dfffdd;
}

#page16 div p {
	color: white;
	font-family: 'Roboto', sans-serif;
	font-size: 30px;
	position: absolute;
	left: 33%;
	top: 13%;
	
}

#circle16 {
	position: absolute;
	top: 84%;
	left: 90%;
	background-color: white;
	height: 100px;
	width: 100px;
	border-radius:50%;
}

/*--------------------------------
        page 17
--------------------------------*/



#page17 {
	background-color: black;
}


#drop1 {
	position: absolute;
	left: 14%;
	top: 20%;
	border-radius: 20px;

}

#fuck2 {
	border-bottom-right-radius: 20px;
	border-top-right-radius: 20px;
}

#drop1 img {
	height: 400px;
	float: left;
	filter: hue-rotate(180deg);

}

#mirror1{
	width: 220px;
	height: 220px;
	border-radius: 50%;
	background-color: white;
	position: absolute;
	top: 28%;
	left: 54.5%;
	opacity: .3;
	border: 3px solid black;
}

/*--------------------------------
        page 18
--------------------------------*/
	
#beauty {
	position: absolute;
	width: 40%;
	opacity: 1.0;
	top: 13%;
	left: 29%;
	animation-name: pasta;
	animation-duration: 5s;
	border-radius: 20px;
	filter: brightness(90%) drop-shadow(10px 10px yellow) drop-shadow(10px 10px pink) drop-shadow(10px 10px lightgreen) ;

}


#page18 {
	background-color: #dfffdd;
}

#page18 div p {
	color: white;
	font-family: 'Roboto', sans-serif;
	font-size: 30px;
	position: absolute;
	left: 33%;
	top: 13%;
	
}

#circle18 {
	position: absolute;
	top: 84%;
	left: 90%;
	background-color: white;
	height: 100px;
	width: 100px;
	border-radius:50%;
}

#teardrop {
	width: 1%;
	position: absolute;
	left: 40%;
	top: 40%;
	animation-name: teardrop;
	animation-duration: 3s;
	}

@keyframes teardrop {
0% {width: 0}
25% {width: 0}
50% {width: 0}
75% {top:55% ease-in-out;}
100% {top:60% ease-in-out;}
}

/*--------------------------------
        page 19
--------------------------------*/
	
#max {
	position: absolute;
	width: 30%;
	opacity: 1.0;
	top: 13%;
	left: 33%;
	animation-name: pasta;
	animation-duration: 5s;
	border-radius: 20px;
	filter: brightness(90%) drop-shadow(10px 10px yellow) drop-shadow(10px 10px pink) drop-shadow(10px 10px lightgreen) ;

}


#page19 {
	background-color: #dfffdd;
}

#page19 div p {
	color: white;
	font-family: 'Roboto', sans-serif;
	font-size: 30px;
	position: absolute;
	left: 38%;
	top: 13%;
	
}

#circle19 {
	position: absolute;
	top: 84%;
	left: 90%;
	background-color: white;
	height: 100px;
	width: 100px;
	border-radius:50%;
}

/*--------------------------------
        page 20
--------------------------------*/
	
#bath2 {
	position: absolute;
	width: 35%;
	opacity: 1.0;
	top: 13%;
	left: 30%;
	animation-name: pasta;
	animation-duration: 5s;
	border-radius: 20px;
	filter: brightness(90%) drop-shadow(10px 10px yellow) drop-shadow(10px 10px pink) drop-shadow(10px 10px lightgreen) ;

}


#page20 {
	background-color: #dfffdd;
}

#page20 div p {
	color: white;
	font-family: 'Roboto', sans-serif;
	font-size: 30px;
	position: absolute;
	left: 30%;
	top: 12%;
	
}

#circle20 {
	position: absolute;
	top: 84%;
	left: 90%;
	background-color: white;
	height: 100px;
	width: 100px;
	border-radius:50%;
}

/*--------------------------------
        page 21
--------------------------------*/
	
#bath3 {
	position: absolute;
	width: 26%;
	opacity: 1.0;
	top: 9%;
	left: 35%;
	animation-name: pasta;
	animation-duration: 5s;
	border-radius: 20px;
	filter: brightness(90%) drop-shadow(10px 10px yellow) drop-shadow(10px 10px pink) drop-shadow(10px 10px lightgreen) ;

}


#page21 {
	background-color: #dfffdd;
}

#page21 div p {
	color: white;
	font-family: 'Roboto', sans-serif;
	font-size: 30px;
	position: absolute;
	left: 30%;
	top: 12%;
	
}

#circle21 {
	position: absolute;
	top: 84%;
	left: 90%;
	background-color: white;
	height: 100px;
	width: 100px;
	border-radius:50%;
}

/*--------------------------------
        page 22
--------------------------------*/
	
#journal {
	position: absolute;
	width: 32%;
	opacity: 1.0;
	top: 11%;
	left: 33%;
	animation-name: pasta;
	animation-duration: 5s;
	border-radius: 20px;
	filter: brightness(90%) drop-shadow(10px 10px yellow) drop-shadow(10px 10px pink) drop-shadow(10px 10px lightgreen) ;

}


#page22 {
	background-color: #dfffdd;
}

#page22 div p {
	color: white;
	font-family: 'Roboto', sans-serif;
	font-size: 30px;
	position: absolute;
	left: 30%;
	top: 12%;
	
}

#circle22 {
	position: absolute;
	top: 84%;
	left: 90%;
	background-color: white;
	height: 100px;
	width: 100px;
	border-radius:50%;
}