/* CSS Document */

@import url('https://fonts.googleapis.com/css?family=Fredoka+One|Quattrocento+Sans');


h1,h2,h3{
	font-family: 'Fredoka One', cursive;
}
p,li{
	font-family: 'Quattrocento Sans', sans-serif;
}
h1{
	font-size: 4em;
}
p{
	font-size: 1.8em;
	text-align: center;
}

.lost p{
	text-align: center;
	
}
.page{
	position:absolute;
	right: 0%;
	width: 100px;
}
.wrong{
	position: absolute;
	right: 100px;
	width: 100px;
}
h1{
	text-align: center;
}
.home{
	background-image: url(../images/home.png);
	background-repeat: no-repeat;
	
}

.rules{
	background-color: white;
	border: solid black 10px;
	width: 15%;
	
	position: absolute;
	left: 0;
	top:0;
	transition: 1s;
}

.rules h2{
	color: black;
	transition: 1s;
}
.rules h2:hover{
	color: tomato;
	transition: 1s;
}

.rules:hover{
	
	background-color: antiquewhite;
	transition: 1s;
}
.rules img{
	width: 60%;
	padding: 0 20%;
	transition: 1s;
}
.rules img:hover{
	width: 80%;
	padding: 0 10%; 
}

ul{
	list-style: none;
	padding: 10px;
}
li{
	padding-bottom: 20px;
	font-size: 1.5em;
}

.rules h2{
	text-align: center;
	font-size: 3em;
}

.btn-hover, form input {
    width: 200px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    margin: 20px;
    height: 55px;
    text-align:center;
    border: none;
    background-size: 300% 100%;

    border-radius: 50px;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;

}
.color1, form input{
	background-image: linear-gradient(to right, #667eea, #764ba2, #6B8DD6, #8E37D7);
    box-shadow: 0 4px 15px 0 rgba(116, 79, 168, 0.75);
}
.color2{
	    background-image: linear-gradient(to right, #29323c, #485563, #2b5876, #4e4376);
    box-shadow: 0 4px 15px 0 rgba(45, 54, 65, 0.75);
}

.btn-hover:hover, form input:hover {
    background-position: 100% 0;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.btn-hover:focus , form input:focus{
    outline: none;
}


.var1{
	background-color: skyblue;
}
.var2{
	background-color: aliceblue;
}
.var3{
	background-color: #7BD7CA;
}
.var4{
	background-color: beige;
}
.var5{
	background-color: #E29D9F;
}
.var6{
	background-color: #5C8749;
}
.var7{
	background-color: #D28283;
}.var8{
	background-color: #FA6F71;
}
.illus{
	width: 80%;
	display: flex;
	margin: auto;
}
.illus button{
	margin-top: 100%
}
.illus img{
	width: 45%;
	height: 45%;
	transition: 1s;
}
.illus img:hover{
	width: 47%;
	height: 47%;
	transition: 1s;
}
#eye{
	position: absolute;
	right: 35%;
}

.waiting{
	position: absolute;
	animation: waiting 22s running;
}

@keyframes waiting{
	0%{
		transform:translateX(-800px);
}
	95%{
		transform: translateX(-800px);
	}
	100%{
		transform: translateX(20px);
	}}

#animegg{
	animation: eggo 4s infinite running;
margin: 0 40%;
}


@keyframes eggo{
	0%{
		transform: rotateX(20deg);
	}
	50%{
		transform: rotateX(-20deg);
	}
}



#fly{
	position: absolute;
	width: 5%;
	animation: mouche 4s infinite running;
	bottom: 20%;
	right: 30%;
}


@keyframes mouche{
	0%{
		transform: translate(0, 0);
	}
	10%{
		transform: translate( 50px, -200px);
	}
	30%{
		transform: translate( 100px ,-100px);
	}
	60%{
		transform: translate(-50px, -200px);
	}
	90%{
		transform: translate(-100px, -100px);
	}
}

#page1{
	background-image: url(../images/eyeBG.png);
	background-repeat: no-repeat;
	background-size: cover;
}
#page1 h1{
	color: aliceblue;
}
#bird{
	width: 40%;
}
#bird:hover{
	width: 45%;
}
.answer{
	display: flex;
	flex-wrap: wrap;
	width: 40%;
	padding: 50px 30%;
}
.answer button{
	margin: 20px 50px
}
#quiz p{
	text-align: center;
}
#quiz{
	background-image: url(../images/Quiz.png);
	background-size: cover;
}

#password h1{
	color: white;
}
#password{
	background-image: url(../images/password.png);
	background-size: cover;
	background-repeat: no-repeat;
}


#password p{
	position: absolute;
	top: 35%;
	left: 25%;
}
.break{
	background-image: url(../images/break.png);
	background-size: cover;
	background-repeat: no-repeat;
}
.break p{
	width: 80%;
	text-align: center;
	margin-left: 10%;
}
#miss{
	background-image: url(../images/void.png);
	background-size: cover;
	background-repeat: no-repeat;
}
#miss p, #miss h1{
	color: white;
}

.portals{
	width: 80%;
	display: flex;
	flex-wrap: wrap;
	margin: 0 10%;
}
.portals img{
	padding: 15px 30px;
}

#warpzone{
	background-color: black;
}
#warpzone h1, #warpzone p{
	color: white;
}
#waity{
	background-image: url("../images/wait.png");
	background-size: cover;
}

#me{
	position: absolute;
	left: 10%;
	bottom: 25%;
}
#fanny{
	position: absolute;
		left:70%;
	bottom: 30%;
}

#anime{
	position: absolute;
	bottom: 3%;
	left: 40%;
}
#end{
	background-image: url("../images/winnerIsYou.png");
	background-size: cover;
}