/*** CSS Styles  ***/

@font-face {
	font-family: 'survival';
	src: url('../font/deadhead-rough.regular.ttf');	
}

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

/* inventaireBlanc */

.inventoryWhite{
	z-index: 2;
	position: absolute;
	width: 650px;
	height: 400px;
	shape-outside: inset(20px 50px 10px 0 round 50px);
	background-color: rgb(255, 255, 255);
	border: 2px solid black;
	border-radius: 10px;
	right: px;
	display: none;
}

.croix {
	position: absolute;
	z-index: 3;
	right: 450px;
	bottom: 580px;
	display: none;
	cursor: pointer;
}

.croix:hover {
	transform: scale(1.2);
	transition: 0.6s;
}

.listeInterieur {
	z-index: 6;
	position: absolute;
	width: 650px;
	height: 400px;
	shape-outside: inset(20px 50px 10px 0 round 50px);
	background-color: rgb(255, 255, 255);
	border: 2px solid black;
	border-radius: 10px;
	right: px;
	display: none;
}

.croix2 {
	position: absolute;
	z-index: 10;
	right: 450px;
	bottom: 580px;
	display: none;
	cursor: pointer;

}

.croix2:hover {
	transform: scale(1.2);
	transition: 0.6s;
}

h1 {
	font-weight: 300;
	padding:0px 0;
	margin:0;
	font-family: 'survival';
}

.memoire {
	font-size: 4em;
	position: absolute;
	left: 235px;
	top: 30px;
	font-family: 'survival';
}

.texteBol {
	font-size: 1.5em;
	position: absolute;
	left: 50px;
	top: 180px;
	font-family: 'survival';
}

.autres {
	font-size: 1.5em;
	position: absolute;
	left: 50px;
	top: 290px;
	font-family: 'survival';
}

.complémentaire {
	font-size: 2em;
	position: absolute;
	left: 23px;
	top: 240px;
	font-family: 'survival';
}

h2 {
	font-weight: 300;
	padding:0px 0;
	margin:0;
	font-family: 'survival';
}

.obligatoire {
	font-size: 2em;
	position: absolute;
	left: 23px;
	top: 120px;
	color: #000;
}

p {
	color: #000;
}

/* Introduction */
#introduction {
	position: absolute;
	left: 20px;
	top: 20px;
}

/* zone jeu */

.zone-jeu {
	position: relative;
	width: 1400px;
	height: 700px;
}

/* Background animé */

.intro {
		width: 100%;
		height: 100%;
		background-image: url(../assets/foretBanniere/background1.png);
		background-size: cover;
		background-position: center;
		animation: scroll-anim 10s linear infinite;
}

@keyframes scroll-anim {
	100% {
		background-position: 0% 0;
	}
}

/* Bouton Play */

.btnPlay {
	position: absolute;
	bottom: 100px;
	right: 600px;
	font-size: 24px;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	outline: none;
	color: #fff;
	background-color: #212a71;
	border: none;
	border-radius: 10px;
	box-shadow: 0 10px #999;
	animation:float 6s infinite;
  }
  
  .btnPlay:hover {background-color: #25135b}
  
  .btnPlay:active {
	background-color: #212a71;
	box-shadow: 0 10px #999;
	transform: translateY(4px);
}

/* btn sortie */
.btnSortie {
	position: absolute;
	top: 150px;
	left: 150px;
	font-size: 24px;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	outline: none;
	color: #fff;
	background-color: #212a71;
	border: none;
	border-radius: 10px;
	box-shadow: 0 10px #999;
	animation:float 6s infinite;
  }
  
  .btnSortie:hover {background-color: #25135b}
  
  .btnSortie:active {
	background-color: #212a71;
	box-shadow: 0 10px #999;
	transform: translateY(4px);
}

/* Texte Play */

h1 {
	font-family: 'survival';
	font-size: 80px;
}

/* Titre */

.title {
	position: absolute;
	bottom: 500px;
	right: 400px;
	background: -webkit-linear-gradient(#251a1a, #da1f1f);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}


/* Lieu un */

.lieu-un{
	width: 1400px;
	height: 700px;
	background-image: url(../assets/Campfire/144Z_2106.w026.n002.546B.p1.546.jpg);
	background-size: cover;
	background-position: center;
	display: none;
}

.item-liste {
	position: absolute;
	right: 310px;
	bottom: 205px;
	cursor: pointer;
}

.liste:hover {
	transform: scale(1.2);
	transition: 0.6s;
}

.item-liste2 {
	position: absolute;
	bottom: 400px;
	right: 780px;
	cursor: pointer;
	z-index: 2;
	display: none;
}

.item-liste2:hover {
	transform: scale(1.2);
	transition: 0.6s;
}

.btnContinue2 {
	display: none;
}

.item-perso2 {
	position: absolute;
	right: 725px;
	bottom: 250px;
	cursor: pointer;
}

.item-perso2:hover{
	transform: scale(1.02);
	transition: 0.6s;
}


/* Objet lieu un */

.item-casserole{
	position: absolute;
	bottom: 220px;
	right: 827px;
	cursor: pointer;
}


.item-sac{
	position: absolute;
	bottom: 200px;
	right: 330px;
	cursor: pointer;
	z-index: 1;
}

.item-sac:hover{
	transform: scale(1.2);
	transition: 0.6s;
}

.item-sac2{
	position: absolute;
	bottom: 70px;
	right: 715px;
	cursor: pointer;
	z-index: 1;
	display: none;
}

.item-sac2:hover{
	transform: scale(1.2);
	transition: 0.6s;
}


/* Lieu deux */

.lieu-deux {
	width: 1400px;
	height: 700px;
	background-image: url(../assets/Foret/41524.jpg);
	background-size: cover;
	background-position: center;
	display: none;
}

/* Objet lieu deux */

.item-papillon1{
	position: absolute;
	bottom: 190px;
	right: 775px;
	animation:float 5s infinite;
	cursor: pointer;
}

.item-papillon2{
	position: absolute;
	bottom: 290px;
	right: 650px;
	animation:float 4s infinite;
	cursor: pointer;
}

.item-papillon3{
	position: absolute;
	bottom: 240px;
	right: 1350px;
	animation:float 6s infinite;
	cursor: pointer;
}

/*papillon 4 */

.item-papillon4{
	position: absolute;
	bottom: 567px;
	right: 607px;
	cursor: pointer;
}

.item-papillon4:hover{
	transform: scale(1.2);
	transition: 0.6s;
}

.item2-papillon4{
	position: absolute;
	bottom: 700px;
	right: 607px;
	cursor: pointer;
	display: none;
}

.item2-papillon4:hover{
	transform: scale(1.2);
	transition: 0.6s;
}

/* fin papillon 4 */

.item-papillon5{
	position: absolute;
	bottom: 400px;
	right: 1110px;
	animation:float 7s infinite;
	cursor: pointer;
}

.item-papillon6{
	position: absolute;
	bottom: 535px;
	right: 100px;
	animation:float 4s infinite;
	cursor: pointer;
}

.item-papillon7{
	position: absolute;
	bottom: 300px;
	right: 300px;
	animation:float 6s infinite;
	cursor: pointer;
}

.item-papillon8{
	position: absolute;
	bottom: 500px;
	right: 960px;
	animation:float 5s infinite;
	cursor: pointer;
}

/* Animation */
@keyframes float {
	0% {
	  -webkit-transform: translateY(0px);
	  -moz-transform: translateY(0px);
	  -ms-transform: translateY(0px);
	  -o-transform: translateY(0px);
	}
	50% {
	  -webkit-transform: translateY(-20px);
	  -moz-transform: translateY(-20px);
	  -ms-transform: translateY(-20px);
	  -o-transform: translateY(-20px);
	}
	100% {
		-webkit-transform: translateY(0px);
	  -moz-transform: translateY(0px);
	  -ms-transform: translateY(0px);
	  -o-transform: translateY(0px);
	}
  }

  /* dialogue */

  .expli {
	width: 1400px;
	height: 700px;
    background-image: url(../assets/bgExpli/3706.jpg);
    background-size: cover;
    background-position: center;
    display:none;
}

.text {
    font-size: 23px;
    position: absolute;
    color:white;
    bottom: 370px;
    left: 400px;
	font-family: 'survival';
}

/* grille */

.grille {
	position: absolute;
    bottom: 50px;
    left: 700px;
	z-index: 1;
	display: none;
}

.grilleInventaire {
	position: absolute;
	width: 400px;
	height: 120px;
    bottom: 400px;
    left: 560px;
	display: none;
	z-index: 3;
	background-image: url(../assets/InventaireGrille/grille/grilleInventaire.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

/* objet inventaire */

.objetListe {
	position: absolute;
	display: none;
	left: 35px;
	top: 40px;
	cursor: pointer;
}

.objetListe:hover{
	transform: scale(1.2);
	transition: 0.6s;
}

.objetPapillon {
	position: absolute;
	display: none;
	left: 125px;
	top: 45px;
	cursor: pointer;
}

.objetPapillon:hover{
	transform: scale(1.2);
	transition: 0.6s;
}

.objetBol {
	position: absolute;
	display: none;
	left: 210px;
	top: 50px;
	cursor: pointer;
	z-index: 7;
}

.objetBol:hover{
	transform: scale(1.2);
	transition: 0.6s;
}

.objetLivre {
	position: absolute;
	display: none;
	left: 320px;
	top: 30px;
	cursor: pointer;
	z-index: 7;
}

.objetLivre:hover{
	transform: scale(1.2);
	transition: 0.6s;
}


/* perso */

.item-perso {
    position: absolute;
    bottom: 170px;
    left: 280px;
    transition: 0.7s;
    z-index: 0;
	display: block;
}

/* Bouton Continue */

.btnContinue {
	position: absolute;
	bottom: 200px;
	right: 682px;
	font-size: 24px;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	outline: none;
	color: #fff;
	background-color: #212a71;
	border: none;
	border-radius: 10px;
	box-shadow: 0 10px #999;
	display: block;
  }
  
  .btnContinue:hover {background-color: #25135b}
  
  .btnContinue:active {
	background-color: #212a71;
	box-shadow: 0 10px #999;
	transform: translateY(4px);
  }

/* Texte Continue */

.Continue{
	font-family: 'survival';
	font-size: 50px;
}

/* Bouton Fin */

.btnContinue2 {
	position: absolute;
	bottom: 200px;
	right: 708px;
	display: inline-block;
	font-size: 24px;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	outline: none;
	color: #fff;
	background-color: #212a71;
	border: none;
	border-radius: 10px;
	box-shadow: 0 10px #999;
	display: none;
  }
  
  .btnContinue2:hover {background-color: #25135b}
  
  .btnContinue2:active {
	background-color: #212a71;
	box-shadow: 0 10px #999;
	transform: translateY(4px);
  }

/* Texte Continue2 */

.Fin{
	font-family: 'survival';
	font-size: 50px;
} 

/* musique */

  .on {
	position: absolute;
	bottom: 655px;
	right: 80px;
	cursor: pointer;
	z-index: 15;
  }
  

/* flèche lieu 1 */

.zone-fleche-next img, .zone-fleche-previous img {
	width: 40px;
	padding:20px;
	cursor:pointer;
}
.zone-fleche-next {
	position: absolute;
	right:50px;
	top: 400px;
	color: white;
}

.zone-fleche-previous {
	position: absolute;
	left:50px;
	top: 400px;
	color: white;
}

/* flèche lieu 2 */

.zone-fleche-next2 img, .zone-fleche-previous2 img {
	width: 40px;
	padding:20px;
	cursor:pointer;
}
.zone-fleche-next2 {
	position: absolute;
	right:50px;
	top: 400px;
	color: white;
}

.zone-fleche-previous2 {
	position: absolute;
	left:50px;
	top: 400px;
	color: white;
}

/* flèche lieu 3 */

.zone-fleche-next3 img, .zone-fleche-previous3 img {
	width: 40px;
	padding:20px;
	cursor:pointer;
}

.zone-fleche-previous3 {
	position: absolute;
	left:50px;
	top: 400px;
	color: white;
}

/* lieu trois */

.lieu-trois {
	width: 1400px;
	height: 700px;
	background-image: url(../assets/MaisonForet/2105.png);
	background-size: cover;
	background-position: center;
	display:none;
}

.item-porte{
	position: absolute;
	bottom: 199px;
	right: 550px;
	cursor: pointer;
}

.item-porte:hover{
	transform: scale(1.2);
	transition: 0.6s;
}

/* lieu quatre */

.lieu-quatre {
	width: 1400px;
	height: 700px;
	background-image: url(../assets/interieurMaison/1795.png);
	background-size: cover;
	background-position: center;
	display:none;
}

.item-bol {
	position: absolute;
	bottom: 218px;
	right: 830px;
	cursor: pointer;
}

.item-bol:hover{
	transform: scale(1.2);
	transition: 0.6s;
}

.item-bol2 {
	position: absolute;
	bottom: 230px;
	right: 850px;
	cursor: pointer;
	display: none;
}

.item-bol2:hover{
	transform: scale(1.2);
	transition: 0.6s;
}

.item-livre {
	position: absolute;
	bottom: 448px;
	right: 245px;
	cursor: pointer;
}

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

.item-livre2 {
	position: absolute;
	bottom: 461px;
	right: 245px;
	cursor: pointer;
	display: none;
}

.item-livre2:hover{
	transform: scale(1.2);
	transition: 0.6s;
}

/* temps timer */


.times {
    position: absolute;
    background-color: rgb(221, 147, 50);
    height: 30px;
    width: 290px;
    left: 305px;
    bottom: 82px;
    transition-duration: 120s;
    z-index: 14;
	visibility: hidden;
}

.barredevie {
	position: absolute;
	z-index: 13; 
	left: 145px;
    bottom: 40px;
	display: none;
}

.echec {
	position: absolute;
	background-size: cover;
	display: none;
}


.btnEchec {
	position: absolute;
	bottom: -30px;
	right: 500px;
	font-size: 24px;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	outline: none;
	color: #fff;
	background-color: #212a71;
	border: none;
	border-radius: 10px;
	box-shadow: 0 10px #999;
	animation:float 6s infinite;
  }
  
  .btnEchec:hover {background-color: #25135b}
  
  .btnEchec:active {
	background-color: #212a71;
	box-shadow: 0 10px #999;
	transform: translateY(4px);
}

.titleEchec {
	position: absolute;
	bottom: 600px;
	right: 250px;
	background: -webkit-linear-gradient(#ff0606, #8f1212);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-size: 50px;
}

.EchecText {
	font-size: 60px;
}

.win {
	background-image: url(../assets/bgWin/bgWin.jpg);
	position: absolute;
	background-size: cover;
	display: none;
	width: 1400px;
	height: 700px;
}


.btnWin {
	position: absolute;
	bottom: -30px;
	right: 500px;
	font-size: 24px;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	outline: none;
	color: #fff;
	background-color: #212a71;
	border: none;
	border-radius: 10px;
	box-shadow: 0 10px #999;
	animation:float 6s infinite;
  }
  
  .btnWin:hover {background-color: #25135b}
  
  .btnWin:active {
	background-color: #212a71;
	box-shadow: 0 10px #999;
	transform: translateY(4px);
}

.titleWin {
	position: absolute;
	bottom: 600px;
	right: 220px;
	background: -webkit-linear-gradient(#ff0606, #8f1212);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-size: 50px;
}

.WinText {
	font-size: 60px;
}