*{margin:0;
padding:0;}

body{
  width:100%;
  height:100vh;
  font:20px/1.1em arial, sans-serif;
  background:rgb(148, 213, 225);
  display:flex;
  align-items:center;
  justify-content:center;}

#espace{
  display:block;
  margin: auto;
  width: 500px;
  height:500px;
  z-index:2}
#ocean{
  z-index: index 1;
  position:absolute;
  width:100%;
  height:100%;}

#titre{
  font-family:serif;
  font:Georgia (serif);
  position:absolute;
  z-index:50;
  left:10%;
  top:10%;
animation-name: titre ;
animation-duration: 5s;
animation-iteration-count: 1;

}

#notamment{
  font:georgia;
  position:absolute;
  z-index:50;
  left:10%;
  top:15%;}

/* BOUTON */
.btn{
  width: 120px;
  height: 50px;
  -webkit-border-radius: 12px / 24px;
  -moz-border-radius:    12px / 24px;
  border-radius:         12px / 24px;
  background-color: red;
  position: absolute;}
.btn p{
  display: none;}
.btn:hover p{
  display: block;}

/* BOUSSOLE */
#overlay{
  position: absolute;
  top: 60%;
  left: -5%;
  display:flex;
  align-items:center;
  justify-content:center;
  width:400px;
  height:300px;
  z-index: 9;}
.boussole{
  width: 200px;
  height: 200px;}
#cadran{
  position:absolute;
  border:10px solid rgb(255, 255, 255);
  background-color: #ff0000;
  height: 35px;
  border-radius: 75%;
  width: 35px;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 3;}
#nord{
  position:absolute;
  top: 29.1%;
  left: 49.3%;
  transform: translateX(-50%) translateY(-50%);
  width:200px;
  height:200px;
  background-color:red;
  -webkit-clip-path: polygon(50% 27%, 41% 83%, 62% 83%);
  clip-path: polygon(50% 27%, 41% 83%, 62% 83%);
  z-index: 2;}
#est{
  position:absolute;
  width:200px;
  height:200px;
  background-color:red;
  -webkit-clip-path: polygon(42% 42%, 42% 58%, 63% 50%);
  clip-path: polygon(42% 42%, 42% 58%, 63% 50%);
  top: 50%;
  left: 59%;
  transform: translateX(-50%) translateY(-50%);}
#ouest{
  position:absolute;
  width:200px;
  height:200px;
  top: 50%;
  left: 41%;
  transform: translateX(-50%) translateY(-50%);
  background-color:red;
  -webkit-clip-path: polygon(58% 42%, 58% 58%, 37% 50%);
  clip-path: polygon(58% 42%, 58% 58%, 37% 50%);}
#sud{
  position:absolute;
  width:200px;
  height:200px;
  top: 63%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  background-color:red;
  -webkit-clip-path: polygon(42% 42%, 58% 42%, 50% 63%);
  clip-path: polygon(42% 42%, 58% 42%, 50% 63%);}

/* ILES + Topographie */
#ile1{
  position:absolute;
  width: 500px;
  height:500px;
  background-color:rgb(22, 100, 22);
  -webkit-clip-path: polygon(44% 1%, 62% 5%, 68% 40%, 87% 64%, 89% 84%, 50% 100%, 20% 72%, 19% 30%);
  clip-path: polygon(44% 1%, 62% 5%, 68% 40%, 87% 64%, 89% 84%, 50% 100%, 20% 72%, 19% 30%);
  z-index: 1;}
#ile2{
  position:absolute;
  width:500px;
  height:500px;
  background-color:rgb(30, 117, 20);
  -webkit-clip-path: polygon(33% 37%, 31% 23%, 44% 7%, 59% 11%, 63% 32%, 60% 40%, 69% 49%, 83% 66%, 83% 82%, 58% 91%, 38% 75%, 48% 44%);
  clip-path: polygon(33% 37%, 31% 23%, 44% 7%, 59% 11%, 63% 32%, 60% 40%, 69% 49%, 83% 66%, 83% 82%, 58% 91%, 38% 75%, 48% 44%);
  z-index: 2;}
#ile3{
  position:absolute;
  width:500px;
  height:500px;
  background-color:rgb(26, 134, 22);
  -webkit-clip-path: polygon(38% 35%, 34% 22%, 44% 11%, 57% 13%, 59% 31%, 50% 42%);
  clip-path: polygon(38% 35%, 34% 22%, 44% 11%, 57% 13%, 59% 31%, 50% 42%);
  z-index: 3;}
#ile3b{
  position:absolute;
  width:500px;
  height:500px;
  background-color:rgb(26, 134, 22);
  -webkit-clip-path: polygon(58% 71%, 44% 69%, 46% 57%, 59% 53%, 69% 60%, 63% 76%);
  clip-path: polygon(58% 71%, 44% 69%, 46% 57%, 59% 53%, 69% 60%, 63% 76%);
  z-index: 4;}
#ile4h{
  position:absolute;
  width:500px;
  height:500px;
  background-color:rgb(28, 167, 25);
  -webkit-clip-path: polygon(37% 25%, 41% 16%, 49% 14%, 56% 19%, 44% 20%);
  clip-path: polygon(37% 25%, 41% 16%, 49% 14%, 56% 19%, 44% 20%);
  z-index: 5;}
#ile4b{
  position:absolute;
  width:500px;
  height:500px;
  background-color:rgb(28, 167, 25);
  -webkit-clip-path: polygon(56% 68%, 46% 68%, 48% 58%, 55% 55%, 57% 61%);
  clip-path: polygon(56% 68%, 46% 68%, 48% 58%, 55% 55%, 57% 61%);
  z-index: 5;}
#ile5b{
  position:absolute;
  width:500px;
  height:500px;
  background-color:rgb(25, 201, 46);
  -webkit-clip-path: polygon(48% 64%, 49% 58%, 54% 57%, 54% 63%);
  clip-path: polygon(48% 64%, 49% 58%, 54% 57%, 54% 63%);
  z-index: 6;}

/* LACS */
#lach{
  position:absolute;
  width:500px;
  height:500px;
  background-color:rgb(63, 241, 241);
  -webkit-clip-path: polygon(52% 23%, 56% 28%, 54% 33%, 48% 35%, 42% 33%, 40% 27%, 45% 23%);
  clip-path: polygon(52% 23%, 56% 28%, 54% 33%, 48% 35%, 42% 33%, 40% 27%, 45% 23%);
  z-index: 7;}
#lach2{
  position:absolute;
  width:500px;
  height:500px;
  background-color:rgb(49, 219, 219);
  -webkit-clip-path: polygon(53% 26%, 54% 32%, 48% 34%, 43% 32%, 42% 27%, 47% 24%);
  clip-path: polygon(53% 26%, 54% 32%, 48% 34%, 43% 32%, 42% 27%, 47% 24%);
  z-index: 8;}
#lacb{
  position:absolute;
  width:500px;
  height:500px;
  background-color:rgb(255, 143, 152);
  -webkit-clip-path: polygon(61% 76%, 63% 82%, 59% 85%, 52% 83%, 47% 78%, 48% 73%, 55% 73%);
  clip-path: polygon(61% 76%, 63% 82%, 59% 85%, 52% 83%, 47% 78%, 48% 73%, 55% 73%);
  z-index: 7;}
#lacb2{
  position:absolute;
  width:500px;
  height:500px;
  background-color:rgb(240, 128, 137);
  -webkit-clip-path: polygon(61% 78%, 60% 83%, 53% 82%, 48% 78%, 49% 75%, 55% 75%);
  clip-path: polygon(61% 78%, 60% 83%, 53% 82%, 48% 78%, 49% 75%, 55% 75%);
  z-index: 8;}

/* 2e ILE */
#pont{
  position:absolute;
  width:500px;
  height:500px;
  background-color:rgb(72, 58, 37);
  -webkit-clip-path: polygon(67% 38%, 68% 40%, 78% 35%, 77% 33%);
  clip-path: polygon(67% 38%, 68% 40%, 78% 35%, 77% 33%);
  z-index: 2;}

#ville{
  position:absolute;
  width:500px;
  height:500px;
  background-color:rgb(61, 60, 57);
  -webkit-clip-path: polygon(81% 21%, 88% 23%, 96% 33%, 96% 42%, 88% 47%, 80% 44%, 77% 33%, 76% 25%);
  clip-path: polygon(81% 21%, 88% 23%, 96% 33%, 96% 42%, 88% 47%, 80% 44%, 77% 33%, 76% 25%);
  z-index: 2;}

#cague {
  position:relative;
  left:82%;
  top:10%;
  width: 150px;
  height: 150px;
  background: radial-gradient(#c36d107c, #fcfcfc00);
  -webkit-border-radius: 150px / 190px;
  -moz-border-radius:    100px / 160px;
  border-radius:         200px / 300px;
  z-index: 1;}

/* ROCHERS */
#caillou1{
  position:absolute;
  width:500px;
  height:500px;
  background-color:#474646;

  -webkit-clip-path: polygon(16% 88%, 16% 92%, 10% 91%, 9% 86%);
  clip-path: polygon(16% 88%, 16% 92%, 10% 91%, 9% 86%);
  z-index: 1;}
#caillou2{
  position:absolute;
  width:500px;
  height:500px;
  background-color:#423e3b;
  -webkit-clip-path: polygon(13% 16%, 17% 14%, 13% 11%, 11% 13%);
  clip-path: polygon(13% 16%, 17% 14%, 13% 11%, 11% 13%);
  z-index: 1;}
#caillou3{
  position:absolute;
  width:500px;
  height:500px;
  background-color:rgb(137, 137, 137);
  -webkit-clip-path: polygon(65% 8%, 69% 8%, 71% 6%, 65% 3%);
  clip-path: polygon(65% 8%, 69% 8%, 71% 6%, 65% 3%);
  z-index: 1;}
#caillou4{
  position:absolute;
  width:500px;
  height:500px;
  background-color:#7a7775;
  -webkit-clip-path: polygon(92% 92%, 94% 94%, 93% 97%, 88% 98%, 87% 96%);
  clip-path: polygon(92% 92%, 94% 94%, 93% 97%, 88% 98%, 87% 96%);
  z-index: 1;}
#caillou5{
  position:absolute;
  width:500px;
  height:500px;
  background-color:rgb(104, 104, 104);
  -webkit-clip-path: polygon(71% 31%, 77% 34%, 76% 41%, 73% 40%, 69% 35%);
  clip-path: polygon(71% 31%, 77% 34%, 76% 41%, 73% 40%, 69% 35%);
  z-index: 1;}
#caillou6{
  position:absolute;
  width:500px;
  height:500px;
  background-color:rgb(121, 121, 121);
  -webkit-clip-path: polygon(99% 64%, 100% 69%, 97% 71%, 94% 68%, 96% 63%);
  clip-path: polygon(99% 64%, 100% 69%, 97% 71%, 94% 68%, 96% 63%);
  z-index: 1;}
#caillou7{
  position:absolute;
  width:500px;
  height:500px;
  background-color:rgb(121, 121, 121);
  -webkit-clip-path: polygon(94% 53%, 93% 57%, 88% 57%, 90% 53%);
  clip-path: polygon(94% 53%, 93% 57%, 88% 57%, 90% 53%);
  z-index: 1;}
#caillou8{
  position:absolute;
  width:500px;
  height:500px;
  background-color:#423e3b;
  -webkit-clip-path: polygon(3% 52%, 6% 59%, 1% 59%, 0 57%);
  clip-path: polygon(3% 52%, 6% 59%, 1% 59%, 0 57%);
  z-index: 1;}
#caillou9{
  position:absolute;
  width:500px;
  height:500px;
  background-color:rgb(133, 133, 133);
  -webkit-clip-path: polygon(31% 94%, 35% 99%, 30% 100%, 29% 96%);
  clip-path: polygon(31% 94%, 35% 99%, 30% 100%, 29% 96%);
  z-index: 1;}

#caillou10{
  position:absolute;
  width:500px;
  height:500px;
  background-color:rgb(133, 133, 133);
  -webkit-clip-path: polygon(14% 35%, 18% 34%, 16% 31%, 13% 33%);
  clip-path: polygon(14% 35%, 18% 34%, 16% 31%, 13% 33%);
  z-index: 1;}


/*partie ou justine rajoute des elements*/

  /*bouton (les 4carrer blanc) */
  .test{
    position: absolute;
    width: 30px;
    height: 20px;
    background: white;
    z-index: 99;
    border-radius: 25px;
    box-shadow: inset 1px 1px 5px grey;
  }

  .btn{
    width: 30px;
    height: 20px;
    opacity: 0;
    z-index: 99;
    cursor: pointer;
  }

  .info{
    position: absolute;
    opacity: 0;
    z-index: 90;
  }

  .btn:checked ~.info{
    opacity: 100%;
  }
  /*test1 photo des roches*/
  #test1{
    top:55%;
    left:30%;
  }

  /*test2 photo de la ville*/
  #test2{
    position: absolute;
    top:24%;
    left:59%;
  }

  img {
    width: 200px;
    height: 200px;
  }

  /*test3 photo de la foret*/
  #test3{
    position: absolute;
    top:38%;
    left:40%;
  }
  /*test4 photo du lac rose*/
  #test4{
    position: absolute;
    top:68%;
    left:48%;
  }

  /*test5 photo de la pollution*/
  #test5{
    position: absolute;
    top:20%;
    left:70%;
  }


/*fleche
.fleche {
font-size: 150px;
line-height: 0;
position:absolute;
z-index:80;
}

#fleche1{
  top:175px;
  left:350px;

  transform: rotate(10deg);
}

#fleche2{

  top:400px;
  left:330px;
}

#fleche3{
  top:40px;
  left:910px;
}

#fleche4{
  top:400px;
  left:1050px;
}*/

/*bouton*/
.clickme {
font-size: 8px
}
#clickme1{
  position:absolute;
  width:200px;
  height:100px;
  z-index: 99;
}

#clickme2{
  position:absolute;
  width:200px;
  height:100px;
  z-index: 99;
}

#clickme3{
  position:absolute;
  width:200px;
  height:100px;
  z-index: 99;
}

#clickme4{
  position:absolute;
  width:20px;
  height:20px;
  z-index: 99;
}

.sapin {
font-size: 19px;
line-height: 0;
position:absolute;
z-index:80;
}

#sapin1{
  top:247%;
  left:174%;
}

#sapin2{

  top: 40%;
left: 59%;

}

#sapin3{
  top:329px;
  left:550px;
}

#sapin4{
  top:310px;
  /*horizontalement*/
  left:570px;
}

#sapin5{
  top:265px;
  left:540px;
}

#sapin6{

  top:270px;
  left:560px;
}

#sapin7{
  top:300px;
  left:530px;
}

#sapin8{
  top:310px;
  /*horizontalement*/
  left:540px;
}

#sapin9{
  top:280px;
  left:545px;
}

#sapin10{

  top:420px;
  left:580px;
}

#sapin11{
  top:360px;
  left:550px;
}

#sapin12{
  top:380px;
  /*horizontalement*/
  left:570px;
}

#sapin13{
  top:355px;
  left:540px;
}

#sapin14{

  top:400px;
  left:560px;
}

#sapin15{
  top:400px;
  left:530px;
}

#sapin16{
  top:480px;
  /*horizontalement*/
  left:600px;
}

#sapin17{
  top:280px;
  left:645px;
}

#sapin18{
  top:230px;
  left:523px;
}

#sapin19{
  top:305px;
  left:625px;
}

#sapin20{
  top:344px;
  /*horizontalement*/
  left:580px;
}

#sapin21{
  top:465px;
  left:580px;
}

#sapin22{

  top:200px;
  left:560px;
}

#sapin23{
  top:300px;
  left:600px;
}

#sapin24{
  top:310px;
  /*horizontalement*/
  left:612px;
}

#sapin25{
  top:270px;
  left:615px;
}

#sapin26{

  top:430px;
  left:537px;
}

#sapin27{
  top:340px;
  left:616px;
}

#sapin28{
  top:380px;
  /*horizontalement*/
  left:590px;
}

#sapin29{
  top:355px;
  left:600px;
}

#sapin30{

  top:390px;
  left:610px;
}

#sapin31{
  top:400px;
  left:600px;
}

#sapin32{
  top:430px;
  /*horizontalement*/
  left:601px;
}


#rainbow1{
  top:450px;
  left:661px;
  font-size: 15px;
  line-height: 0;
  position:absolute;
  z-index:80;
}