/* supprime les marges en bord d'écran */
*{
  margin:0;
  padding:0;
}

body{
  display:flex;
  align-items:center;
  justify-content:center;
}

/* mer, le z-index en négatif me permet d'être sûre qu'aucun autre éléménts que j'ajouterai ensuite ne passera derrière le fond 
le z-index permet de définir la position en "profondeur" des différents éléments en css ; qu'est-ce qui apparaît devant ou derrière tel objet */
.background {
  height:100vh; /*vw (viewport height) sert à adapter l'image à la zone de l'écran en hauteur en fonction du pourcentage appliqué */
  width:100vw; /* vw (viewport width) sert à adapter l'image à la zone de l'écran en largeur en fonction du pourcentage appliqué */
  object-fit:fill; /* sert à remplir la fenêtre avec l'élément sélectionné en rognant, étirant ou mis à l'échelle de l'élément qui le contient */
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  z-index:-1;
  }

  /*je n'ai pas réussi à la centrer correctement */
#ile
{
  width:1100px;
  height:800px;
}

/* la structure de l'île n'est pas terminée, je voulais lui donner une forme moins symétrique pour ajouter une légère dimension de perspective */
.fondile
{
  border-radius:45%;
  width:1100px;
  height:800px;
  position:absolute;
  top:2%;
  left:13%;
  z-index:2;
    }

/*pour faire le volcan j'ai utilisé le clip-path
le clip-path fonctionne comme un masque d'écrêtage, il rogne une partie de l'image pour qu'elle ne soit pas visible donc on ne la voit entièrement pas mais elle est toujours là,
dans le cas du volcan par exemple j'ai utilisé une image réctangulaire  de volcan et avec ce site internet https://www.cssportal.com/css-clip-path-generator/ j'ai pu importer mon image et sélectionner la portion de celle-ci (le volcan) que je souhaitais garder
donc sur la page on clique sur : upload image > custom polygon, puis on "détoure" l'élément qui nous intéresse (mais attention, c'est bien toute l'image qui figure sur la page même si on ne la voit pas)
ensuite il ne reste plus qu'à copier le code ("-webkit-clip-path[...]") qui s'affiche et l'appliquer au css de l'image qu'il faudra ensuite positionner dans la page */
.volcan{
  top:25%;
  left:34%;
  z-index:9;
  position: absolute;
  height: 350px;
  width: 500px;
}
/*
{
  border-radius:30%;
  width:300px;
  height:200px;
  position:absolute;
  -webkit-clip-path: polygon(28% 48%, 34% 59%, 20% 70%, 13% 84%, 21% 92%, 45% 91%, 66% 94%, 88% 90%, 100% 83%, 85% 74%, 74% 60%, 71% 36%, 65% 18%, 48% 6%, 29% 7%, 21% 26%);
clip-path: polygon(28% 48%, 34% 59%, 20% 70%, 13% 84%, 21% 92%, 45% 91%, 66% 94%, 88% 90%, 100% 83%, 85% 74%, 74% 60%, 71% 36%, 65% 18%, 48% 6%, 29% 7%, 21% 26%);
  top:31%;
  left:37%;
  z-index:5;
}*/

/* même méthode que pour le volcan */
.river1
{
  width:712px;
  height:700px;
  position:absolute;
  top:15%;
  left:27%;
  z-index:11;
}
.river2{
  width:712px;
  height:700px;
  position:absolute;
  top:10%;
  left:57%;
  z-index:11;
}
.river3{
  width:712px;
  height:700px;
  position:absolute;
  top:3%;
  left: 4%;
  z-index:3;
}
.river4{
  width:712px;
  height:700px;
  position:absolute;
  top:3%;
  left: -20%;
  z-index:3;
}
.river5{
  width:712px;
  height:700px;
  position:absolute;
  top:22%;
  left:77%;
  z-index:11;
}

/* sert à appliquer une rotation à l'image 


.rivière2
{
  width:690px;
  height:100;
  position:absolute;
  transform:rotate(165deg);
  border-bottom-right-radius:90%;
  border-bottom-left-radius:20%;
  -webkit-clip-path: polygon(0% 45%, 3% 43%, 6% 43%, 9% 42%, 13% 42%, 16% 43%, 19% 42%, 24% 41%, 27% 39%, 31% 36%, 34% 33%, 37% 32%, 38% 31%, 41% 30%, 44% 29%, 47% 30%, 50% 31%, 53% 32%, 57% 34%, 62% 35%, 65% 36%, 66% 36%, 69% 36%, 71% 36%, 74% 38%, 76% 43%, 78% 47%, 81% 50%, 83% 53%, 88% 57%, 90% 59%, 93% 60%, 96% 61%, 100% 61%, 100% 67%, 97% 69%, 91% 69%, 88% 67%, 85% 64%, 84% 64%, 82% 62%, 78% 60%, 76% 57%, 71% 53%, 70% 52%, 68% 51%, 66% 48%, 63% 46%, 60% 45%, 59% 45%, 56% 45%, 53% 46%, 51% 45%, 49% 43%, 47% 42%, 46% 42%, 45% 42%, 42% 44%, 38% 46%, 36% 47%, 30% 50%, 25% 51%, 25% 52%, 21% 52%, 16% 53%, 14% 53%, 11% 54%, 8% 54%, 5% 54%, 2% 53%, 1% 53%);
  top:20%;
  left:47%;
  z-index:4;
} */
/* mountains */
.rock1
{
  width:245px;
  height:235px;
  position:absolute;
  top:35%;
  left:29%;
  z-index:10;
  
}

.rock2
{
  width:200px;
  height:200px;
  position:absolute;
  top:39%;
  left:55%;
  z-index:10;
}

.rock3
{
  width:200px;
  height:250px;
  position:absolute;
  top:42%;
  left:36%;
  z-index:10;
}
/* field avec superposition */
.champ
{
  width:150px;
  height:150px;
  position:absolute;
  top:58%;
  left:15%;
  z-index:3;
  opacity: 0.7;
} 
.champ1{
  width:150px;
  height:150px;
  position:absolute;
  top:58%;
  left:19%;
  z-index:4;
  opacity: 0.7;
}
.champ2{
  width:150px;
  height:150px;
  position:absolute;
  top:47%;
  left:19%;
  z-index:4;
  opacity: 0.7;
}
.champ3{
  width:150px;
  height:150px;
  position:absolute;
  top:64%;
  left:25%;
  z-index:4;
  opacity: 0.5;
}
.champ4{
  width:150px;
  height:150px;
  position:absolute;
  top:64%;
  left:19%;
  z-index:4;
  opacity: 0.5;
}
.champ5{
  width:150px;
  height:150px;
  position:absolute;
  top:54%;
  left:24%;
  z-index:4;
  opacity: 0.5;
}
.champ6{
  width:150px;
  height:150px;
  position:absolute;
  top:58%;
  left:25%;
  z-index:3;
  opacity: 0.5;
}
/* flowers*/

.flowers{
  height: 400px;
  width: 400px;
  position: absolute;
  z-index: 4;
  top: 60%;
  left: 23%;
}
.flower1{
  height: 35px;
  width: 35px;
  position: absolute;
  z-index: 5;
  top: 10%;
  left: 10%;
}
.flower2{
  height: 35px;
  width: 35px;
  position: absolute;
  z-index: 5;
  top: 28%;
  left: 8%;
}
.flower3{
  height: 35px;
  width: 35px;
  position: absolute;
  z-index: 5;
  top: -3%;
  left: -6%;
}
.flower4{
  height: 35px;
  width: 35px;
  position: absolute;
  z-index: 5;
  top: 16%;
  left: 24%;
}
.flower5{
  height: 35px;
  width: 35px;
  position: absolute;
  z-index: 5;
  top: -1%;
  left: 15%;
}
.flower6{
  height: 35px;
  width: 35px;
  position: absolute;
  z-index: 5;
  top: 17%;
  left: -13%;
}
.flower7{
  height: 35px;
  width: 35px;
  position: absolute;
  z-index: 5;
  top: 11%;
  left: -3%;
}
.flower8{
  height: 35px;
  width: 35px;
  position: absolute;
  z-index: 5;
  top: 27%;
  left: 28%;
}
.forest{

  left: 200px;
  top: 80px;
  z-index: 10;
  position: absolute;
  width: 400px;
  height: 400px;

}

.champi1
{
  position: absolute;
  width:190px;
  height:170px;
  top:15%;
  left:10%;
  z-index:7;  
}


.champi3
{
  position: absolute;
  width: 150px;
  height:200px;
  top:15%;
  left:25%;
  z-index:7; 
}

.champi4
{
  position: absolute;
  width: 210px;
  height:250px;
  top:-5%;
  left:35%;
  z-index:6; 
}

/* lake*/
.lac
{
    width:270px;
    height:280px;
    position:absolute;
    top:20%;
    left:65%;
    z-index:3;
}

/*grass near the lac*/

#grass1{
  width: 50px;
  height: 50px;
  z-index: 4;
  position: absolute;
  top: 20%;
  left: 75%;
}
#grass2{
  width: 60px;
  height: 60px;
  z-index: 4;
  position: absolute;
  top: 20%;
  left: 66%;
}
#grass3{
  width: 60px;
  height: 60px;
  z-index: 4;
  position: absolute;
  top: 19%;
  left: 71%;
}
#grass4{
  width: 50px;
  height: 50px;
  z-index: 4;
  position: absolute;
  top: 36%;
  left: 77%;
}
#grass5{
  width: 50px;
  height: 50px;
  z-index: 4;
  position: absolute;
  top: 35.5%;
  left: 75%;
}

/* la ville doit encore être faite et repositionnée, pour l'instant l'image n'est là qu'à titre indicatif */
.ville
{
 border-radius:30%;
    width:300px;
    height:300px;
    border-radius:30%;
    position:absolute;
    top:-3%;
    left:44%;
    z-index:3;
}                                   
/* je n'ai gardé que le chemin sur l'image avec le clip-path */
.village
{
 border-radius:30%;
    width:300px;
    height:200px;
    border-radius:30%;
    position:absolute;
    -webkit-clip-path:polygon(18% 83%, 26% 76%, 39% 70%, 51% 65%, 57% 61%, 54% 54%, 48% 47%, 50% 40%, 55% 38%, 58% 32%, 59% 36%, 56% 47%, 61% 49%, 71% 51%, 74% 62%, 68% 72%, 60% 76%, 49% 82%, 43% 90%, 47% 100%, 12% 100%);
clip-path:polygon(18% 83%, 26% 76%, 39% 70%, 51% 65%, 57% 61%, 54% 54%, 48% 47%, 50% 40%, 55% 38%, 58% 32%, 59% 36%, 56% 47%, 61% 49%, 71% 51%, 74% 62%, 68% 72%, 60% 76%, 49% 82%, 43% 90%, 47% 100%, 12% 100%);
    top:65%;
    left:40%;
    z-index:3;
}

.maisonronde1
{
  width:60px;
  height:60px;
  top:76%;
  left:45%;
  position:absolute;
  z-index:6;  
}

.maisonronde2
{
  width:57px;
  height:57px;
  top:76%;
  left:54%;
  position:absolute;
  z-index:6;  
}

.maisonronde3
{
  width:60px;
  height:60px;
  top:79%;
  left:52%;
  position:absolute;
  z-index:7;  
}

.maisonronde4
{
  width: 65px;
  height: 65px;
  top:80%;
  left:42%;
  position:absolute;
  z-index:7;  
}

.maisonronde5
{
  width: 55px;
  height: 55px;
  top:72%;
  left:42%;
  position:absolute;
  z-index:5;  
}

.maisonronde6
{
  width:47px;
  height:47px;
  top:70%;
  left:50%;
  position:absolute;
  z-index:6;  
}

.bateau1
{
  width:90px;
  height:50px;
  background-color:rgb(180,179,168);
  border-radius:40%;
  top:80%;
  left:15%;
  position:absolute;
  transform:rotate(-15deg);
  z-index:6;
}

.bateau2
{
  width:90px;
  height:50px;
  background-color:rgb(180,179,168);
  border-radius:40%;
  top:90%;
  left:22%;
  position:absolute;
  transform:rotate(-65deg);
  z-index:6;
}

.bateau3
{
  width:90px;
  height:50px;
  background-color:rgb(180,179,168);
  border-radius:40%;
  top:70%;
  left:18%;
  position:absolute;
  transform:rotate(-17deg);
  z-index:6;
}

.voilebateau1
{
  top:74%;
  left:12.5%;
  position:absolute;
  transform:rotate(-15deg);
  z-index:7;
    display : inline-block;
    height : 0;
    width : 0;
    border-bottom : 80px solid rgb(255,255,255);
    border-left : 70px solid transparent;
   }


.voilebateau2
{
  top:65%;
  left:15.5%;
  position:absolute;
  transform:rotate(-15deg);
  z-index:7;
    display : inline-block;
    height : 0;
    width : 0;
    border-bottom : 80px solid rgb(255,255,255);
    border-left : 70px solid transparent;
   }


.voilebateau3
{
  top:85%;
  left:20%;
  position:absolute;
  transform:rotate(-15deg);
  z-index:7;
    display : inline-block;
    height : 0;
    width : 0;
    border-bottom : 80px solid rgb(255,255,255);
    border-left : 70px solid transparent;
   }
   .dino1{
    width: 150px;
    height: 150px;
    position: absolute;
    z-index: 10;
    top: 340px;
    left: 980px;
   }
   .dino2{
    width: 100px;
    height: 100px;
    position: absolute;
    z-index: 10;
    top: 600px;
    left: 890px;
   }
   .dino3{
    width: 200px;
    height: 200px;
    position: absolute;
    z-index: 10;
    top: 130px;
    left: 500px;
   }