/*** CSS Styles  ***/

/* 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 */

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

/* Lieu-deux */

.lieu-deux {
	width: 100%;
	height: 100%;
	background-image: url(images/classe.png);
	background-position: center;
	display: none;
}

/* Lieu-trois */

.lieu-trois {
	width: 100%;
	height: 100%;
	background-image: url(images/couloir.png);
	background-position: center;
	display: none;
}

/* Lieu-quatre */

.lieu-quatre {
	width: 100%;
	height: 100%;
	background-image: url(images/porte.png);
	background-position: center;
	display: none;
}

/* Titre */

.titre {
	position: absolute;
	display: flex;
	left: 60%;
	top: 5%;
	transition:0.8s;
	cursor: pointer;
}

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

/* Start */

.start {
	font-size: 40px;
	position: absolute;
	color:white;
	bottom: 325px;
	right: 70px;
	font-family: 'Dudu Calligraphy', sans-serif;
	transition:0.3s;
	cursor: pointer;
}

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

/* Musique */

#button {
	
	transition:0.3s;
	cursor: pointer;
}

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

/* Mise en page  */

.layout-flex {
	left: 2%;
	top:2%;
	display: flex;
	flex-direction:column;
    position: absolute;
}

/* Flèches  */

.zone-fleche-droite {
	position: absolute;
	right:0px;
	top: 600px;
	cursor: pointer;
	transition:0.3s;
}

.zone-fleche-droite:hover{
	
	transform: scale(1.1);
	transition:0.3s;
}

.zone-fleche-gauche {
	position: absolute;
	left:0px;
	top: 600px;
	cursor: pointer;
	transition:0.3s;
}

.zone-fleche-gauche:hover {
	transform: scale(1.1);
	transition:0.3s;
}

.zone-fleche-droite-copie {
	position: absolute;
	right:0px;
	top: 600px;
	cursor: pointer;
	transition:0.3s;
}
	
.zone-fleche-droite-copie:hover {
	transform: scale(1.1);
	transition:0.3s;
}

.zone-fleche-gauche-copie {
	position: absolute;
	left:0px;
	top: 600px;
	cursor: pointer;
	transition:0.3s;
}
	
.zone-fleche-gauche-copie:hover {
	transform: scale(1.1);
	transition:0.3s;
}

/* Objet trousseau de clé  */

.trousseau {
    position: absolute;
	bottom: 50px;
	right: 300px;
	cursor: pointer;
	transition:0.3s;
}

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

/* Dialogue  */


.text {
    font-size: 23px;
	position: absolute;
	color:white;
	bottom: 350px;
	left: 400px;
	font-family: 'Dudu Calligraphy', sans-serif;
}

/* Bouton pour passer les dialogues  */
		
.suite {
	position: absolute;
	cursor: pointer;
	bottom: 280px;
	right: 200px;
	transition:0.7s;
}

.suite:hover {
	transform: scale(1.1);
	transition:0.7s;
}

/* Bouton pour afficher le lieu-un  */
		
.go {
	position: absolute;
	cursor: pointer;
	bottom: 280px;
	right: 200px;
	display: none;
	transition:0.7s;
}

.go:hover {
	transform: scale(1.1);
	transition:0.7s;
}

/* Bouton pour afficher un indice */

.indice {
	position: absolute;
	cursor: pointer;
	bottom: 35px;
	right: 340px;
	transition:0.7s;
	display: none;
}

.indice:hover {
	transform: scale(1.1);
	transition:0.7s;
}

.indice2 {
	position: absolute;
	cursor: pointer;
	bottom: 35px;
	right: 340px;
	transition:0.7s;
	display: none;
}

.indice2:hover {
	transform: scale(1.1);
	transition:0.7s;
		   
}

.textindice {
	font-size: 10px;
	position: absolute;
	color:white;
	bottom: 50px;
	right: 210px;
	font-family: 'Dudu Calligraphy', sans-serif;
	display: none;
}

/* Fond du dialogue */

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

/* Objet porte hall */

.objet-porte {
    position: absolute;
	transition:0.5s;
	top: 155px;
	left: 790px;
	cursor: pointer;
}

.objet-porte:hover {
    transform: scale(1.1);
	transition:0.5s;
}

/* Inventaire  */

.cle1 {
    position: absolute;
	transition:0.5s;
	top: 20px;
	right: 100px;
	display: none;
	cursor: pointer;
}

.cle1:hover {
    transform: scale(1.1);
	transition:0.5s;
}

.cle2 {
    position: absolute;
	transition:0.5s;
	top: 20px;
	right: 200px;
	display: none;
	cursor: pointer;
}

.cle2:hover {
    transform: scale(1.1);
	transition:0.5s;
}

.cle3 {
    position: absolute;
	transition:0.5s;
	top: 20px;
	right: 300px;
	display: none;
	cursor: pointer;
}

.cle3:hover {
    transform: scale(1.1);
	transition:0.5s;
}

.cle4 {
    position: absolute;
	transition:0.5s;
	top: 20px;
	right: 400px;
	display: none;
	cursor: pointer;
}

.cle4:hover {
    transform: scale(1.1);
	transition:0.5s;
}

/* Message de réussite  */

.reussite {
    width: 100%;
	height: 100%;
	display: none;
}

.win {
	font-size: 28px;
	position: absolute;
	color:white;
	bottom: 350px;
	left: 350px;
	font-family: 'Dudu Calligraphy', sans-serif;
	display: none;
}

/* Message temps écoulé  */

.tempsoff {
	font-size: 28px;
	position: absolute;
	color:white;
	bottom: 350px;
	left: 350px;
	font-family: 'Dudu Calligraphy', sans-serif;
	display: none;
}

/* Message d'echec  */
		
.lose {
	position: absolute;
	display: flex;
	top:48%;
	left: 20%;
	display: none;
}

/*Bouton recommencer*/ 

.recommencer {
	font-size: 30px;
	position: absolute;
	color:white;
	bottom: 200px;
	right: 200px;
	font-family: 'Dudu Calligraphy', sans-serif;
	display: none;
	cursor: pointer;
}

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

/*Hero*/ 

.persofille {
    position: absolute;
	display: flex;
	bottom: 4%;
	left: 34%;
	height: 150px;
	width: 110px;
	visibility: hidden;
}

/*Sécurité*/ 

.persogarcon {
    position: absolute;
	display: flex;
	bottom: 4%;
	right: 28%;
	height: 150px;
	width: 110px;
	visibility: hidden;
}

/*Time*/ 

.temps {
    position: absolute;
	display: block;
	background-color: white;
	height: 20px;
	width: 350px;
	left: 530px;
	bottom: 35px;
	transition: 40s;
	transition-timing-function: linear;
	border-radius: 5px;
	visibility: hidden;
	
}