body {
  padding: 25px;
  background-color: white;
  color: black;
  font-size: 25px;
}

.dark-mode {
  background-color: black;
  color: white;
}

body{
  background: rgb(41, 155, 222);
}



#eiland{
  width: 800px;
height: 200px;
position: relative;
top: -500px;
left: 0px;
animation: updown 5s ease-in-out infinite;
}

#bergtop1{
  width: 0px;
  height: 0px;
  border-left: 19px solid transparent;
  border-right: 19px solid transparent;
  border-bottom: 45px solid white ;
  position: relative;
    top: -1068px;
  left: 856px;

}

#bergtop2{
  width: 0px;
  height: 0px;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 55px solid white ;
  position: relative;
    top: -1137px;
  left: 374px;

}
#wolkendoos1{
width: 300px;
height: 100px;
position: relative;
top: 20px;
left: 1800px;
animation: leftright 9s ease-in-out infinite;
}
#wolkendoos2 {
  width: 300px;
height: 100px;
position: relative;
top:-40px ;
left: 1800px ;
animation: leftright 16s ease-in-out infinite;
}

#wolkendoos3 {
  width: 300px;
height: 100px;
position: relative;
top: -80px ;
left: 1600px ;
animation: leftright 10s ease-in-out infinite;
}

#wolkendoos4 {
  width: 300px;
height: 100px;
position: relative;
top: -200px ;
left: 1850px ;
animation: leftright 12s ease-in-out infinite;
}

#wolkendoos5 {
  width: 300px;
height: 100px;
position: relative;
top: -160px ;
left: 1600px ;
animation: leftright 13s ease-in-out infinite;
}
#wolkendoos6 {
  width: 300px;
height: 100px;
position: relative;
top: -200px ;
left: 1850px ;
animation: leftright 15s ease-in-out infinite;
}
#wolkendoos7 {
  width: 300px;
height: 100px;
position: relative;
top: -75px ;
left: 1500px ;
animation: leftright 12s ease-in-out infinite;
}

#wolkendoos8 {
  width: 300px;
height: 100px;
position: relative;
top: -650px;
left: 1700px ;
animation: leftright 14s ease-in-out infinite;
}
.wolklangdeel {
 width: 150px;
 height: 50px;
 border-radius: 100px;
 background-color: white;
 position: relative;
 top: -100px;
 left: 100px;
}

.wolkkleinbolletje{
width: 50px;
height: 50px;
border-radius: 25px;
background-color: white;
position: relative;
top: -10px;
left: 120px;
}

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

#bodumdoos{
  width: 800px;
height: 50px;
position: relative;
left: 100px;
top: 125px;

}


 .bodum2 {
  width: 400px;
  height: 50px;
  position: relative;
  background-color: rgb(102, 28, 1);
  border-radius: 25px;
  top: 150px;
left: 425px;
 }

.bodum1 {
  width: 250px;
  height: 50px;
  position: relative;
  background-color: rgb(102, 28, 1);
  border-radius: 25px;
  top: 225px;
  left: 500px;
}

.bodum3 {
  width: 550px;
  height: 50px;
  position: relative;
  background-color: rgb(102, 28, 1);
  border-radius: 25px;
  top: 75px;
  left: 350px;
}


.bodum4 {
  width: 700px;
  height: 50px;
  position: relative;
  background-color: rgb(102, 28, 1);
  border-radius: 25px;
  top: 0px;
  left: 275px;
}

.bodum5 {
  width: 750px;
  height: 50px;
  position: relative;
  background-color:rgb(5, 202, 5);
  border-radius: 25px;
  top: -75px;
  left: 255px;
}


#driehoek1{
  width: 0px;
  height: 0px;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 150px solid #343333 ;
  position: relative;
    top: -274px;
  left: 300px;
 
}

#driehoek2{
  width: 0px;
  height: 0px;
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
  border-bottom: 200px solid #343333 ;
  position: relative;
    top: -474px;
  left: 320px;
 
}

#driehoek3{
  width: 0px;
  height: 0px;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 125px solid #343333 ;
  position: relative;
    top: -599px;
  left: 420px;
  
}


#driehoek4{
  width: 0px;
  height: 0px;
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
  border-bottom: 175px solid #343333 ;
  position: relative;
    top: -773px;
  left: 800px;
  
}

#driehoek5{
  width: 0px;
  height: 0px;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 120px solid #343333 ;
  position: relative;
    top: -893px;
  left: 890px;
  
}

#bomendoos1{
  width: 100px;
height: 100px;
position: relative;
left: 170px;
top: -350px;

}



.boom1{
  width: 20px;
  height: 75px;
  background-color: rgb(87, 29, 0);
  position:relative;
  top: 500px;
  left: 700px;
}

.bladeren1 {
  width: 30px;
  height: 50px;
  background-color: green;
  position: relative;
  top: 400px;
  left: 695px;
}

.bladeren2 {
  width: 60px;
  height: 35px;
  background-color: green;
  position: relative;
  top: 370px;
  left: 680px;
}


#bomendoos2{
  width: 100px;
height: 100px;
position: relative;
left: 60px;
top: -450px;

}


#bomendoos3{
  width: 100px;
height: 100px;
position: relative;
left: -40px;
top: -550px;

}

@keyframes leftright{
  0% {transform: translateX(0px);}
  100% {transform: translateX(-2150px);}
  
}

@keyframes updown {
  0% {transform: translateY(0px);}
  50% {transform: translateY(100px);}
  100% {transform: translateY(0px);}
  
}


#vliegtuig {
  width: 75px;
  height: 225px;
  position: relative;
  top: -200px;
  left: 600px;
}

.onderkant1{
  width: 200px;
  height: 50px;
  position: relative;
  border-radius: 100px;
  background-color: white;
  top: -555px;
  left: 420px;
}

.onderkant2{
  width: 200px;
  height: 50px;
  position: relative;
  border-radius: 100px;
  background-color: grey;
  top: -580px;
  left: 405px;

}


#vliegtuig{
  width: 0px;
  height: 0px;
  position: relative;
  border: thin solid red;
  top: -240px;
  left: 480x;
animation: vliegtuig 10s ease-in-out infinite;
}

.vleugel1 {
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 80px 0 0 81px;
  border-color: transparent transparent transparent grey;
  transform: rotate(180deg);
  position: relative;
  top: -580px;
  left: 463px;
}

.vleugel2{
  width: 0px;
   height: 0px;
   border-style: solid;
   border-width: 0 0 80px 81px;
   border-color: transparent transparent grey transparent;
   transform: rotate(0deg);
  position: relative;
  top: -815px;
  left: 463px;

}

.achtervleugel{
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 0 0 110px 100px;
  border-color: transparent transparent grey transparent;
  transform: rotate(0deg);
 position: relative;
 top: -850px;
 left: 520px;
}

@keyframes vliegtuig{
  0% {transform: rotate(360deg);}
  100% {transform: rotate(0deg);}
}