body {
    background-color: #0d73e7;
}

#wolkenzelf {
    width: 160px;
    height: 100px;
    position: relative;
    animation: A 10s infinite;
    margin: 0 auto;
    top: 300px;
}

@keyframes A {
    0% {left: 800px;}
    100% {left: -900px;}
}

#wolkendoos {
    width: 150px;
    height: 50px;
    border-radius: 100px;
    background-color: rgb(255, 255, 255);
    position: relative;
    top: 40px;
}
#wolkangdeel {
    width:  50px;
    height: 50px;
    border-radius: 100%;
    background-color: white;
    position: relative;
    top: -30px;
    left: 20px;
}
#wolkangdeel2 {
    width:  60px;
    height: 50px;
    border-radius: 100%;
    background-color: white;
    position: relative;
    top: -90px;
    left: 60px;
}
#wolkangdeel3 {
    width:  50px;
    height: 50px;
    border-radius: 100%;
    background-color: white;
    position: relative;
    top: -120px;
    left: 90px;
}
#wolkdeel4 {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background-color: white;
    position: relative;
    top: -35px;
    left: 90px;
}

#wolkdeel5 {
    width: 70px;
    height: 60px;
    border-radius: 100%;
    background-color: white;
    position: relative;
    top: -100px;
    left: 45px;
}
#wolkdeel6 {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background-color: white;
    position: relative;
    top: -140px;
    left: 10px;
}
#wolkendoos2 {
    width: 150px;
    height: 50px;
    border-radius: 100px;
    background-color: white;
    position: relative;
    animation:  B 10s infinite;
    top: 125px;
    left: 400px;
}
@keyframes B {
    0% {left: 1300px;}
    100% {left: -400px;}
}
#wolkdeel7 {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background-color: white;
    position: relative;
    top: -35px;
    left: 90px;
}

#wolkdeel8 {
    width: 70px;
    height: 60px;
    border-radius: 100%;
    background-color: white;
    position: relative;
    top: -100px;
    left: 45px;
}
#wolkdeel9 {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background-color: white;
    position: relative;
    top: -140px;
    left: 10px;
}
#wolkendoos3 {
    width: 150px;
    height: 50px;
    border-radius: 100px;
    background-color: white;
    position: relative;
    animation:  C 10s infinite;
    top: 125px;
    left: 400px;
}
@keyframes C {
    0% {left: -400px;}
    100% {left: 1500px;}
}
#driehoek {
	width: 0;
	height: 0;
	border-left: 55px solid transparent;
	border-right: 35px solid transparent;
	border-top: 100px solid #753e00;
    position: relative;
    animation: bono2 3s infinite;
    left: 600px;
    top: 100px;
}
@keyframes bono2 {
    0% {top: 100px;}
    50% {top: 50px;}
    100% {top: 100px}
}
#driehoek2 {
	width: 0;
	height: 0;
	border-left: 55px solid transparent;
	border-right: 75px solid transparent;
	border-top: 100px solid #753e00;
    position: relative;
    left: 200;
    top: -100px;
}

#ovaal1 {
    height: 30px;
    width: 120px;
    background-color: #006726;
    border-radius: 50%;
    position: relative;
    top: -377px;
    left: -55px;
  }
#ovaal2 {
    height: 30px;
    width: 100px;
    background-color: #006726;
    border-radius: 50%;
    position: relative;
    left: 29px;
    top: -405px;
  }

  body {
    transition: 1.5s;
    }
    .night-toggle {
    width: 33px;
    height: 33px;
    right: 20px;
    top: 20px;
    position: absolute;
    }
    .night-toggle:hover{
      cursor: pointer;
    }
    .moon {

      background-color: #fdd462;
      box-shadow: 2px 0px 0px 1px #D19C29;
      border-radius:50%;
      width: 200px;
      height: 200px;
      transition: 3s;
      margin-left: -180px;
      margin-top: 0px;
      
    }
    .sun {
      background-color: #27476D;
      box-shadow: -6px 1px 0 3px #275e8e;
      border-left:3px solid #27476D;
      border-radius:50%;
      width: 200px;
      height: 200px;
      margin-left:-1100px;
      margin-top:0px;
      transition: 3s;
    }
    

#berg1 {
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 20px solid #555;
    position: relative;
    top: -450px;
    left: 20px;
}  
#berg2 {
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 40px solid #555;
    position: relative;
    top: -490px;
    left: -40px;
}  
#berg3 {
    width: 0;
    height: 0;
    border-left: 18px solid transparent;
    border-right: 19px solid transparent;
    border-bottom: 28px solid #555;
    position: relative;
    top: -513px;
    left: -55px;
}  
#berg4 {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom:30px solid #555;
    position: relative;
    top: -549px;
    left: 40px;
}  
#berg5 {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 30px solid #555;
    position: relative;
    top: -571px;
    left: 99px;
}  
#pondmain {
    height: 10px;
    width: 20px;
    background-color: #275e8e;
    border-radius: 100%;
    position: relative;
    top: -690px;
    left: -46px;
}
#schaduwlang1 {
	width: 12px;
	height: 70px;
	transform: skew(29deg);
	background: #4f180e;
    position: relative;
    top: -180px;
    left: 30px;
}
#schaduwdriehoek1 {
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 7px solid transparent;
	border-top: 10px solid #4f180e;
    position: relative;
    top: -250px;
    left: 50px;
}
#schaduwdriehoek2 {
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 10px solid #4f180e;
    position: relative;
    top: -260px;
    left: -5px;
}
#schaduwlang2 {
	width: 10px;
	height: 70px;
	transform: skew(29deg);
	background: #4f180e;
    position: relative;
    top: -250px;
    left: -25px;
}
#waterval {
	width: 3px;
	height:20px;
	transform: skew(20deg);
	background: #275e8e;
    position: relative;
    top: -719px;
    left: -37px;
}
#bergtop1 {
    width: 0;
    height: 0;
    border-left: 6.8px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 14px solid #fff;
    position: relative;
    top: -618px;
    left: -27.5px;
}  
#bergtop2 {
    width: 0;
    height: 0;
    border-left: 3.5px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 9px solid #fff;
    position: relative;
    top: -614.9px;
    left: 106px;
}  
#boomstronk1 {
    height: 8px;
    width: 3px;
    background-color: #6a1000;
    position: relative;
    top: -600px;
}
#boomtop1 {
    height: 8px;
    width: 10px;
    border-radius: 100%;
    background-color: #06c44c;
    position: relative;
    top: -666px;
    left: -4px;
}
#boomstronk2 {
    height: 15px;
    width: 3px;
    background-color: #6a1000;
    position: relative;
    top: -610px;
    left: 70px;
}
#boomtop2 {
    height: 8px;
    width: 10px;
    border-radius: 100%;
    background-color: #06c44c;
    position: relative;
    top: -665px;
    left: 67px;
}
#boomstronk3 {
    height: 15px;
    width: 3px;
    background-color: #6a1000;
    position: relative;
    top: -650px;
    left: 10px;
}
#boomtop3 {
    height: 8px;
    width: 10px;
    border-radius: 100%;
    background-color: #06c44c;
    position: relative;
    top: -700px;
    left: 7px;
}
#boomstronk4 {
    height: 15px;
    width: 3px;
    background-color: #6a1000;
    position: relative;
    top: -650px;
    left: 100px;
}
#boomtop4 {
    height: 8px;
    width: 10px;
    border-radius: 100%;
    background-color: #06c44c;
    position: relative;
    top: -693px;
    left: 98px;
}