/* CSS  */

/* Body  */
body {
	background-color: #50381d;
    font-family: "Jost", sans-serif;
    font-weight: 300;
    height: 100vh;
    width: 100vw;
    display: flex;
	flex-direction: column;
    justify-content: center;
    align-items: center;
	transition:0.3s;
	overflow: hidden;
	margin:0;
}



/* Mise en page  */
.layout-flex {
	display: flex;
	flex-direction: column;
    justify-content: center;
    align-items: center;
}



/* Animations */
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.rotating {
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}
@keyframes rotation {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(3deg);
	}
}
@keyframes rotation2 {
	from {
		transform: rotate(-1deg);
	}
	to {
		transform: rotate(1deg);
	}
}


/* Niveau debut */
#niveau-debut {
	position:relative;
	background-image: url(../images/Interfaces/Debut.jpg);
	background-size: cover;
	border-radius: 1%;
	border:solid #FAD6B8 5px;
	width: 1500px;
	height: 938px;
	display: block;
}
.Go {
	position: absolute;
    bottom:0px;
    right:620px;
    z-index: 9;
    transition:0.3s;
    cursor: pointer;
}
.Go:hover {
	transform:scale(1.03);
	background-color: transparent;  
}


/* Niveau explication */
#niveau-zero {
	position:relative;
	background-image: url(../images/Interfaces/NiveauZero.jpg);
	background-size: cover;
	border-radius: 1%;
	border:solid #FAD6B8 5px;
	width: 1500px;
	height: 938px;
	display: none;
}
.Start {
	position: absolute;
    bottom:30px;
    right:650px;
    z-index: 9;
    transition:0.3s;
    cursor: pointer;
}
.Start:hover {
	transform:scale(1.03);
	background-color: transparent;  
}


/* Lieu 1 */
#niveau-un  {
	position:relative;
	background-image: url(../images/Lieu1/Test.jpg);
	background-size: cover;
	border-radius: 1%;
	border:solid #FAD6B8 5px;
	width: 1500px;
	height: 938px;
	max-width: 100%;
	display: none;
}



/* Objets lieu 1*/
.sablier {
	position:absolute;
	bottom:115px;
	left:650px;
	cursor:pointer;
	transition:0.3s;
}
.sablier:hover {
	transform:scale(1.05);
	transition:0.3s;
}
.Feuille {
	position:absolute;
	bottom:140px;
	left:290px;
	animation: rotation 0.7s infinite linear;
	animation-direction: alternate-reverse;
}
.Pot {
	position:absolute;
	bottom:372px;
	left:470px;
	animation: rotation2 1s infinite linear;
	animation-direction: alternate-reverse;
}
.Plante {
	position:absolute;
	top:250px;
	right:165px;
	animation: rotation2 0.7s infinite linear;
	animation-direction: alternate-reverse;
}
.Citrouille {
	position:absolute;
	bottom:116px;
	right:185px;
	cursor:pointer;
	transition:0.3s;
}
.Citrouille:hover {
	transform:scale(1.05);
	transition:0.3s;
}
.Lunette {
	position:absolute;
	top:230px;
	left:290px;
	cursor:pointer;
	transition:0.3s;
}
.Lunette:hover {
	transform:scale(1.05);
	transition:0.3s;
}

/* Dialogue lieu1 */
.Chat {
	position:absolute;
	top:165px;
	right:505px;
	cursor:pointer;
	transition:0.3s;
}
.Chat:hover {
	transform:scale(1.05);
	transition:0.3s;
}
.Bulle {
	position:relative;
	background-image: url(../images/Interfaces/Bulle.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;	
	transition: 0.3s;
    display:none;
	height: 200px;
	width: 300px;
	top: 100px;
	left: 1000px;
}
.Bulle:hover {
	transform:scale(1.01);
	transition:0.3s;
}
.Texte p{
	font-family:'Trebuchet MS', sans-serif;
	font-weight: bold;
	font-size: 15px;
	color: #302209;
	position: relative;
	left: 25px;
	top: 35px;
}
.btn-texte {
	left: 230px;
	top: 20px;
	position:relative;
	transition: 0.3s;
	cursor:pointer;
}
.btn-texte:hover {
	transform:scale(1.05);
	transition:0.3s;
}


/* Lieu 2 */
#niveau-deux {
	position:relative;
	background-image: url(../images/Lieu2/Cuisine.jpg);
	background-size: cover;
	border-radius: 1%;
	border:solid #FAD6B8 5px;
	width: 1500px;
	height: 938px;
	max-width: 100%;
    display:none;
}



/* Objets lieu 2*/
.Lait {
	position:absolute;
	bottom:370px;
	right:190px;
	cursor:pointer;
	transition:0.3s;
}
.Lait:hover {
	transform:scale(1.05);
	transition:0.3s;
}

.Eau {
	position:absolute;
	bottom:370px;
	right:270px;
	cursor:pointer;
	transition:0.3s;
}
.Eau:hover {
	transform:scale(1.05);
	transition:0.3s;
}
.Jus {
	position:absolute;
	bottom:370px;
	right:110px;
	cursor:pointer;
	transition:0.3s;
}
.Jus:hover {
	transform:scale(1.05);
	transition:0.3s;
}
.Chocolat {
	position:absolute;
	top:245px;
	right:225px;
	cursor:pointer;
	transition:0.3s;
}
.Chocolat:hover {
	transform:scale(1.05);
	transition:0.3s;
}
.Cookie {
	position:absolute;
	top:325px;
	left:566px;
	cursor:pointer;
	transition:0.3s;
}
.Cookie:hover {
	transform:scale(1.05);
	transition:0.3s;
}
.Tasse {
	position:absolute;
	top:59px;
	left:243px;
	cursor:pointer;
	transition:0.3s;
}
.Tasse:hover {
	transform:scale(1.05);
	transition:0.3s;
}
.Cuillere {
	position:absolute;
	bottom:345px;
	left:440px;
	cursor:pointer;
	transition:0.3s;
}
.Cuillere:hover {
	transform:scale(1.05);
	transition:0.3s;
}
.Fourchette {
	position:absolute;
	bottom:347px;
	left:530px;
	cursor:pointer;
	transition:0.3s;
}
.Fourchette:hover {
	transform:scale(1.05);
	transition:0.3s;
}
.Couteau {
	position:absolute;
	bottom:350px;
	left:605px;
	cursor:pointer;
	transition:0.3s;
}
.Couteau:hover {
	transform:scale(1.05);
	transition:0.3s;
}


/* Dialogue lieu2 */
.Chat2 {
	position:absolute;
	top:40px;
	right:200px;
	cursor:pointer;
	transition:0.3s;
}
.Chat2:hover {
	transform:scale(1.05);
	transition:0.3s;
}
.Bulle2 {
	position:relative;
	background-image: url(../images/Interfaces/Bulle.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;	
	transition: 0.3s;
    display:none;
	height: 215px;
	width: 380px;
	top: 20px;
	left: 820px;
}
.Bulle2:hover {
	transform:scale(1.01);
	transition:0.3s;
}
.Texte2 p{
	font-family:'Trebuchet MS', sans-serif;
	font-size: 15px;
	font-weight: bold;
	color: #302209;
	position: relative;
	left: 30px;
	top: 20px;
}
.btn-texte2 {
	left: 300px;
	top: 0px;
	position:relative;
	transition: 0.3s;
	cursor:pointer;
}
.btn-texte2:hover {
	transform:scale(1.05);
	transition:0.3s;
}




/* Lieu 3 */
#niveau-trois {
	position:relative;
	background-image: url(../images/Lieu3/Salon.jpg);
	background-size: cover;
	border-radius: 1%;
	border:solid #FAD6B8 5px;
	width: 1500px;
	height: 938px;
	max-width: 100%;
    display:none;
}



/* Objets lieu 3*/
.Livre {
	position:absolute;
	top:130px;
	left:100px;
	cursor:pointer;
	transition:0.3s;
}
.Livre:hover {
	transform:scale(1.05);
	transition:0.3s;
}
.Casque {
	position:absolute;
	bottom:320px;
	right:430px;
	cursor:pointer;
	transition:0.3s;
}
.Casque:hover {
	transform:scale(1.05);
	transition:0.3s;
}
.Lampe {
	position:absolute;
	bottom:220px;
	right:740px;
	cursor:pointer;
	transition:0.3s;
}
.Lampe:hover {
	transform:scale(1.05);
	transition:0.3s;
}
.Coussin {
	position:absolute;
	bottom:290px;
	right:380px;
}
/* Dialogue lieu3 */
.Chat3 {
	position:absolute;
	bottom:320px;
	left:20px;
	cursor:pointer;
	transition:0.3s;
}
.Chat3:hover {
	transform:scale(1.05);
	transition:0.3s;
}
.Bulle3 {
	position:relative;
	background-image: url(../images/Interfaces/Bulle.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;	
	transition: 0.3s;
    display:none;
	height: 215px;
	width: 380px;
	top: 350px;
	left: 120px;
}
.Bulle3:hover {
	transform:scale(1.01);
	transition:0.3s;
}
.Texte3 p{
	font-family:'Trebuchet MS', sans-serif;
	font-size: 16px;
	font-weight: bold;
	color: #302209;
	position: relative;
	left: 35px;
	top: 30px;
}
.btn-texte3 {
	left: 300px;
	top: 20px;
	position:relative;
	transition: 0.3s;
	cursor:pointer;
}
.btn-texte3:hover {
	transform:scale(1.05);
	transition:0.3s;
}

/*Inventaire*/
#Inventaire {
    background-image: url(../images/Interfaces/Inventaire.png);
    background-repeat: no-repeat;
    position: absolute;
    right: 0px;
    top: 40px;
	height: 900px;
    width: 180px;
	z-index: 8;
	display: none;
}

/*Inventaire objets lieu 1*/
	
	.item-lunette{
		position: relative;
		bottom: 80px;
		right: 70px;
		cursor: pointer;
		z-index: 1;
		display: none;
	}
	
	.item-lunette:hover{
		transform: scale(1.2);
		transition: 0.3s;
	}
	
	.item-sablier{
		position: absolute;
		bottom: 120px;
		right: 85px;
		cursor: pointer;
		z-index: 1;
		display: none;
	}
	
	.item-sablier:hover{
		transform: scale(1.2);
		transition: 0.3s;
	}
	
	.item-citrouille{
		position: absolute;
		bottom: 190px;
		right: 83px;
		cursor: pointer;
		z-index: 1;
		display: none;
	}
	
	.item-citrouille:hover{
		transform: scale(1.2);
		transition: 0.3s;  
	}

	/*Inventaire objets lieu 2*/
.item-tasse{
	position: absolute;
	bottom: 240px;
	right: 73px;
	cursor: pointer;
	z-index: 1;
	display: none;
}

.item-tasse:hover{
	transform: scale(1.2);
	transition: 0.3s;
}

.item-cookie{
	position: absolute;
	bottom: 440px;
	right: 75px;
	cursor: pointer;
	z-index: 1;
	display: none;
}

.item-cookie:hover{
	transform: scale(1.2);
	transition: 0.3s;
}

.item-chocolat{
	position: absolute;
	top: 380px;
	right: 83px;
	cursor: pointer;
	z-index: 1;
	display: none;
}

.item-chocolat:hover{
	transform: scale(1.2);
	transition: 0.3s;  
}
.item-lait{
	position: absolute;
	bottom: 350px;
	right: 80px;
	cursor: pointer;
	z-index: 1;
	display: none;
}

.item-lait:hover{
	transform: scale(1.2);
	transition: 0.3s;  
}
.item-cuillere{
	position: absolute;
	bottom: 290px;
	right: 80px;
	cursor: pointer;
	z-index: 1;
	display: none;
}

.item-cuillere:hover{
	transform: scale(1.2);
	transition: 0.3s;  
}

/*Inventaire objets lieu 3*/
.item-livre{
	position: absolute;
	top: 160px;
	right: 80px;
	cursor: pointer;
	z-index: 1;
	display: none;
}

.item-livre:hover{
	transform: scale(1.2);
	transition: 0.3s;
}

.item-lampe{
	position: absolute;
	top: 310px;
	right: 80px;
	cursor: pointer;
	z-index: 1;
	display: none;
}

.item-lampe:hover{
	transform: scale(1.2);
	transition: 0.3s;
}

.item-casque{
	position: absolute;
	top: 230px;
	right: 75px;
	cursor: pointer;
	z-index: 1;
	display: none;
}

.item-casque:hover{
	transform: scale(1.2);
	transition: 0.3s;  
}


/* Piège */
#Erreur-eau {
	position:relative;
	background-image: url(../images/Interfaces/ErreurEau.jpg);
	background-size: cover;
	border-radius: 1%;
	border:solid #FAD6B8 5px;
	width: 1500px;
	height: 938px;
	max-width: 100%;
    display:none;
}
#Erreur-jus {
	position:relative;
	background-image: url(../images/Interfaces/ErreurJus.jpg);
	background-size: cover;
	border-radius: 1%;
	border:solid #FAD6B8 5px;
	width: 1500px;
	height: 938px;
	max-width: 100%;
    display:none;
}
#Erreur-fourchette {
	position:relative;
	background-image: url(../images/Interfaces/ErreurFourchette.jpg);
	background-size: cover;
	border-radius: 1%;
	border:solid #FAD6B8 5px;
	width: 1500px;
	height: 938px;
	max-width: 100%;
    display:none;
}
#Erreur-couteau {
	position:relative;
	background-image: url(../images/Interfaces/ErreurCouteau.jpg);
	background-size: cover;
	border-radius: 1%;
	border:solid #FAD6B8 5px;
	width: 1500px;
	height: 938px;
	max-width: 100%;
    display:none;
}




/* Musique */
#button {
	position: absolute;
    top:30px;
    right:240px;
    z-index: 9;
    transition:1s;
	animation: rotating 10s infinite linear;
    background-color: transparent;
    cursor: pointer;
}
#button:hover {
	transform:scale(1.1);
	background-color: transparent;  
}




/* Temps */
#time_wrap {
    background-image: url(../images/Interfaces/Timer.png);
    background-repeat: no-repeat;
    position: absolute;
    left: 50px;
    top: 20px;
	height: 1000px;
    width: 100px;
	z-index: 8;
	visibility: hidden;
}

.temps {
    position: absolute;
    background-color: rgb(221, 147, 50);
    height: 710px;
    width: 40px;
    top: 100px;
    left: 27px;
    transition-duration: 120s;
	z-index: 9;
	
}

/* Fleche de navigation*/
.zone-fleche-next img, .zone-fleche-previous img {
    width: 40px;
    padding:20px;
    cursor:pointer;
    transition:0.3s;
}
.zone-fleche-next:hover img, .zone-fleche-previous:hover img {
    display: block;
    transform:scale(1.2);
    transition:0.3s;
}
.zone-fleche-next {
    position: absolute;
    right:0;
    top: 400px;
}
.zone-fleche-previous {
    position: absolute;
    left:0;
    top: 400px;
}
.zone-fleche-next2 img, .zone-fleche-previous2 img {
    width: 40px;
    padding:20px;
    cursor:pointer;
    transition:0.3s;
}
.zone-fleche-next2:hover img, .zone-fleche-previous2:hover img {
    display: block;
    transform:scale(1.2);
    transition:0.3s;
}
.zone-fleche-next2 {
    position: absolute;
    right:0;
    top: 400px;
}
.zone-fleche-previous2 {
    position: absolute;
    left:0;
    top: 400px;
}

/* Temps */
#Perdu {
	position:relative;
	background-image: url(../images/Interfaces/Perdu.jpg);
	background-size: cover;
	border-radius: 1%;
	border:solid #FAD6B8 5px;
	width: 1500px;
	height: 938px;
    display:none;
	animation: opacity 1s;
	animation-iteration-count: 1;
}
#Perdu2 {
	position:relative;
	background-image: url(../images/Interfaces/Perdu2.jpg);
	background-size: cover;
	border-radius: 1%;
	border:solid #FAD6B8 5px;
	width: 1500px;
	height: 938px;
    display:none;
}
#Bravo {
	position:relative;
	background-image: url(../images/Interfaces/Bravo.jpg);
	background-size: cover;
	border-radius: 1%;
	border:solid #FAD6B8 5px;
	width: 1500px;
	height: 938px;
    display:none;
	animation: opacity 1s;
	animation-iteration-count: 1;
}
#Bravo2 {
	position:relative;
	background-image: url(../images/Interfaces/Bravo2.jpg);
	background-size: cover;
	border-radius: 1%;
	border:solid #FAD6B8 5px;
	width: 1500px;
	height: 938px;
    display:none;
}

/* Bouton Restart */
.Restart {
	position: absolute;
    bottom:30px;
    right: 780px;
    z-index: 9;
    transition:0.3s;
    cursor: pointer;
	display: none;
}
.Restart:hover {
	transform:scale(1.03);
	background-color: transparent;  
}