body {
    background-color: #ECEBE2;
    margin: 0;
    padding: 0;
}

#mer {
    z-index: 7;
    width: 100vw;
    height: 350px;
    background-color: #7ACAB8;
    position: fixed;
    bottom: 0;
}

#mer-vague1 {
    z-index: 8;
    width: 60%;
    height: 100%;
    background-color: #ACE2D0;
    position: absolute;
    bottom: 0px;
    clip-path: polygon(50% 60%, 77% 50%, 95% 20%, 100% 0, 0 0, 5% 20%, 23% 50%);
    left: 50%;
    transform: translate(-50%);
}

#mer-vague2 {
    z-index: 9;
    width: 60%;
    height: 100%;
    background-color: #56B587;
    position: absolute;
    bottom: 0px;
    clip-path: polygon(50% 33%, 67% 28%, 76% 18%, 85% 0, 15% 0, 24% 18%, 33% 28%);
    left: 50%;
    transform: translate(-50%);
}

#mer-vague3 {
    z-index: 10;
    width: 60%;
    height: 100%;
    background-color: #3D935F;
    position: absolute;
    bottom: 0px;
    clip-path: polygon(49% 18%, 64% 16%, 71% 11%, 76% 0%, 24% 0, 29% 11%, 36% 16%);
    left: 50%;
    transform: translate(-50%);
}

#mer2 {
    width: 100vw;
    height: 440px;
    background-color: #7ACAB8;
    position: fixed;
    bottom: 0;
    z-index: 5;
}


#mer3 {
    width: 300px;
    height: 300px;
    left: 45%;
    background-color: #3D935F;
    position: fixed;
    bottom: 350px;
    z-index: 21;
    clip-path: polygon(6% 100%, 12% 97%, 23% 92%, 34% 88%, 34% 83%, 40% 77%, 47% 74%, 54% 75%, 59% 78%, 71% 78%, 77% 79%, 83% 84%, 87% 89%, 91% 94%, 96% 97%, 100% 100%);
}

    #falaise-gauche {
    z-index: 61;
    background-color: #665F56;
    width: 400px;
    height: 600px;
    position: fixed;
    bottom: 350px;
    left: 200px;
    clip-path: polygon(4% 100%, 6% 65%, 12% 65%, 13% 46%, 20% 43%, 22% 21%, 27% 21%, 28% 37%, 30% 28%, 37% 28%, 39% 44%, 47% 46%, 50% 68%, 58% 68%, 61% 58%, 68% 58%, 69% 51%, 76% 52%, 76% 72%, 79% 72%, 80% 63%, 84% 64%, 85% 86%, 89% 86%, 91% 100%);
}

#col {
    width: 200px;
    height: 400px;
    background-color: #413C36;
    position: absolute;
    bottom: 0;
    /*centrer un bloc*/
    left: 50%;
    transform: translate(-50%);
    clip-path: polygon(19% 61%, 20% 52%, 24% 52%, 25% 66%, 31% 67%, 34% 57%, 38% 54%, 39% 46%, 43% 46%, 44% 61%, 51% 60%, 52% 78%, 59% 77%, 60% 67%, 65% 66%, 69% 40%, 65% 46%, 62% 30%, 61% 38%, 58% 38%, 37% 27%, 31% 28%, 29% 40%, 25% 40%, 22% 31%, 22% 35%, 18% 35%, 17% 44%, 12% 44%, 13% 60%);
}


#falaise-milieu {
    z-index: 70;
    background-color: #665F56;
    width: 400px;
    height: 400px;
    position: fixed;
    bottom: 300px;
    left: 25%;
    clip-path: polygon(13% 100%, 15% 74%, 20% 72%, 20% 65%, 27% 64%, 27% 76%, 30% 77%, 32% 88%, 38% 87%, 41% 38%, 44% 36%, 45% 30%, 51% 29%, 57% 35%, 58% 40%, 61% 41%, 62% 48%, 66% 47%, 65% 38%, 69% 39%, 72% 64%, 77% 65%, 76% 78%, 81% 82%, 82% 93%, 86% 93%, 88% 100%);
}

#col4 {
    width: 200px;
    height: 400px;
    background-color: #413C36;
    position: absolute;
    bottom: 35px;
    left: 50%;
    transform: translate(-50%);
    clip-path: polygon(19% 61%, 20% 52%, 24% 52%, 25% 66%, 31% 67%, 34% 57%, 38% 54%, 39% 46%, 43% 46%, 44% 61%, 51% 60%, 52% 78%, 59% 77%, 60% 67%, 65% 66%, 69% 40%, 65% 46%, 62% 30%, 61% 38%, 58% 38%, 37% 27%, 31% 28%, 29% 40%, 25% 40%, 22% 31%, 22% 35%, 18% 35%, 17% 44%, 12% 44%, 13% 60%);
}


    #falaise-droit {
    z-index: 60;
    background-color: #665F56;
    width: 500px;
    height: 600px;
    position: fixed;
    bottom: 330px;
    right: 200px;
    clip-path: polygon(2% 100%, 5% 79%, 9% 78%, 11% 73%, 15% 73%, 17% 83%, 21% 85%, 22% 93%, 33% 89%, 37% 76%, 44% 75%, 48% 58%, 53% 56%, 54% 45%, 60% 45%, 61% 61%, 64% 66%, 64% 36%, 71% 36%, 75% 49%, 82% 51%, 85% 74%, 91% 75%, 100% 100%);
}



#col2 {
    width: 300px;
    height: 300px;
    background-color: #413C36;
    position: absolute;
    bottom: 5px;
    /*centrer un bloc*/
    transform: translate(-50%);
    left: 20%;
    clip-path: polygon(11% 65%, 12% 75%, 17% 74%, 15% 60%, 15% 52%, 27% 53%, 30% 77%, 36% 77%, 36% 68%, 39% 67%, 39% 47%, 44% 47%, 49% 65%, 51% 65%, 55% 86%, 60% 85%, 61% 73%, 65% 72%, 66% 77%, 71% 76%, 70% 47%, 63% 47%, 60% 42%, 54% 41%, 52% 35%, 45% 35%, 45% 39%, 42% 39%, 41% 34%, 34% 33%, 28% 40%, 18% 41%, 14% 48%, 9% 49%);
}


#col3 {
    width: 400px;
    height: 300px;
    background-color: #413C36;
    position: absolute;
    bottom: 30px;
    right: 10px;
    clip-path: polygon(11% 65%, 12% 75%, 17% 74%, 15% 60%, 15% 52%, 27% 53%, 30% 77%, 36% 77%, 36% 68%, 39% 67%, 39% 47%, 44% 47%, 49% 65%, 51% 65%, 55% 86%, 60% 85%, 61% 73%, 65% 72%, 66% 77%, 71% 76%, 70% 47%, 63% 47%, 62% 59%, 60% 54%, 56% 20%, 55% 14%, 54% 0, 45% 0, 31% 0, 24% 0, 28% 40%, 18% 41%, 14% 48%, 9% 49%);
}



#mont-blanc {
    width: 630px;
    height: 700px;
    background-color: #40433D;
    position: fixed;
    bottom: 350px;
    right: 310px;
    clip-path: polygon(1% 99%, 31% 39%, 32% 37%, 38% 33%, 41% 33%, 47% 34%, 54% 33%, 56% 38%, 62% 44%, 67% 49%, 68% 52%, 70% 63%, 72% 68%, 74% 72%, 77% 79%, 79% 82%, 82% 88%, 83% 94%, 88% 99%);
}

#mont-blanc2 {
    width: 800px;
    height: 700px;
    background-color: #2E302D;
    position: fixed;
    bottom: 350px;
    left: 310px;
    clip-path: polygon(10% 72%, 15% 65%, 20% 56%, 25% 55%, 28% 61%, 32% 66%, 53% 25%, 60% 22%, 65% 20%, 70% 27%, 77% 54%, 88% 71%, 92% 70%, 96% 79%, 100% 100%, 0 100%);
}

#montagne {
    width: 800px;
    height: 600px;
    position: fixed;
    bottom: 320px;
    left: 37%;
    z-index: 0;
    transform: rotate(5deg);
}
    #montagne:hover, .pause:hover {
        cursor: url("ile2/curseur2.png"), auto;
    }
#montagne:hover ~ #montagneson {
    display: block;
}

#montagneson {
    display: none;
}



#terre {
    width: 100vw;
    height: 800px;
    background-color: #A8B29A;
    position: fixed;
    bottom: 350px;
    clip-path: ellipse(37% 15% at 50% 99%);
    z-index: 20;
}



#foret {
    width: 300px;
    height: 150px;
    position: fixed;
    bottom: 380px;
    left: 50%;
    clip-path: polygon(0% 23%, 9% 28%, 12% 22%, 14% 19%, 16% 16%, 19% 12%, 23% 5%, 24% 0%, 26% 0%, 18% 17%, 14% 24%, 16% 21%, 20% 27%, 24% 35%, 28% 38%, 30% 37%, 32% 38%, 35% 35%, 38% 37%, 42% 36%, 42% 32%, 40% 27%, 42% 23%, 41% 21%, 42% 19%, 43% 20%, 44% 23%, 44% 26%, 46% 28%, 48% 31%, 49% 34%, 50% 39%, 51% 41%, 53% 34%, 54% 25%, 55% 19%, 54% 13%, 53% 8%, 53% 2%, 54% 2%, 55% 7%, 56% 11%, 57% 17%, 59% 10%, 61% 7%, 61% 2%, 60% 0%, 62% 0%, 63% 3%, 64% 0%, 66% 0%, 64% 4%, 63% 7%, 62% 10%, 61% 13%, 60% 19%, 58% 25%, 56% 34%, 54% 43%, 57% 44%, 61% 43%, 65% 44%, 68% 43%, 70% 43%, 74% 39%, 77% 37%, 82% 35%, 84% 28%, 86% 23%, 88% 22%, 87% 26%, 85% 30%, 84% 35%, 89% 35%, 93% 36%, 97% 35%, 100% 36%, 100% 39%, 97% 39%, 100% 41%, 100% 47%, 96% 45%, 92% 44%, 87% 43%, 83% 43%, 81% 44%, 78% 45%, 83% 46%, 88% 47%, 91% 47%, 96% 49%, 99% 53%, 100% 54%, 100% 57%, 97% 55%, 94% 53%, 92% 52%, 85% 52%, 80% 51%, 74% 50%, 71% 51%, 68% 51%, 64% 51%, 61% 51%, 56% 52%, 56% 55%, 59% 57%, 62% 60%, 65% 61%, 67% 61%, 69% 61%, 73% 63%, 77% 63%, 81% 63%, 84% 63%, 86% 63%, 88% 64%, 90% 66%, 91% 67%, 94% 69%, 96% 72%, 99% 76%, 100% 78%, 100% 82%, 93% 74%, 86% 68%, 82% 68%, 78% 67%, 81% 72%, 85% 76%, 87% 80%, 90% 86%, 90% 89%, 88% 93%, 86% 98%, 82% 100%, 77% 95%, 71% 94%, 67% 90%, 67% 81%, 67% 77%, 62% 74%, 60% 75%, 60% 69%, 58% 65%, 55% 62%, 54% 64%, 53% 69%, 54% 72%, 53% 76%, 51% 78%, 50% 77%, 46% 75%, 42% 75%, 39% 75%, 38% 71%, 37% 69%, 36% 68%, 33% 67%, 30% 67%, 27% 68%, 23% 69%, 21% 68%, 18% 67%, 14% 67%, 10% 66%, 8% 65%, 2% 63%, 0% 60%, 0% 54%, 1% 49%, 2% 44%, 2% 38%, 4% 34%, 0% 33%);
z-index: 50;
}

#foret2 {
    width: 400px;
    height: 400px;
    position: fixed;
    bottom: 370px;
    left: 37%;
    clip-path: polygon(9% 80%, 11% 74%, 13% 62%, 14% 54%, 15% 43%, 21% 39%, 30% 39%, 29% 45%, 28% 53%, 26% 59%, 26% 68%, 26% 73%, 34% 73%, 37% 71%, 40% 69%, 41% 66%, 43% 69%, 47% 68%, 52% 68%, 55% 69%, 57% 70%, 59% 66%, 58% 62%, 57% 59%, 57% 57%, 62% 62%, 64% 66%, 65% 70%, 69% 69%, 73% 70%, 76% 70%, 81% 68%, 83% 60%, 82% 54%, 83% 46%, 82% 38%, 82% 33%, 81% 27%, 82% 20%, 82% 17%, 81% 13%, 81% 7%, 83% 3%, 82% 0%, 85% 0%, 84% 6%, 83% 10%, 84% 12%, 87% 9%, 90% 7%, 89% 11%, 86% 13%, 86% 13%, 85% 15%, 85% 15%, 85% 21%, 85% 21%, 85% 27%, 85% 32%, 85% 37%, 86% 39%, 86% 43%, 86% 53%, 87% 59%, 86% 69%, 88% 74%, 85% 77%, 81% 78%, 77% 77%, 74% 74%, 71% 73%, 68% 74%, 68% 76%, 70% 78%, 71% 79%, 74% 80%, 77% 81%, 80% 83%, 81% 86%, 83% 90%, 86% 92%, 88% 94%, 92% 100%, 79% 100%, 77% 96%, 75% 90%, 71% 88%, 69% 87%, 64% 88%, 63% 89%, 62% 91%, 60% 94%, 58% 97%, 56% 97%, 55% 95%, 57% 92%, 56% 86%, 53% 83%, 52% 83%, 48% 86%, 45% 88%, 43% 89%, 40% 94%, 36% 99%, 34% 100%, 1% 100%, 1% 92%, 6% 86%);
    z-index: 51;
}
#foret3 {
    width: 300px;
    height: 200px;
    position: absolute;
    bottom: 370px;
    left: 37%;
   z-index: 51;
}

#foret:hover ~ #foretson {
    display: block;
}

#foretson {
    display: none;
}


#maison {
    width: 175px;
    height: 250px;
    position: fixed;
    bottom: 400px;
    left: 24%;
   z-index: 30;
}
#maison:hover ~ #maisonson {
    display: block;
}

#maisonson {
    display: none;
}


#ecole {
position:absolute;
width:300px;
height:200px;
top:55vh;
left:70%;
z-index:25;
}

#ecole:hover ~ #ecoleson {
    display: block;
}

#ecoleson{
    display:none;
}
#ponton {
    position: absolute;
    width: 100px;
    height: 100px;
    bottom: 300px;
    left: 24%;
    z-index: 30;
}

#ponton:hover ~ #pontonson{
display: block;
}

#pontonson {
    display: none;
}
#terraindesport {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 65vh;
    left: 65%;
    z-index: 25;
}
#terraindesport:hover ~ #terraindesportson {
    display: block;
}

#terraindesportson {
    display: none;
}