* {
  box-sizing: border-box
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior-x: none;
}

.window {
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  cursor: grab;
}

.window:active {
  cursor: grabbing;
}

.world {
  position: relative;
  width: 10000px;
  height: 10000px;
  background: url(../assets/MAP.jpg) no-repeat center center / 100% auto;
  z-index: 8;
}
.world2 {
  position: relative;
  width: 10000px;
  height: 10000px;
  background: url(../assets/MAP.png) no-repeat center center / 100% auto;
  z-index: 30;
  pointer-events: none;
}
#start {
  position: absolute;
  background-repeat: no-repeat;
  width: 1920px;
  height: 1080px;
  background-size: 100%;
  z-index: 100;
  left: 0%;
  top: 0%;
  background-image: url(../assets/Page\ de\ Début.png);
}

#full {
  position: absolute;
  background-repeat: no-repeat;
  width: 150px;
  height: 150px;
  background-size: 100%;
  z-index: 110;
  left: 90%;
  top: 50%;
  background-image: url(../assets/full.png);
  transform: translate(-50%, -50%);
}

.tuto {
  position: absolute;
  background-repeat: no-repeat;
  width: 1920px;
  height: 1080px;
  background-size: 100%;
  z-index: 90;
  left: 0%;
  top: 0%;
  background-image: url(../assets/Tuto.png);
}

#fin {
  position: absolute;
  background-repeat: no-repeat;
  width: 1920px;
  height: 1080px;
  background-size: 100%;
  z-index: 90;
  left: 0%;
  top: 0%;
  background: black;
  display: none;
}

.noir {
  position: absolute;
  background-repeat: no-repeat;
  width: 1920px;
  height: 1080px;
  background-size: 100%;
  z-index: 65;
  left: 0%;
  top: 0%;
  background: black;
  display: none;
}

#fin video {
  width: 1920px;
  height: 1080px;
}

.text {
  position: absolute;
  top: 125%;
  left: 50%;
  width: 1920px;
  height: 1080px;
  object-fit: contain;
  z-index: 70;
  transform: translate(-50%, -50%);
  background: black;
  display: none;
  pointer-events: none;

}

#textmaison {
  top: 115%;
  background: url(../assets/maisontext.png) no-repeat center center;
}

#textintro {
  background: url(../assets/introtext.png) no-repeat center center;
}

#textcity {
  top: 115%;
  background: url(../assets/citytext.png) no-repeat center center;
}

#texthood {
  top: 115%;
  background: url(../assets/hoodtext.png) no-repeat center center;
}

#textforest {
  top: 115%;
  background: url(../assets/foresttext.png) no-repeat center center;
}

#texthill1 {
  top: 115%;
  background: url(../assets/hill2text.png) no-repeat center center;
}

#texthill2 {
  top: 115%;
  background: url(../assets/hill1text.png) no-repeat center center;
}

#texthill3 {
  top: 115%;
  background: url(../assets/hill3text.png) no-repeat center center;
}

#rodeo {
  position: absolute;
  background-repeat: no-repeat;
  width: 1500px;
  height: 1000px;
  background-size: 100%;
  z-index: 95;
  left: 50%;
  top: 50%;
  background-image: url(../assets/LE\ Titre.png);
  transform: translate(-50%, -50%);
  display: none;
}

#close {
  position: absolute;
  background-repeat: no-repeat;
  width: 150px;
  height: 150px;
  background-size: 100%;
  z-index: 95;
  left: 90%;
  top: 90%;
  background-image: url(../assets/restart.png);
  transform: translate(-50%, -50%);
  display: none;
}

.suivant {
  position: absolute;
  background-repeat: no-repeat;
  width: 150px;
  height: 150px;
  background-size: 100%;
  z-index: 95;
  left: 90%;
  top: 90%;
  background-image: url(../assets/Suivant.png);
  transform: translate(-50%, -50%);
  display: none;
}

#screentuto {
  height: 400px;
  background-image: url(../assets/Suivanttuto.png);
}

.item {
  position: absolute;
  background-position: center;
  background-size: contain;
  width: 500px;
  height: 500px;
  z-index: 10;
  transform: translate(-50%, -50%);
  transform: scale(2);

}

.off {
  opacity: 45%;
}

.hide {
  filter: drop-shadow(100);
  pointer-events: none;


}

#maison {
  top: 7100px;
  left: 1400px;
  background: url(../assets/House.png) no-repeat center center;

}

#city {
  top: 2400px;
  left: 1950px;
  background: url(../assets/City.png) no-repeat center center;
}

#hood {
  top: 4600px;
  left: 4400px;
  background: url(../assets/Hood.png) no-repeat center center;
}

#forest {
  top: 7450px;
  left: 7100px;
  background: url(../assets/Forest.png) no-repeat center center;
}

#hill {
  top: 1300px;
  left: 8500px;
  background: url(../assets/Hill.png) no-repeat center center;
}

.flame {
  position: absolute;
  width: 250px;
  height: 250px;
  background-position: center;
  z-index: 15;
  object-fit: fill;
  opacity: 0%;
  transition: all 300ms ease;
  transform: scale(4);
  pointer-events: none;
}

.flame.reveal {
  opacity: 100%;
  transition: all 1.5s ease-out;
}

#flame1 {
  top: 5000px;
  left: 1000px;
  background: url(../assets/Flame.png) no-repeat center center;

}

#flame2 {
  top: 3200px;
  left: 3800px;
  background: url(../assets/Flame.png) no-repeat center center;

}

#flame3 {
  top: 6100px;
  left: 6700px;
  background: url(../assets/Flame.png) no-repeat center center;

}

#flame4 {
  top: 2500px;
  left: 8700px;
  background: url(../assets/Flame.png) no-repeat center center;

}

#flame5 {
  top: 7000px;
  left: 2500px;
  background: url(../assets/Flame.png) no-repeat center center;

}

.perso {
  position: absolute;
  width: 250px;
  height: 250px;
  background-image: url(../assets/bougie0.png);
  background-repeat: no-repeat;
  background-position: center;
  object-fit: contain;
  z-index: 25;
  pointer-events: none;
  transform: translate(-50%, -50%);

}

.perso.light {
  background-image: url(../assets/bougie1.png);
}

.jack {
  position: absolute;
  width: 100px;
  height: 200px;
  background: url(../assets/spriteMove.png);
  background-size: auto;
  background-repeat: no-repeat;
  background-position: left center;
  z-index: 26;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: 1s linear;
  animation: animation-player 800ms steps(4) infinite;
  animation-play-state: paused;

}

.jack.move {
  animation-play-state: running;
}

.jack.move.reverse {
  background: url(../assets/spriteMoveReverse.png);
}

@keyframes animation-player {
  0% {
    background-position: 0px 0px;
  }

  100% {
    background-position: -400px 0px;
  }
}

.screen {
  z-index: 30;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
}

#screen01 {
  background: url(../assets/01_StoryTime_Planche.jpg) no-repeat center center;
  display: block;
}

#screen02 {
  background: url(../assets/02_StoryTime_Planche.jpg) no-repeat center center;
}

#screen03 {
  background: url(../assets/03_StoryTime_Planche.jpg) no-repeat center center;
}

#screen04 {
  background: url(../assets/04_Planche_StoryTime.jpg) no-repeat center center;
}

#screen05 {
  background: url(../assets/ForestPlanche.jpg) no-repeat center center;
}

#screen06 {
  background: url(../assets/HillPlanche.jpg) no-repeat center center;
  z-index: 50;
}

#screen07 {
  background: url(../assets/Eye.png) no-repeat center center;
  z-index: 40;
}

#screen08 {
  background: url(../assets/RisingSun.jpg) no-repeat center center;
  z-index: 30;

}


.blocker {
  position: absolute;
  object-fit: cover;
  width: 1000px;
  height: 1000px;
  z-index: 11;
  background: url(../assets/Valid.png) no-repeat center center;
  transform: translate(-25%, -25%) scale(2);
  transition: all 300ms ease;
}

.noblocker {
  display: none;
  z-index: 5;
  transition: all 1000ms ease;

}

#state01 {
  top: 2400px;
  left: 1950px;
}

#state02 {
  top: 4600px;
  left: 4400px;

}

#state03 {
  top: 7450px;
  left: 7100px;
}

#state04 {
  top: 1300px;
  left: 8500px;
}

#state05 {
  top: 7100px;
  left: 1400px;
}