/*pour ne pas avoir de marge*/
*{margin: 0;
}

#fleches{
  position: absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  width:600px;
  height:600px;
}

#f1{
  position:absolute;
  width: 600px;
  height:600px;
  background-color:rgb(255, 255, 255);
  -webkit-clip-path: polygon(33% 0, 31% 0, 40% 21%);
  clip-path: polygon(33% 0, 31% 0, 40% 21%);
}

#f2{
  position:absolute;
  width:600px;
  height:600px;
  background-color:rgb(255, 255, 255);
  -webkit-clip-path: polygon(60% 0, 58% 0, 51% 22%);
  clip-path: polygon(60% 0, 58% 0, 51% 22%);
}

#f3{
  position:absolute;
  z-index:11;
  width:600px;
  height:600px;
  background-color:rgb(255, 255, 255);
  -webkit-clip-path: polygon(8% 45%, 7% 46%, 26% 52%);
  clip-path: polygon(8% 45%, 7% 46%, 26% 52%);
}

#f4{
  position:absolute;
  width:600px;
  height:600px;
  z-index:10;
  background-color:rgb(255, 255, 255);
  -webkit-clip-path: polygon(97% 27%, 97% 29%, 72% 43%);
  clip-path: polygon(97% 27%, 97% 29%, 72% 43%);
}

#overlay{
  position: absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  width:600px;
  height:600px;
  top:15%;
  z-index: 9;}

#montagne{
  left: -62%;
  top: -10%;
  position: absolute;
  z-index: 3;
}

#pic{
  position: absolute;
  z-index: 3;
  top: 0%;
  left: -63%;
}

#ville{
  position: absolute;
  z-index: 4;
  top: 0%;
  left: -68%;
}

#boutons{
  position: absolute;
  z-index: 20;
  top: -15%;
  left: -60%;
}

#titre{
  font-family:serif;
  font:Georgia (serif);
  position:absolute;
  z-index:50;
  left:5%;
  top:8%;
}


body{
  font:20px/1.1em arial, sans-serif;
  background:#9494e8;
  background: rgb(184,184,184);
 background: radial-gradient(circle, rgba(184,184,184,1) 0%, rgba(219,218,244,1) 0%, rgba(143,142,229,1) 44%,
  rgba(97,95,219,1) 100%, rgba(148,148,232,1) 100%);

  /* CENTRE ÉLÉMENT */
  display: flex;
  align-items: center;
  justify-content: center;
  height:100vh;

}

/*le corps de l'ile*/
#circle1 {
  z-index:1;
  position: absolute;
  width: 400px;
  height: 400px;
  opacity: 30;
  background-color:#30a832;
  border-radius: 50%;
  /* 25 et 26 et 27 degrader */
  background: rgb(48,168,50);
 background: radial-gradient(circle, rgba(48,168,50,1) 0%,
  rgba(48,168,50,1) 29%, rgba(14,61,15,1) 98%);
/* note a moi meme pour retenir comment faire
une bordure: border: 4px solid #472307;*/

}

/*le cercle2 et "transparent" il est de la meme couleur
 que la "mer" et sert a faire la baie circulaire*/
#circle2 {
  position:absolute;
  height: 200px;
  top: 120px;
  left:310px;
  transform:rotate (30°);
  width: 100px;
  height: 200px;
  background-color:#a5a5f5;
  border-radius: 50%;
  z-index: 1;
background: rgb(192, 189, 236);
background: linear-gradient(90deg,
   rgb(199, 197, 234) 0%, rgb(177, 174, 237) 100%);
}

/*le cercle3 est celui qui fait une petite
pointe ( celui qui "encercle" la baie)*/
#circle3 {
  width: 20%;
  position: absolute;
  height: 9vh;
  top: 331px;
  left: 247px;
  background-color:#1a631b;
  border-radius: 50%;
  margin-top: -150px;
  margin-left: 150px;
  transform:rotate(30deg)
}

/*le cercle4 est une erreur il est cacher
derriere l'ile donc si t'arrive a l'enlever
c'est super xD*/
#circle4 {
  width: 20%;
  height:20vh;
  background-color:rgba(255, 0, 0, 0);
  border-radius: 50%;
  margin-top: 150px;
  margin-left: 155px;
}

/*moon est le semblant de crete xD*/
#moon {
  width: 156px;
  height: 197px;
  border-radius: 150%;
  box-shadow: 15px 15px 0 0 #32323a;
  position: relative;
  z-index: 10;
  margin-top: -6px;
  margin-left: 272px;
  transform: rotate(195deg);
}

/*les triangles 1/2/3/4/5 sont les montagnes*/
#triangle-up1 {
  width: 0px;
  height: 0px;
  left: 550px;
  top: 100px;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 100px solid #737a73;
  position: absolute;
  z-index: 0;
}

#triangle-up2 {
  width: 0px;
  height: 0px;
  left: 600px;
  top: 100px;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 100px solid #737a73;
  position: absolute;
  z-index: 0;
}
#triangle-up3 {
  width: 0px;
  height: 0px;
  left: 700px;
  top: 100px;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-bottom: 100px solid #737a73;
  position: absolute;
  z-index: 0;
}

#triangle-up4 {
  width: 0px;
  height: 0px;
  left: 770px;
  top: 100px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 100px solid #737a73;
  position: absolute;
  z-index: 0;
}

#triangle-up5 {
  width: 0px;
  height: 0px;
  left: 730px;
  top: 100px;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 100px solid #737a73;
  position: absolute;
  z-index: 0;
}

/*les eggs represente les differentes couleurs
(du plus clair le 1 au plus foncer le 7)
de la foret de Roubaix*/
#egg1 {
  display: block;
  width: 100px;
  height: 60px;
  left: 625px;
  top:145px;
  background-color:#144915;
  border-radius: 50% 50% 50% 50%/ 60% 60% 40% 40%;
  position:absolute;
  z-index: 0;
}

/*le triangle7 est le Pic du Rasmus*/
#triangle-up7 {
  width: 0px;
  height: 0px;
  left: 500px;
  top: 230px;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 150px solid #3e443e;
  position: absolute;
  z-index: 0;
}

/*les circle5/6/7/8/9/10 sont les petits buisson
au pied du Pic du Rasmus*/
#circle5 {
  position: absolute;
  width: 20px;
  height: 20px;
  left: 500px;
  top:350px;
  opacity: 30;
  background-color:#0c3a0d;
  border-radius: 50%;
}

#circle6 {
  position: absolute;
  width: 20px;
  height: 20px;
  /*se depplace horizontalement*/
  left: 492px;
  /*se deplace verticalement*/
  top:360px;
  opacity: 30;
  background-color:#0c3a0d;
  border-radius: 50%;
}

#circle7 {
  position: absolute;
  width: 20px;
  height: 20px;
  left: 510px;
  top:360px;
  opacity: 30;
  background-color:#0c3a0d;
  border-radius: 50%;
}

#circle8 {
  position: absolute;
  width: 20px;
  height: 20px;
  left: 580px;
  top:350px;
  opacity: 30;
  background-color:#0c3a0d;
  border-radius: 50%;
}


#circle9 {
  position: absolute;
  width: 20px;
  height: 20px;
  left: 574px;
  top:360px;
  opacity: 30;
  background-color:#0c3a0d;
  border-radius: 50%;
}

#circle10 {
  position: absolute;
  width: 20px;
  height: 20px;
  left: 592px;
  top:360px;
  opacity: 30;
  background-color:#0c3a0d;
  border-radius: 50%;
}

/*les eggs represente les differentes couleurs
(du plus clair le 1 au plus foncer le 7)
de la foret de Roubaix*/
#egg2 {
  display: block;
  width: 90px;
  height: 50px;
  /*se depplace horizontalement*/
  left: 630px;
    /*se deplace verticalement*/
  top:145px;
  background-color:#165417;
  border-radius: 50% 50% 50% 50%/ 60% 60% 40% 40%;
  position:absolute;
  z-index: 1;
}

#egg3 {
  display: block;
  width: 80px;
  height: 40px;
  left: 635px;
  top:145px;
  background-color:#185919;
  border-radius: 50% 50% 50% 50%/ 60% 60% 40% 40%;
  position:absolute;
  z-index: 2;
}


#egg4 {
  display: block;
  width: 70px;
  height: 30px;
  left: 640px;
  top:145px;
  background-color:#1a631c;
  border-radius: 50% 50% 50% 50%/ 60% 60% 40% 40%;
  position:absolute;
  z-index: 3;
}

#egg5 {
  display: block;
  width: 60px;
  height: 20px;
  left: 645px;
  top:145px;
  background-color:#207721;
  border-radius: 50% 50% 50% 50%/ 60% 60% 40% 40%;
  position:absolute;
  z-index: 4;
}

#egg6 {
  display: block;
  width: 50px;
  height: 10px;
  left: 650px;
  top:145px;
  background-color:#238224;
  border-radius: 50% 50% 50% 50%/ 60% 60% 40% 40%;
  position:absolute;
  z-index: 5;
}

#egg7 {
  display: block;
  width: 40px;
  height: 5px;
  left: 655px;
  top:145px;
  background-color:#248c26;
  /*border radius pour faire des arrondi*/
  border-radius: 50% 50% 50% 50%/ 60% 60% 40% 40%;
  position:absolute;
  z-index: 6;
}

/*les 15 carrer represente la ville*/
#carre1 {
  display: block;
  width: 10px;
  height: 10px;
  /*se deplace horizontalement*/
  left:825px;
    /*se deplace verticalement*/
  top:220px;
  background-color:#191c19;
  position:absolute;
  z-index: 11;
}

#carre2 {
  display: block;
  width: 13px;
  height: 13px;
  /*se deplace horizontalement*/
  left:810px;
    /*se deplace verticalement*/
  top:225px;
  background-color:#191c19;
  position:absolute;
  z-index: 11;
}

#carre3 {
  display: block;
  width: 10px;
  height: 10px;
  /*se deplace horizontalement*/
  left:800px;
    /*se deplace verticalement*/
  top:250px;
  background-color:#191c19;
  position:absolute;
  z-index: 11;
}

#carre4 {
  display: block;
  width: 15px;
  height: 15px;
  /*se deplace horizontalement*/
  left:780px;
    /*se deplace verticalement*/
  top:270px;
  background-color:#191c19;
  position:absolute;
  z-index: 11;
}

#carre5 {
  display: block;
  width: 9px;
  height: 9px;
  /*se deplace horizontalement*/
  left:780px;
    /*se deplace verticalement*/
  top:290px;
  background-color:#191c19;
  position:absolute;
  z-index: 11;
}

#carre6 {
  display: block;
  width: 5px;
  height: 5px;
  /*se deplace horizontalement*/
  left:780px;
    /*se deplace verticalement*/
  top:300px;
  background-color:#191c19;
  position:absolute;
  z-index: 11;
}


#carre7 {
  display: block;
  width: 10px;
  height: 10px;
  /*se deplace horizontalement*/
  left:790px;
    /*se deplace verticalement*/
  top:350px;
  background-color:#191c19;
  position:absolute;
  z-index: 11;
}

#carre8 {
  display: block;
  width: 15px;
  height: 15px;
  /*se deplace horizontalement*/
  left:800px;
    /*se deplace verticalement*/
  top:400px;
  background-color:#191c19;
  position:absolute;
  z-index: 11;
}

#carre9 {
  display: block;
  width: 5px;
  height: 5px;
  /*se deplace horizontalement*/
  left:800px;
    /*se deplace verticalement*/
  top:330px;
  background-color:#191c19;
  position:absolute;
  z-index: 11;
}

#carre10 {
  display: block;
  width: 10px;
  height: 10px;
  /*se deplace horizontalement*/
  left:800px;
    /*se deplace verticalement*/
  top:366px;
  background-color:#191c19;
  position:absolute;
  z-index: 11;
}
#carre11 {
  display: block;
  width: 10px;
  height: 10px;
  /*se deplace horizontalement*/
  left:775px;
    /*se deplace verticalement*/
  top:370px;
  background-color:#191c19;
  position:absolute;
  z-index: 11;
}

#carre12 {
  display: block;
  width: 13px;
  height: 13px;
  /*se deplace horizontalement*/
  left:820px;
    /*se deplace verticalement*/
  top:420px;
  background-color:#191c19;
  position:absolute;
  z-index: 11;
}

#carre13 {
  display: block;
  width: 7px;
  height: 7px;
  /*se deplace horizontalement*/
  left:790px;
    /*se deplace verticalement*/
  top:310px;
  background-color:#191c19;
  position:absolute;
  z-index: 11;
}

#carre14 {
  display: block;
  width: 7px;
  height: 7px;
  /*se deplace horizontalement*/
  left:795px;
    /*se deplace verticalement*/
  top:240px;
  background-color:#191c19;
  position:absolute;
  z-index: 11;
}

#carre15 {
  display: block;
  width: 7px;
  height: 7px;
  /*se deplace horizontalement*/
  left:803px;
    /*se deplace verticalement*/
  top:275px;
  background-color:#191c19;
  position:absolute;
  z-index: 11;
}

/*le triangle 8/9/10/11 c'est la "neige" sur le
 Pic du Rasmus*/
#triangle-up8 {
  width: 0px;
  height: 0px;
    /*se deplace horizontalement*/
  left: 533px;
    /*se deplace verticalement*/
  top: 280px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid #fcf9f9;
  position: absolute;
  z-index: 7;
  transform: rotate(180deg);
}

#triangle-up9 {
  width: 0px;
  height: 0px;
  left: 545px;
    /*se deplace verticalement*/
  top: 280px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid #fcf9f9;
  position: absolute;
  z-index: 7;
  transform: rotate(180deg);
}

#triangle-up10 {
  width: 0px;
  height: 0px;
  left: 556px;
    /*se deplace verticalement*/
  top: 280px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid #fcf9f9;
  position: absolute;
  z-index: 7;
  transform: rotate(180deg);
}

#triangle-up11 {
  width: 0px;
  height: 0px;
  left: 533px;
    /*se deplace verticalement*/
  top: 230px;
  border-left: 17px solid transparent;
  border-right: 17px solid transparent;
  border-bottom: 50px solid #fcf9f9;
  position: absolute;
  z-index: 7;
}



/*bouton (les 4carrer blanc) */
.test{

  width: 30px;
  height: 30px;
  background: #ff0000;
    z-index: 99;
}

.btn{
  width: 30px;
  height: 30px;
  opacity: 0;
}

.info{
  opacity: 0;
  z-index:99;
}

.btn:checked ~ .info{
  opacity: 100%;
  background-color:white;
  z-index:99;
}

/*test1 photo de la foret de Roubaix*/
#test1{
  position: absolute;
  top:40px;
  left:695px;
  border-radius: 50%;
  display: inline-block;
  z-index:99;
  border:5px solid rgb(255, 255, 255); 
}

/*test2 photo des montagnes*/
#test2{
  position: absolute;
  top:40px;
  left:535px;
  border-radius: 50%;
  display: inline-block;
  z-index:99;
  border:5px solid rgb(255, 255, 255); 
}

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

/*test3 photo de la baie,la crete et de la ville*/
#test3{
  position: absolute;
  top:200px;
  left:941px;
  border-radius: 50%;
  display: inline-block;
  z-index:99;
  border:5px solid rgb(255, 255, 255); 
}
/*test4 photo du Pic du Rasmus*/
#test4{
  position: absolute;
  top:293px;
  left:370px;
  border-radius: 50%;
  display: inline-block;
  z-index:99;
  border:5px solid rgb(255, 255, 255); 
}

#test5{
  position: absolute;
  width:15px;
  height:15px;
  top:408px;
  left:723px;
  background-color: #191c19;
}

/*debut de creation d'arbre*/
#rectangle1 {
  width: 5px;
  height: 15px;
  background-color: #40270700;
  top: 200Px;
  left:535px;
  position: absolute;
  z-index: 7;
  transform: rotate(180deg);
}