/*** CSS Styles  ***/

@font-face {
	font-family: typo;
	src: url(./typo/BaksoSapi.otf);
}

/* Général  */
body {
	background-color: white;
	width: 100%;
	height: 100vh;
	padding: 0;
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* zone jeu */

.zone-jeu {
	position: absolute;
	width: 1400px;
	height: 700px;
	border: solid 5px black;
}

.lieu-un{
	display: none;
	width: 100%;
	height: 100%;
	background-image: url(images/fond.png);
	background-size: cover;
	background-position: center;
}

.titre{
	position: absolute;
	display: flex;
	transition:0.5s;
	left: 430px;
    top: 124px;
	height: 450px;
}

.titre:hover{
	transform: scale(1.1);
	transition: 0.8s;
}

.jouer {
	position: absolute;
	display: flex;
	transition: 0.3s;
	cursor: pointer;
	left: 540px;
    top: 509px;
	height: 150px;
}

.jouer:hover{
	transform: scale(1.1);
	transition: 0.3s;

}


/* Musique */
#button {
	position:absolute;
	transition:0.3s;
	cursor: pointer;
	top:20px;
	left:20px;
	height:8px;
}

#button:hover {
	transform: scale(1.1);
	transition:0.3s;
}

/* Mise en page  */
.musique {
	left: 2%;
	top:2%;
	display: flex;
	flex-direction:column;
    
    position: absolute;
   
}

/* Accueil */

.accueil {
	display: block;
    width: 100%;
    height: 100%;
    background-image: url(images/moutonetloup.PNG);
    background-size: cover;
    background-position: center;
}

/* Personnages */

.loup {
	position: absolute;
	bottom: 100px;
	left:-190px;
	

}
.loup img {
	width:270px;
	
}
.grosbuisson {
	position: absolute;
	bottom: -5px;
	left:490px;


}
.grosbuisson img {
	width:670px;
	
}

.mouton {
	position: absolute;
	bottom: 100px;
	left: 1000px;

}

.mouton img {
	width: 270px;

}

.inventaire {
	position: absolute;
    bottom: 350px;
	right: 20px;

}

.inventaire img {
	width: 190px;
	

}

.chataigne {
	position: absolute;
	cursor: pointer;
    bottom: 12px;
    left: 856px;

}

.chataigne img {
	width: 40px;
}

.item-chataigne{
	position: absolute;
	display: none;
	bottom: 500px;
	right: 90px;

}
.item-chataigne img{
	width:50px;

}

.banane {
	position: absolute;
	cursor: pointer;
	bottom: 60px;
    right:1055px;
	z-index: 2;
}

.banane img {
	width: 70px;
	

}
.item-banane {
	position: absolute;
	display: none;
	bottom: 440px;
	right: 90px;

}

.item-banane img {
	width: 70px;
	

}
.buche {
	position: absolute;
	cursor: pointer;
	bottom: 10px;
	right: 560px;

}

.buche img {
	width: 100px;
	

}

.item-buche {
	position: absolute;
	display: none;
	bottom: 560px;
	right: 90px;
}
.item-buche img{
	width:70px;
}

.buisson {
	position: absolute;
    bottom: -9px;
	right: 570px;

}

.buisson img {
	width: 400px;

}
.toufherbe {
	position: absolute;
    bottom: -9px;
	right: 900px;

}

.toufherbe img {
	width: 200px;

}
.fleurs {
	position: absolute;
	cursor: pointer;
    bottom: -9px;
	right: 1100px;

}

.fleurs img {
	width: 100px;

}
.buches {
	position: absolute;
    bottom: -9px;
	right: 650px;

}

.buches img {
	width: 200px;

}
.fleurjaune {
	position: absolute;
    bottom: -13px;
	right: 200px;

}

.fleurjaune img {
	width: 200px;

}
.buche2 {
	position: absolute;
	cursor: pointer;
	bottom: 10px;
	right: 600px;

}

.buche2 img {
	width: 100px;

}
.texte {
	font-family: typo;
	position: absolute;
	color: brown;
	top: 254px;
    left: 440px;

}
.boutongo{
    font-family: typo;
	position: absolute;
	cursor: pointer;
	color: brown;
	top: 350px;
    left: 900px;
	transition:0.3s;
	

}

.boutongo:hover{
	transform: scale(1.1);
	transition: 0.3s;

}

/* Temps */

.time_wrap {
    background-repeat: no-repeat;
    position: absolute;
	visibility: hidden;
    z-index: 12;
	left: 500px;
    bottom: 529px;
   
}
.temps {
    position: absolute;
    visibility: hidden;
    background-color: #810606;
    height: 20px;
    width: 200px;
    left: 50px;
    bottom: 70px;
    transition-duration: 5s;
    transition-timing-function: linear;
    border-radius: 15px;
    z-index: 13;
}
.time_wrap img {
	width: 400px;
}

/* Echec */
.echec {
position:absolute;
	display:none;
	bottom:99px;
    right: 430px;
	
}
.perdu img {
width: 600px;

}

.recommencer {
	position:absolute;
	cursor: pointer;
	bottom:10px;
    right: 90px;
	transition:0.3s;
	
	}

	.recommencer:hover{
		transform: scale(1.1);
		transition: 0.3s;
	
	}


	.recommencer img {
		width: 150px;
		}

.reussite {
	position:absolute;
	display:none;
	bottom:99px;
	right: 430px;			
	}

	.reussite img {
		width: 600px;
		}

.recommencer-gagner {
	position:absolute;
	cursor: pointer;
	display: none;
	bottom:90px;
	right: 450px;	
	transition:0.3s;	
	}

	


	.recommencer-gagner:hover{
		transform: scale(1.1);
		transition: 0.3s;
	
	}
		
.recommencer-gagner img {
	width: 150px;
	}