body{
    background-color: deepskyblue;
}


#wolkendoos1{
    width: 300px;
    height: 200px;
    position: relative;
    margin: 0 auto;
    top: 0px;
    left: 600px;
    animation: wolk1 14s ease-in-out infinite;
    transition: transform 0,5s ease-in-out;
}

@keyframes wolk1 {
    0% {transform: translateX(0px);}
    50% {transform: translateX(-1150px);}
    100% {transform:  translateX(0px);}

}

#wolkendoos2{
    width: 300px;
    height: 200px;
    position: relative;
    margin: 0 auto;
    top: 0px;
    left: 650px;
    animation: wolk2 10s ease-in-out infinite;
    transition: transform 0,5s ease-in-out;
}

@keyframes wolk2 {
    0% {transform: translateX(0px);}
    50% {transform: translateX(-550px);}
    100% {transform:  translateX(0px);}
}

#wolkendoos3{
    width: 300px;
    height: 200px;
    position: relative;
    margin: 0 auto;
    top: 0px;
    left: 550px;
    animation: wolk3 13s ease-in-out infinite;
    transition: transform 0,5s ease-in-out;
}

@keyframes wolk3 {
    0% {transform: translateX(-200px);}
    50% {transform: translateX(-1150px);}
    100% {transform:  translateX(-200px);}
}

#wolkendoos4{
    width: 300px;
    height: 200px;
    position: relative;
    margin: 0 auto;
    top: -480px;
    left: -500px;
    animation: wolk4 8s ease-in-out infinite;
    transition: transform 0,5s ease-in-out;
}

@keyframes wolk4 {
    0% {transform: translateX(-200px);}
    50% {transform: translateX(1000px);}
    100% {transform:  translateX(-200px);}
}

#wolkendoos5{
    width: 300px;
    height: 200px;
    position: relative;
    margin: 0 auto;
    top: -300px;
    left: -450px;
    animation: wolk5 15s ease-in-out infinite;
    transition: transform 0,5s ease-in-out;
}

@keyframes wolk5 {
    0% {transform: translateX(-150px);}
    50% {transform: translateX(1150px);}
    100% {transform:  translateX(-150px);}
}

#wolkendoos6{
    width: 300px;
    height: 200px;
    position: relative;
    margin: 0 auto;
    top: -700px;
    left: -400px;
    animation: wolk6 15s ease-in-out infinite;
    transition: transform 0,5s ease-in-out;
}

@keyframes wolk6
 {
    0% {transform: translateX(-10px);}
    25% {transform: translateX(1000px);}
    50% {transform: translateX(-550px);}
    75% {transform: translateX(600px);}
    100% {transform:  translateX(-10px);}
}


#wolkendoos7{
    width: 300px;
    height: 200px;
    position: relative;
    margin: 0 auto;
    top: -1250px;
    left: -200px;
    animation: wolk7 25s ease-in-out infinite;
    transition: transform 0,5s ease-in-out;
}

@keyframes wolk7 {
    0% {transform: translateX(-150px);}
    25% {transform: translateX(750px);}
    50% {transform: translateX(100px);}
    75% {transform: translateX(-200px);}
    100% {transform:  translateX(-150px);}
}









.wolklangdeel{
    width: 175px;
    height: 50px;
    border-radius: 100px;
    background-color: white;
    position: relative
}


.wolkkleinbolletje{
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background-color: rgb(255, 255, 255);
    position: relative;
    top: 90px;
    left: 30px;
}


.wolkgrootbolletje{
    width: 75px;
    height: 75px;
    border-radius: 50px;
    background-color: white;
    position: relative;
    left: 70px;
    top: 20px;
}





#vliegtuig{
    width: 300px;
    height: 100px;
    position: relative;
    top: -1330px;
    left: 350px;
    margin: 0 auto;
    animation: vliegtuig 10s ease-in-out infinite;
    transition: transform 0,5s ease-in-out;
}

@keyframes vliegtuig {
    0% {transform: translateX(1050px);}
    100% {transform: translateX(-1350px);}
}



.onderkant1{
    width: 200px;
    height: 30px;
    border-radius: 100px;
    background-color: #faf0e6;
    position: relative;
    top: 10px;
}

.onderkant2{
    width: 220px;
    height: 50px;
    border-radius: 100px;
    background-color: #d1bea8;
    position: relative;
    left: -20px;
}

.achtervleugel1{
    width: 0px;
   height: 0px;
   border-style: solid;
   border-width: 70px 70px 0 0;
   border-color: #faf0e6 transparent transparent transparent;
   transform: rotate(0deg);
   position: relative;
   top: -70px;
   left: 185px;
}

.achtervleugel2{
    width: 0px;
   height: 0px;
   border-style: solid;
   border-width: 0 0 70px 70px;
   border-color: transparent transparent #faf0e6 transparent;
   transform: rotate(0deg);
   position: relative;
   top: -208px;
   left: 185px;
}

.vleugel1{
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 0 60px 60px;
    border-color: transparent transparent #d1bea8 transparent;
    transform: rotate(0deg);
    position: relative;
    top: -269px;
    left: 55px;
}

.vleugel2{
    width: 0px;
   height: 0px;
   border-style: solid;
   border-width: 0 60px 60px 0;
   border-color: transparent #d1bea8 transparent transparent;
   transform: rotate(0deg);
   position: relative;
   left: 55px;
   top: -199px;

}












#eiland_doos{
    width: 300px;
    height: 100px;
    position: relative;
    top: -700px;
    margin: 0 auto;
    animation: downup 10s ease-in-out infinite;
    transition: transform 0,5s ease-in-out;
}

@keyframes downup{
    0% {transform: translateY(0px);}
    50% {transform: translateY(-150px);}
    100% {transform:  translateY(0px);}

}







.laag1{
    width: 180px;
    height: 50px;
    border-radius: 100px;
    position: relative;
    background-color: gray;
}


.laag2{
    width: 250px;
    height: 50px;
    border-radius: 150px;
    position: relative;
    background-color: gray;
    top: -80px;
    left: -30px;

}


.laag3{
    width: 350px;
    height: 50px;
    border-radius: 250px;
    background-color: gray;
    position: relative;
    top: -160px;
    left: -75px;
}

.laag4{
    width: 450px;
    height: 50px;
    border-radius: 350px;
    background: rgb(128,128,128);
    background: linear-gradient(0deg, rgba(128,128,128,1) 1%, rgba(111,78,55,1) 45%);
    position: relative;
    top: -250px;
    left: -120px;
}

.laag5{
    width: 500px;
    height: 50px;
    border-radius: 400px;
    background: rgb(2,0,36);
    background: linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(111,78,55,1) 0%, rgba(70,160,36,1) 100%);    
    position: relative;
    top: -350px;
    left: -150px;
}

.laag6{
    width: 600px;
    height: 50px;
    border-radius: 500px;
    background: rgb(2,0,36);
    background: linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(70,160,36,1) 0%, rgba(117,219,32,1) 66%);
    position: relative;
    top: -450px;
    left: -200px;
}


.berg1{
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 52.5px 151px 52.5px;
    border-color: transparent transparent #000000 transparent;
    transform: rotate(0deg);
    position: relative;
    top: -650px;
    left: -170px;
}

.berg2{
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 27px 205px 27px;
    border-color: transparent transparent #282727 transparent;
    transform: rotate(0deg);
    position: relative;
    top: -855px;
    left: -100px;
}

.berg3{
    width: 0px;
   height: 0px;
   border-style: solid;
   border-width: 0 53.5px 169px 53.5px;
   border-color: transparent transparent #352e2e transparent;
   transform: rotate(0deg);
   position: relative;
   top: -1024px;
   left: -60px;
}

.berg4{
    width: 0px;
   height: 0px;
   border-style: solid;
   border-width: 0 52.5px 262px 52.5px;
   border-color: transparent transparent #383030 transparent;
   transform: rotate(0deg);
   position: relative;
   top: -1285px;
   left: 270px;
}

.berg5{
    width: 0px;
   height: 0px;
   border-style: solid;
   border-width: 0 23px 176px 23px;
   border-color: transparent transparent #000000 transparent;
   transform: rotate(0deg);
   position: relative;
   top: -1461px;
   left: 250px;

}


.boomstam1{
    width: 10px;
    height: 50px;
    background-color: #79443b;
    position: relative;
    top: -1511px;
}

.boomstam2{
    width: 10px;
    height: 50px;
    background-color: #79443b;
    position: relative;
    top: -1561px;
    left: 70px;
}




.bladonder1{
    background-color: green;
    width: 30px;
    height: 15px;
    position: relative;
    top: -1625px;
    left: -10px;
}

.bladmidden1{
    background-color: green;
    width: 50px;
    height: 20px;
    position: relative;
    top: -1655px;
    left: -20px;
}


.bladboven1{
    background-color: green;
    width: 30px;
    height: 15px;
    position: relative;
    top: -1685px;
    left: -10px;
}

.bladonder2{
    background-color: green;
    width: 30px;
    height: 15px;
    position: relative;
    top: -1675px;
    left: 60px;
}

.bladmidden2{
    background-color: green;
    width: 50px;
    height: 20px;
    position: relative;
    top: -1705px;
    left: 50px;
}

.bladboven2{
    background-color: green;
    width: 30px;
    height: 15px;
    position: relative;
    top: -1735px;
    left: 60px;
}





.toren{
    background-color: gray;
    width: 100px;
    height: 200px;
    position: relative;
    top: -1860px;
    left: 140px;
}

.deur1{
    background-color: black;
    width: 70px;
    height: 30px;
    position: relative;
    top: -1890px;
    left: 155px;
}

.deurschot{
    background-color: gray;
    width: 10px;
    height: 30px;
    position: relative;
    top: -1920px;
    left: 185px;
}


.raam1{
    background-color: #352e2e;
    width: 10px;
    height: 50px;
    position: relative;
    top: -2015px;
    left: 155px;
}

.raam2{
    background-color: #352e2e;
    width: 10px;
    height: 50px;
    position: relative;
    top: -2065px;
    left: 175px;
}

.raam3{
    background-color: #352e2e;
    width: 10px;
    height: 50px;
    position: relative;
    top: -2115px;
    left: 195px;
}

.raam4{
    background-color: #352e2e;
    width: 10px;
    height: 50px;
    position: relative;
    top: -2165px;
    left: 215px;
}


.raam5{
    background-color: #352e2e;
    width: 10px;
    height: 50px;
    position: relative;
    top: -2300px;
    left: 155px;
}

.raam6{
    background-color: #352e2e;
    width: 10px;
    height: 50px;
    position: relative;
    top: -2350px;
    left: 175px;
}

.raam7{
    background-color: #352e2e;
    width: 10px;
    height: 50px;
    position: relative;
    top: -2400px;
    left: 195px;
}

.raam8{
    background-color: #352e2e;
    width: 10px;
    height: 50px;
    position: relative;
    top: -2450px;
    left: 215px;
}

.bliksemafleider{
    background-color: black;
    width: 5px;
    height: 30px;
    position: relative;
    top: -2550px; 
    left: 200px;
}

















body {
    transition: 1.5s;
    }
    .night-toggle {
    width: 33px;
    height: 33px;
    right: 20px;
    top: 20px;
    position: absolute;
    }
    .night-toggle:hover{
      cursor: pointer;
    }
    .moon {
      background-color: transparent;
      box-shadow: -6px 1px 0 3px #275e8e;
      border-left:3px solid #27476D;
      border-radius:50%;
      width: 20px;
      height: 20px;
      margin-left:8px;
      margin-top:0px;
      transition: 2s;
    }
    .sun {
      background-color: #fdd462;
      box-shadow: 2px 0px 0px 1px #D19C29;
      border-radius:50%;
      width: 26px;
      height: 26px;
      transition: 2s;
    }
    
    /* ----- optional ----- */
    .break {
      flex-basis: 100%;
      height: 0;
    }
    .opt {
      display: flex;
      flex-wrap: wrap;
      justify-content:center;
      font-family: sans-serif;
      margin-top:5%;
      text-align:center;
    }