body {
    margin: 0;
    padding: 0;
    background-image: url(https://64.media.tumblr.com/825a90d2dbbdbe661186ef6063cd6a80/95f8dcfcdf983c12-5c/s400x600/4138ae8616264d4e72cd2666017b8cae4e3b00ec.gif);
/*    cursor: url(images/hand.png), auto;*/
background-repeat: no-repeat;
background-size: 100vw;
background-position:center;
max-height: 100vh;
/*overflow: hidden;*/
}
img, #ascenceur{
    pointer-events: none;
}

#fond {
    width: 86.5%;
    height: 71%;
    position: absolute;
/*    background-image: url(https://media1.giphy.com/media/kZw8SECb7VkozVZVDZ/giphy.gif);*/
    display: grid;
    grid-template-columns: 70vw 25vw;
}


#gauche {
    width: 400px;
    height: 960px;
    bottom: 30px;
   background: transparent;
    border: 5px solid transparent;
}
#droite {
    width: 100%;
/*    background-image: url(https://64.media.tumblr.com/825a90d2dbbdbe661186ef6063cd6a80/95f8dcfcdf983c12-5c/s400x600/4138ae8616264d4e72cd2666017b8cae4e3b00ec.gif);*/
    display: grid;
}
#grande-ile {
    position: absolute;
    display: grid;
    grid-gap: 1px;
    /*align-self: center;
    justify-self: center;*/
    place-self: center;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: repeat(2,1fr);
    left: 50%;
    transform: translateX(-80%);
    width: 950px;
    height: 950px;
    background-color: transparent;
    place-self: center;
    clip-path: polygon(2% 33%, 2% 30%, 3% 26%, 5% 21%, 7% 18%, 10% 14%, 14% 10%, 18% 7%, 23% 4%, 29% 2%, 36% 1%, 42% 1%, 48% 3%, 53% 6%, 56% 10%, 58% 16%, 62% 20%, 69% 22%, 76% 17%, 78% 10%, 83% 5%, 89% 4%, 96% 7%, 99% 14%, 99% 27%, 95% 36%, 89% 41%, 89% 49%, 95% 53%, 97% 59%, 96% 66%, 93% 71%, 92% 76%, 94% 81%, 97% 84%, 99% 90%, 96% 96%, 89% 98%, 81% 97%, 75% 99%, 68% 100%, 59% 100%, 51% 99%, 44% 97%, 39% 94%, 35% 92%, 29% 92%, 23% 96%, 17% 98%, 9% 98%, 4% 94%, 2% 90%, 0% 84%, 0% 77%, 2% 70%, 5% 64%, 9% 58%, 9% 56%, 3% 52%, 1% 45%, 1% 42%, 3% 37%);

}

#ascenceur {
    position: absolute;
    display: grid;
    left: 50%;
    transform: translateX(-80%);
    width: 950px;
    height: 950px;
    justify-content: center;
    align-items: center;
}
#ile4 {
    background-image: url(https://media.tenor.com/UOMD6Ocm1wMAAAAM/dreamcore.gif);
    background-repeat: no-repeat;
    background-size: 19vw;
    background-position: center;
    max-height: 100vh;
}
#container {
    position: absolute;
    left: 50%;
    transform: translateX(-80%);
    width: 950px;
    height: 950px;
    display: grid;
    grid-gap: 1px;
    /*align-self: center;
    justify-self: center;*/
    place-self: center;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: repeat(2,1fr);
}
    .quart {
        position: relative;
    width: 100%;
    height: 100%;
   
   
}
/*.quart:hover {
     cursor: url(images/hand-pointer.png), auto;
    }*/

#ile1 {
    background-image: url(https://i.pinimg.com/originals/9f/92/6c/9f926c8c220127d81c8ba6897aa8d5db.gif);
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
}
#ile2 {
    background-image: url(https://64.media.tumblr.com/5d9ab206335e1202c5ffb814e9880414/tumblr_muin83KAB21skd41vo1_500.gif);
    clip-path: clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
}
#ile3 {
    background-image: url(https://media.giphy.com/media/tQgB6lM6XCle8/giphy.gif);
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
}
#ile4 {
    background-color: pink;
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
}

/*.deuxieme:hover {
    cursor: url(images/hand-pointer.png), auto;
}*/
#batiment1 {
    width: 200px;
    height: 272px;
    left: 20%;
    bottom: 29%;
    position: absolute;
}
#batiment2 {
    width: 126px;
    height: 310px;
    left: 9%;
    bottom: 28%;
    position: absolute;
}
#batiment3 {
    width: 160px;
    left: 46%;
    bottom: 23%;
    position: absolute;
}
#pill {
    width: 311px;
    left: 16%;
    bottom: 10%;
    position: absolute;
}

#temple {
    width: 80px;
    left: 6%;
    bottom: 22%;
    position: absolute;
}

#toilette {
    width: 100px;
    left: 60%;
    bottom: 28%;
    position: absolute;
    z-index: 100;

    
}

#slot {
    width: 172px;
    left: 43%;
    bottom: 21%;
    position: absolute;
}

#dessin1 {
    width: 400px;
    left: 6%;
    bottom: 73%;
    position: absolute;
}

#dessin2 {
    width: 85px;
    left: 5%;
    bottom: 5%;
    position: absolute;

}

.button, .play, .pause {
    width: 15vw !important;
    height: 15vw !important;
    opacity: 0 !important;
}


.content{
    display: none;
    
}
input[type=checkbox]:hover{cursor:pointer;
}

h1 {
    color: mintcream;
    font-family: Cambria, Cochin, Georgia, Times, Times New Roman, serif;
    font-size: 100px;
    text-align: center;
    text-shadow: 15px 10px 20px #FFF;

}
h1 span{background-color:white;
        padding:10px;
}

p {
    color: white;
    font-family: Courier New, Courier, monospace;
    font-size: 13px;
  
  
}

#ele {
    width: 200px;
    opacity: 0;
}

#ele2 {
    width: 160px;
    height: 160px;
    left: 10%;
    bottom: 15%;
    position: absolute;
    z-index: 100;
}

#ele3 {
    width: 400px;
    height: 450px;
    left: 13%;
    bottom: 7%;
    position: absolute;
}

#zom {
    width: 80px;
    left: 54%;
    bottom: 52%;
    position: absolute;
}

#zom2 {
    width: 80px;
    left: 24%;
    bottom: 40%;
    position: absolute;
}

#lace {
    width: 509px;
    height: 78px;
    left: -99%;
    bottom: -10%;
    position: absolute;
    z-index: 99;
    opacity: 0;
}

#lace2 {
    width: 1153px;
    left: -121%;
    bottom: -123%;
    position: absolute;
    z-index: 100;
    opacity:0;
}

#lace3 {
    width: 480px;
    height: 80px;
    left: 0%;
    bottom: -9%;
    position: absolute;
    z-index: 99;
    opacity: 0;
}

#lace4 {
    width: 480px;
    height: 80px;
    left: 0%;
    bottom: -10%;
    position: absolute;
    z-index: 99;
    opacity: 0;
}

#potato {
    width: 130px;
    left: 59%;
    bottom: 68%;
    position: absolute;
    z-index: 100;
}



#clou {
    width: 277px;
    left: 61%;
    bottom: 39%;
    position: absolute;
}

#clou4 {
    width: 203px;
    left: 35%;
    bottom: 52%;
    position: absolute;
}

#clou2 {
    width: 248px;
    left: -13%;
    bottom: 53%;
    position: absolute;
}

#clou3 {
    width: 130px;
    left: 19%;
    bottom: 61%;
    position: absolute;
}

#potato2 {
    width: 63px;
    left: -1%;
    bottom: 42%;
    position: absolute;
}

#potato5 {
    width: 94px;
    left: 0%;
    bottom: 25%;
    position: absolute;
}

#potato3 {
    width: 30px;
    left: 10%;
    bottom: 50%;
    position: absolute;
}

#potato4 {
    width: 136px;
    left: 71%;
    bottom: 38%;
    position: absolute;
}

#potato6 {
    width: 63px;
    left: 71%;
    bottom: -3%;
    position: absolute;
    z-index: 100;
}


#wave {
    width: 119px;
    left: 0%;
    bottom: -1%;
    position: absolute;
}

#wave2 {
    width: 119px;
    left: 20%;
    bottom: -1%;
    position: absolute;
}

#wave3 {
    width: 119px;
    left: 40%;
    bottom: -1%;
    position: absolute;
}

#wave4 {
    width: 119px;
    left: 53%;
    bottom: -1%;
    position: absolute;
}

#moon {
    width: 100px;
    left: 20%;
    bottom: 8%;
    position: absolute;
    z-index: 100;
}


#beach {
    width: 600px;
    left: -3%;
    bottom: -57%;
    position: absolute;
}

#moun {
    width: 565px;
    left: -9%;
    bottom: -22%;
    position: absolute;
}


#sun {
    width: 300px;
    height: 400px;
    left: 45%;
    bottom: 35%;
    position: absolute;
    z-index: 100;
}

#he {
    width: 150px;
    height: 150px;
    left: 87%;
    bottom: -12%;
    position: absolute;
    z-index: 100;
}

#cloud2 {
    width: 300px;
    height: 400px;
    left: -20%;
    bottom: 55%;
    position: absolute;
    z-index: 100;
}

#cloud3 {
    width: 330px;
    height: 430px;
    left: 52%;
    bottom: 63%;
    position: absolute;
    z-index: 99;
}

#cloud4 {
    width: 270px;
    height: 370px;
    left: 27%;
    bottom: 62%;
    position: absolute;
    z-index: 100;
}

#cloud5 {
    width: 170px;
    height: 270px;
    left: 15%;
    bottom: 78%;
    position: absolute;
    z-index: 100;
}

#batiment5 {
    width: 80px;
    height: 272px;
    left: 84%;
    bottom: 14%;
    position: absolute;
}

#batiment6 {
    width: 80px;
    height: 130px;
    left: 16%;
    bottom: 3%;
    position: absolute;
}

#batiment7 {
    width: 89px;
    height: 272px;
    left: -1%;
    bottom: -13%;
    position: absolute;
}

#batiment8 {
    width: 190px;
    height: 124px;
    left: 30%;
    bottom: 2%;
    position: absolute;
}

#batiment9 {
    width: 69px;
    height: 100px;
    left: 74%;
    bottom: 14%;
    position: absolute;
}

#batiment10 {
    width: 55px;
    height: 272px;
    left: 68%;
    bottom: 0%;
    position: absolute;
}

#street {
    width: 55px;
    height: 362px;
    left: 96%;
    bottom: 11%;
    position: absolute;
}

#street2 {
    width: 55px;
    height: 458px;
    left: 96%;
    bottom: -98%;
    position: absolute;
}

#music {

    
    position: absolute;
    opacity: 0;
}

#moulin {
    width: 130px;
    height: 130px;
    left: 69%;
    bottom: 15%;
    position: absolute;
    z-index: 100;
}

h2 {
    color: white;
    font-family:Courier New, Courier, monospace;
    font-size: 25px;
    text-align: left;
    text-shadow: 15px 10px 20px #FFF;
}

#entre {
    width: 300px;
    height: 300px;
    left: 25%;
    bottom: 54%;
    position: absolute;
    z-index: 100;
}

#nu2 {
    width: 240px;
    left: 55%;
   
    height: 53%;
    bottom: 116%;
    position: absolute;
    z-index: 100;
}

#nu3 {
    width: 50px;
    left: 23%;
    bottom: 29%;
    position: absolute;
    z-index: 100;
}


.container p{
    color: white;
    font-size: 13px;
}

#votre {
    width: 170px;
    left: -106%;
    bottom: 64%;
    position: absolute;
    z-index: 28;
}

#eye {
    width: 179px;
    left: -107%;
    bottom: 41%;
    position: absolute;
    z-index: 100;
}

#eye2 {
    width: 179px;
    left: -118%;
    bottom: 17%;
    position: absolute;
    z-index: 100;
}

mach {
    width: 179px;
    left: -200%;
    bottom: 17%;
    position: absolute;
    z-index: 100;
}

#icon {
    width: 18px;
    left: 344%;
    bottom: 200%;
    position: absolute;
    
    z-index: 100;
}

#icon2 {
    width: 188px;
    left: -15.5%;
    bottom: 141%;
    position: absolute;
    z-index: 100;
    border: 3px solid black;
}

#icon3 {
    width: 150px;
    left: 137%;
    bottom: -1%;
    position: absolute;
    z-index: 100;
}