* {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(../images/background.png) no-repeat center center / 100% auto;
}

.item {
  position:absolute;
}

#overlay {
  position: absolute;
  width: 100vw;
  height: 100vh;
  background:url(../images/overlay.png) no-repeat center center / 100% auto;;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
  pointer-events: none;
}

/*camion*/
.bscreen{
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  right: 0;
  background: black;
  z-index: 100;
  opacity: 0.75;
  mix-blend-mode:overlay;
  display: none;
}

#bgcamion1{
  width: calc(6972px / 2.3);
  height: calc(3922px / 2.3);
  top: 0px;
  left: 0px;
  background:url(../images/camion/backgroundcamion1.jpg) no-repeat center center / contain
}

#rideau{
  width: calc(724px / 2.3);
  height: calc(1059px / 2.3);
  top: 250px;
  left: 1720px;
  background:url(../images/camion/rideau.png) no-repeat center center / contain
}

#bracelet{
  width: calc(327px / 2.3);
  height: calc(203px / 2.3);
  top: 940px;
  left: 1930px;
  background:url(../images/camion/bracelet.png) no-repeat center center / contain
}

#courses{
  width: calc(615px / 2.3);
  height: calc(780px / 2.3);
  top: 750px;
  left: 1550px;
  background:url(../images/camion/courses.png) no-repeat center center / contain
}

#chaines{
  width: calc(615px / 2.3);
  height: calc(780px / 2.3);
  top: 500px;
  left: 970px;
  background:url(../images/camion/chaines.png) no-repeat center center / contain
}

#barres{
  width: calc(358px / 2.3);
  height: calc(233px / 2.3);
  top: 750px;
  left: 2030px;
  background:url(../images/camion/barres.png) no-repeat center center / contain
}

#girl_sit{
  width: calc(2366px / 5);
  height: calc(2858px / 5);
  top: 650px;
  left: 700px;
  pointer-events: none;
  background:url(../images/persos/girl_sitdown.png) no-repeat center center / contain
}

.dream {
position: absolute;
  top: 50%;
  left: 50%;
  width: calc(2880px/2.4);
  height: calc(1620px/2.4);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

#chainesdream{
  background:url(../images/camion/chainesdream.png) no-repeat center center / contain;
  display: none;
  z-index: 104;

}

#barresdream{
  background:url(../images/camion/barresdream.png)no-repeat center center / contain;
  display: none;
  z-index: 105;
}

#coursesdream{
  background:url(../images/camion/coursesdream.png)no-repeat center center / contain;
  display: none;
  z-index: 102;
}

#braceletdream{
  background:url(../images/camion/braceletdream.png)no-repeat center center / contain;
  display: none;
  z-index: 103;
}

/*camion2*/
#bgcamion2{
  width: calc(6972px / 2.3);
  height: calc(3922px / 2.3);
  top: 0px;
  left: 3500px;
  pointer-events: none;
  background:url(../images/camion/backgroundcamion2.jpg) no-repeat center center / contain
}

#rideau2{
  width: calc(724px / 2.3);
  height: calc(1059px / 2.3);
  top: 200px;
  left: 5200px;
  transform: rotate(0deg);
  z-index: 101;
  transition: 
    left 0.5s ease,
    top 0.5s ease,
    transform 0.5s ease;
  background:url(../images/camion/rideau.png) no-repeat center center / contain
}

#bracelet2{
  width: calc(327px / 2.3);
  height: calc(203px / 2.3);
  top: 940px;
  left: 5430px;
  pointer-events: none;
  background:url(../images/camion/bracelet.png) no-repeat center center / contain
}

#courses2{
  width: calc(615px / 2.3);
  height: calc(780px / 2.3);
  top: 750px;
  left: 5050px;
  pointer-events: none;
  z-index: 102;
  background:url(../images/camion/courses.png) no-repeat center center / contain
}

#barres2{
  width: calc(358px / 2.3);
  height: calc(233px / 2.3);
  top: 750px;
  left: 5520px;
  pointer-events: none;
  background:url(../images/camion/barres.png) no-repeat center center / contain
}

#chaines2{
  width: calc(615px / 2.3);
  height: calc(780px / 2.3);
  top: 500px;
  left: 4470px;
  pointer-events: none;
  background:url(../images/camion/chaines.png) no-repeat center center / contain
}

#girl_sit2{
  width: calc(2366px / 5);
  height: calc(2858px / 5);
  top: 650px;
  left: 4200px;
  pointer-events: none;
  background:url(../images/persos/girl_sitdown.png) no-repeat center center / contain
}

#poison{
  width: calc(303px / 2.3);
  height: calc(551px / 2.3);
  top: 280px;
  left: 5380px;
  z-index: 100;
  display: none;
  transform: translate(-50%, -50%);
  background:url(../images/camion/poison.png) no-repeat center center / contain
}

#poisonhitbox{
  width:450px;
  height: 220px;
  top: 265px;
  left: 4725px;
}

#blackscreen{
  position: absolute;
  width:3840px;
  height: 2160px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: black;
  display: none;
}


/*chambre*/
#bgchambre{
  width: calc(6972px / 2.8);
  height: calc(3922px / 2.8);
  top: 2000px;
  left: 0px;
  background:url(../images/chambre/chambre.jpg) no-repeat center center / contain
}

#blocnote{
  width: calc(547px /2.3);
  height: calc(307px / 2.3);
  top: 2660px;
  left: 1000px;
  background:url(../images/chambre/blocnote.png) no-repeat center center / contain
}

#fenetre{
  width: calc(1411px / 2.3);
  height: calc(1341px / 2.3);
  top: 1950px;
  left: 1300px;
  background:url(../images/chambre/fenetre.png) no-repeat center center / contain
}

#tableau{
  width: calc(1595px / 2.3);
  height: calc(1089px / 2.3);
  top: 2100px;
  left: 1950px;
  background:url(../images/chambre/life\ is\ good.png) no-repeat center center / contain
}

#door_close{
  width: calc(1207px / 2.3);
  height: calc(2148px / 2.3);
  top: 2500px;
  left: -250px;
  display: block;
  background:url(../images/chambre/porte\ closed.png) no-repeat center center / contain
}

#door_open{
  width: calc(2125px / 2.3);
  height: calc(2800px / 2.3);
  top: 2500px;
  left: -400px;
  display: none;
  background:url(../images/chambre/porte\ opened.png) no-repeat center center / contain
}

#boy_sit{
  width: calc(1996px / 4);
  height: calc(2485px / 4);
  top: 2550px;
  left: 1900px;
  background:url(../images/persos/boy_sitdown.png) no-repeat center center / contain
}

#boy{
  position: absolute;
  width: calc(1659px / 4);
  height: calc(2986px / 4);
  top: 2800px;
  left: 0px;
  display: none;
  pointer-events: none;
  transform: translateX(-50%);
  background:url(../images/persos/boy.png) no-repeat center center / contain
}

#boy_flip2{
  position: absolute;
  width: calc(1659px / 6);
  height: calc(2986px / 6);
  top: 50%;
  left: 15%;
  transform: translate(-50%, -50%);
  display: none;
  pointer-events: none;
  z-index: 1001;
  background:url(../images/persos/boy_flip.png) no-repeat center center / contain
}

.texts{
  position: absolute;
  color: white;
  font-size: 70px;
  font-family: "lucida sans unicode", "lucida grande", sans-serif;
  font-weight: bold;
  text-align: left;
  text-shadow: 2px 2px 12px black;
  z-index: 1000;
  top: 20%;
  left: 25%;
  display: none;
  pointer-events: none;
}


/*outdoor*/
#bgoutdoor{
  width: calc(18000px / 2.3);
  height: calc(3922px / 2.3);
  top: 2000px;
  left: 3500px;
  background:url(../images/exterieur/exterieur.jpg) no-repeat center center / contain
}

#bunny1{
  width: calc(688px / 2.6);
  height: calc(688px / 2.6);
  top: 2900px;
  left: 6300px;
  display: block;
  transition: 
    left 0.2s ease,
    top 0.2s ease,
    width 0.2s ease,
    height 0.2s ease;
  background:url(../images/exterieur/bunny1.png) no-repeat center center / contain
}

#bunny2{
  width: calc(688px / 2.4);
  height: calc(688px / 2.4);
  top: 2920px;
  left: 5900px;
  display: block;
  transition: 
    left 0.2s ease,
    top 0.2s ease,
    width 0.2s ease,
    height 0.2s ease;
  background:url(../images/exterieur/bunny2.png) no-repeat center center / contain
}

#bunny3{
  width: calc(688px / 4);
  height: calc(688px / 4);
  top: 2780px;
  left: 6600px;
  display: block;
  transition: 
    left 0.2s ease,
    top 0.2s ease,
    width 0.2s ease,
    height 0.2s ease;
  background:url(../images/exterieur/bunny2.png) no-repeat center center / contain
}

#boy_flip{
  width: calc(1659px / 4);
  height: calc(2986px / 4);
  pointer-events: none;
  top: 2600px;
  left: 3800px;
  transform: translateX(-50%);
  background:url(../images/persos/boy_flip.png) no-repeat center center / contain
}

#girl_flip{
  width: calc(1644px / 4);
  height: calc(3356px / 4);
  pointer-events: none;
  top: 2600px;
  left: 9600px;
  display: none;
  z-index: 110;
  background:url(../images/persos/girl_flip.png) no-repeat center center / contain
}

#camioncrash{
  width: calc(1941px / 1.3);
  height: calc(2492px / 1.3);
  top: 1800px;
  left: 10400px;
  display: none;
  background:url(../images/exterieur/camioncrash.png) no-repeat center center / contain
}

/*crash*/
#bgcrash{
  width: calc(6972px / 2.3);
  height: calc(3922px / 2.3);
  top: 0px;
  left: 7000px;
  background:url(../images/crash/crash.jpg) no-repeat center center / contain
}

#girl{
  width: calc(1644px / 4);
  height: calc(3356px / 4);
  top: 700px;
  left: 7200px;
  transform: translateX(-50%);
  background:url(../images/persos/girl.png) no-repeat center center / contain
}

#crashhitbox{
  width: 1500px;
  height: 1200px;
  top: 200px;
  left: 8300px;
  display: none;
}

#final {
  position: absolute;
  width: 100vw;
  height: 100vh;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100000000;
  display: none;
}
#final video {
  width: 100vw;
  height: 100vh;
}

#screenfinal {
  opacity: 1;
  mix-blend-mode:normal;
}