* {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:7680px;
  height:4320px;
  background:url(../images/ImgFondGrandeResolution.png) no-repeat center center / 100% auto;
}



/* Item */

.item {
  position:absolute;
  width: 100px;
  height: 50px;
  padding: 17px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: now;
  color: rgb(0, 0, 0);
  background: url(../images/ImgFondTexte.png) no-repeat center center / contain;
  z-index: 12;
}
#item1 {
  top: 800px;
  left: 800px;
}
#item2 {
  top: 70px;
  left: 3900px;
}
#item3 {
  top: 3000px;
  left: 610px;
}
#item4 {
  top: 500px;
  left: 7100px;
}
#item5 {
  top: 2000px;
  left: 1100px;
}
#item6 {
  top: 3850px;
  left: 3850px;
}
#item7 {
  top: 3200px;
  left: 1500px;
}
#item8 {
  top: 3550px;
  left: 2450px;
}
#item9 {
  top: 2400px;
  left: 6000px;
}
#item10 {
  top: 400px;
  left: 5000px;
}
#item11 {
  top: 500px;
  left: 1100px;
}

.itemNon {
  position:absolute;
  width: 100px;
  height: 50px;
  padding: 17px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: now;
  color: rgb(0, 0, 0);
  background: url(../images/ImgFondTexteNon.png) no-repeat center center / contain;
  z-index: 12;
}
#item1Non {
  top: 800px;
  left: 800px;
}
#item2Non {
  top: 70px;
  left: 3900px;
}
#item3Non {
  top: 3000px;
  left: 610px;
}
#item4Non {
  top: 500px;
  left: 7100px;
}
#item5Non {
  top: 2000px;
  left: 1100px;
}
#item6Non {
  top: 3850px;
  left: 3850px;
}
#item7Non {
  top: 3200px;
  left: 1500px;
}
#item8Non {
  top: 3550px;
  left: 2450px;
}
#item9Non {
  top: 2400px;
  left: 6000px;
}
#item10Non {
  top: 400px;
  left: 5000px;
}
#item11Non {
  top: 500px;
  left: 1100px;
}

/* Feuille */
#feuille {
  position: absolute;
  top: 1450px;
  left: 2740px;
  width: 100px;
  height: 100px;
  background: url(../images/Feuille.png) no-repeat center center / contain;
}
#feuille1 {
  position: absolute;
  top: 1650px;
  left: 3630px;
  
  width:  100px;
  height:  100px;
  background: url(../images/feuille1.png) no-repeat center center / contain;
  z-index: 11;
}
#feuille2 {
  position: absolute;
  top: 1980px;
  left: 3390px;
  
  width:  100px;
  height:  100px;
  background: url(../images/feuille2.png) no-repeat center center / contain;
  z-index: 11;
}
#feuille3 {
  position: absolute;
  top: 1900px;
  left: 3650px;
  
  width:  100px;
  height:  100px;
  background: url(../images/feuille3.png) no-repeat center center / contain;
  z-index: 11;
}
#feuille4 {
  position: absolute;
  top: 2250px;
  left: 3350px;
  
  width:  100px;
  height:  100px;
  background: url(../images/feuille4.png) no-repeat center center / contain;
  z-index: 11;
}
#feuille5 {
  position: absolute;
  top: 2400px;
  left: 3760px;

  width:  100px;
  height:  100px;
  background: url(../images/feuille5.png) no-repeat center center / contain;
  z-index: 11;
}
#feuille6 {
  position: absolute;
  top: 2320px;
  left: 3500px;
  
  width:  100px;
  height:  100px;
  background: url(../images/feuille6.png) no-repeat center center / contain;
  z-index: 11;
}
#feuille7 {
  position: absolute;
  top: 2500px;
  left: 4060px; 
  width:  100px;
  height:  100px;
  background: url(../images/feuille7.png) no-repeat center center / contain;
  z-index: 11;
}
#feuille8 {
  position: absolute;
  top: 2750px;
  left: 3460px; 
  width:  100px;
  height:  100px;
  background: url(../images/feuille8.png) no-repeat center center / contain;
  z-index: 11;
}
#feuille9 {
  position: absolute;
  top: 2850px;
  left: 3900px; 
  width:  100px;
  height:  100px;
  background: url(../images/feuille9.png) no-repeat center center / contain;
  z-index: 11;
}
#feuille10 {
  position: absolute;
  top: 2890px;
  left: 3550px; 

  width:  100px;
  height:  100px;
  background: url(../images/feuille10.png) no-repeat center center / contain;
  z-index: 11;
}
#feuille11 {
  position: absolute;
  top: 3010px;
  left: 3950px; 
  width:  100px;
  height:  100px;
  background: url(../images/feuille11.png) no-repeat center center / contain;
  z-index: 11;
}
#feuille12 {
  position: absolute;
  top: 3200px;
  left: 3700px; 
  width:  100px;
  height:  100px;
  background: url(../images/feuille12.png) no-repeat center center / contain;
  z-index: 11;
}
#feuille13 {
  position: absolute;
  top: 3265px;
  left: 3980px;
  width:  100px;
  height:  100px;
  background: url(../images/feuille13.png) no-repeat center center / contain;
  z-index: 11;
}
#feuille14 {
  position: absolute;
  top: 3500px;
  left: 3630px; 
  width:  100px;
  height:  100px;
  background: url(../images/feuille14.png) no-repeat center center / contain;
  z-index: 11;
}
#feuille15 {
  position: absolute;
  top: 3640px;
  left: 3800px; 
  width:  100px;
  height:  100px;
  background: url(../images/feuille15.png) no-repeat center center / contain;
  z-index: 11;
}

.brille{
  filter: drop-shadow(0 0 12px gold); 
}


/* Lignes */
#ligne1 {
  top: 1000px;
  left: 2400px;
  
  width: 2261px;
  height: 3259px;
  position: absolute;
  background: url(../images/ligne1.svg) no-repeat center center / contain;
}
#ligne2 {
  top: 1000px;
  left: 2400px;
  
  width: 2261px;
  height: 3259px;
  position: absolute;
  background: url(../images/ligne2.svg) no-repeat center center / contain;
}
#ligne3 {
  top: 1000px;
  left: 2400px;
  
  width: 2261px;
  height: 3259px;
  position: absolute;
  background: url(../images/ligne3.svg) no-repeat center center / contain;
}
#ligne4 {
  top: 1000px;
  left: 2400px;
  
  width: 2261px;
  height: 3259px;
  position: absolute;
  background: url(../images/ligne4.svg) no-repeat center center / contain;
}
#ligne5 {
  top: 1000px;
  left: 2400px;
  
  width: 2261px;
  height: 3259px;
  position: absolute;
  background: url(../images/ligne5.svg) no-repeat center center / contain;
}
#ligne6 {
  top: 1000px;
  left: 2400px;
  
  width: 2261px;
  height: 3259px;
  position: absolute;
  background: url(../images/ligne6.svg) no-repeat center center / contain;
}
#ligne7 {
  top: 1000px;
  left: 2400px;
  
  width: 2261px;
  height: 3259px;
  position: absolute;
  background: url(../images/ligne7.svg) no-repeat center center / contain;
}
#ligne8 {
  top: 1000px;
  left: 2400px;
  
  width: 2261px;
  height: 3259px;
  position: absolute;
  background: url(../images/ligne8.svg) no-repeat center center / contain;
}
#ligne9 {
  top: 1000px;
  left: 2400px;
  
  width: 2261px;
  height: 3259px;
  position: absolute;
  background: url(../images/ligne9.svg) no-repeat center center / contain;
}
#ligne10 {
  top: 1000px;
  left: 2400px;
  
  width: 2261px;
  height: 3259px;
  position: absolute;
  background: url(../images/ligne10.svg) no-repeat center center / contain;
}
#ligne11 {
  top: 1000px;
  left: 2400px;
  
  width: 2261px;
  height: 3259px;
  position: absolute;
  background: url(../images/ligne11.svg) no-repeat center center / contain;
}
#ligne12 {
  top: 1000px;
  left: 2400px;
  
  width: 2261px;
  height: 3259px;
  position: absolute;
  background: url(../images/ligne12.svg) no-repeat center center / contain;
}
#ligne13 {
  top: 1000px;
  left: 2400px;
  
  width: 2261px;
  height: 3259px;
  position: absolute;
  background: url(../images/ligne13.svg) no-repeat center center / contain;
}
#ligne14 {
  top: 1000px;
  left: 2400px;
  
  width: 2261px;
  height: 3259px;
  position: absolute;
  background: url(../images/ligne14.svg) no-repeat center center / contain;
}
#ligne15 {
  top: 1000px;
  left: 2400px;
  
  width: 2261px;
  height: 3259px;
  position: absolute;
  background: url(../images/ligne15.svg) no-repeat center center / contain;
}


/* Raillures */
#rayer1 {
  position: absolute;
  top: 1865px;
  left: 2920px;
  width: 110px;
  height: 110px;
  background: url(../images/rayer.svg) no-repeat center center / contain;
  z-index: 10;
}
#rayer2 {
  position: absolute;
  top: 2120px;
  left: 2825px;
  width: 100px;
  height: 100px;
  background: url(../images/rayer.svg) no-repeat center center / contain;
  z-index: 10;
}
#rayer3 {
  position: absolute;
  top: 2545px;
  left: 4430px;
  width: 150px;
  height: 150px;
  background: url(../images/rayerGrand.svg) no-repeat center center / contain;
  z-index: 10;

}
#rayer4 {
  position: absolute;
  top: 2795px;
  left: 4190px;
  width: 100px;
  height: 100px;
  background: url(../images/rayer.svg) no-repeat center center / contain;
  z-index: 10;

}
#rayer5 {
  position: absolute;
  top: 2947px;
  left: 3100px;
  width: 170px;
  height: 150px;
  background: url(../images/rayerGrand.svg) no-repeat center center / contain;
  z-index: 10;

}
#rayer6 {
  position: absolute;
  top: 3470px;
  left: 3520px;
  width: 100px;
  height: 100px;
  background: url(../images/rayer.svg) no-repeat center center / contain;
  z-index: 10;

}

/* Animation */
.tourne {
  animation: tourne 0.5s ease-in-out infinite;
  transform-origin: center;
}


@keyframes tourne {
  0%   { transform: rotate(-8deg); }
  40%  { transform: rotate(8deg); }
  50%  { transform: rotate(8deg); }
  90%  { transform: rotate(-8deg); }
  100% { transform: rotate(-8deg); }
}

/* Poème */

.poeme {
  position: absolute;
  font-family: now;
  font-size: 35px;
}

#titre{
  top: 1300px;
  left: 3000px;
  font-size: 50px;
}

#auteur{
  top: 1350px;
  left: 3000px;
  font-size: 50px;
}

#vers1{
  top: 1600px;
  left: 3500px;
}
#vers2{
  top: 1900px;
  left: 2800px;
}
#vers3{
  top: 1950px;
  left: 3850px;
}
#vers4{
  top: 2150px;
  left: 2800px;
}
#vers5{
  top: 2300px;
  left: 3800px;
}
#vers6{
  top: 2500px;
  left: 2800px;
}
#vers7{
  top: 2600px;
  left: 4200px;
}
#vers8{
  top: 2700px;
  left: 2900px;
}
#vers9{
  top: 2830px;
  left: 4100px;
}
#vers10{
  top: 3000px;
  left: 3000px;
}
#vers11{
  top: 3100px;
  left: 4200px;
}
#vers12{
  top: 3250px;
  left: 2980px;
}
#vers13{
  top: 3350px;
  left: 4200px;
}
#vers14{
  top: 3500px;
  left: 3200px;
}
#vers15{
  top: 3650px;
  left: 4100px;
}

.barre {
  position: absolute;
  width:  200px;
  height:  100%;
  top: 0px;
  right : 0px;
  filter: drop-shadow(0 0 4px rgb(153, 153, 153));
  z-index: 15;
}

#barre1 {
  background: url(../images/barre1.png) no-repeat center center / contain;
}
#barre2 {
  background: url(../images/barre2.png) no-repeat center center / contain;
}
#barre3 {
  background: url(../images/barre3.png) no-repeat center center / contain;
}
#barre4 {
  background: url(../images/barre4.png) no-repeat center center / contain;
}
#barre5 {
  background: url(../images/barre5.png) no-repeat center center / contain;
}
#barre6 {
  background: url(../images/barre6.png) no-repeat center center / contain;
}
#barre7 {
  background: url(../images/barre7.png) no-repeat center center / contain;
}
#barre8 {
  background: url(../images/barre8.png) no-repeat center center / contain;
}
#barre9 {
  background: url(../images/barre9.png) no-repeat center center / contain;
}
#barre10 {
  background: url(../images/barre10.png) no-repeat center center / contain;
}
#barre11 {
  background: url(../images/barre11.png) no-repeat center center / contain;
}
#barre12 {
  background: url(../images/barre12.png) no-repeat center center / contain;
}
#barre13 {
  background: url(../images/barre13.png) no-repeat center center / contain;
}
#barre14 {
  background: url(../images/barre14.png) no-repeat center center / contain;
}
#barre15 {
  background: url(../images/barre15.png) no-repeat center center / contain;
}
#barre16 {
  background: url(../images/barre16.png) no-repeat center center / contain;
}