body {
    background: rgb(13,123,219);
    background: linear-gradient(180deg, rgba(13,123,219,1) 0%, rgba(23,169,191,1) 43%, rgba(0,197,246,1) 93%);
    overflow: hidden;
}
.wolkendoos  {
    width: 500px;
    height: 50px;
    position: relative;
    top: -10px;
    left: 800px;
    opacity: 40%;
    animation: wolkenbeweging 20s infinite linear;
}
#wolklangdeel {
    height: 100px;
    width: 300px;
    position: relative;
    background-color: white;
    border-radius: 180px;
    top: 150px;
    left: 150px;
}
#wolkkleinbolletje {
    height: 75px;
    width: 75px;
    background-color: white;
    position: relative;
    border-radius: 360px;
    top: 0px;
    left: 200px;
}
#wolkgrootbolletje {
    height: 125px;
    width: 125px;
    background-color: white;
    position: relative;
    border-radius: 360px;
    top: -130px;
    left: 250px;
}
#wolkbolletje {
    height: 75px;
    width: 75px;
    background-color: white;
    position: relative;
    border-radius: 360px;
    top: -200px;
    left: 325px;
}
/*#wolkendoos {
    width: 500px;
    height: 500px;
    position: relative;
    top: -700px;
    left: 400px;
}*/
#zon {
    width: 100px;
    height: 100px;
    background-color: rgb(245, 231, 148);
    border-radius: 360px;
    position: relative;
    top: -250px;
    left: 30px;
}
#eiland {
    height: 200px;
    width: 900px;
    background-color: lawngreen;
    border-radius: 60px;
    position: relative;
    top: -50px;
    left: 400px;
}
#grasbanken {
    width: 700px;
    height: 100px;
    background-color: green;
    border-radius: 40px;
    position: relative;
    top: -200px;
    left: 500px;
}
#berg1 {
    width: 0px;
	height: 0px;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 100px solid grey;
    position: relative;
    top: -450px;
    left: 1000px;
}
#berg2 {
    width: 0;
	height: 0;
	border-left: 75px solid transparent;
	border-right: 75px solid transparent;
	border-bottom: 150px solid grey;
    position: relative;
    top: -600px;
    left: 500px;
}
#berg3 {
    width: 0;
	height: 0;
	border-left: 45px solid transparent;
	border-right: 45px solid transparent;
	border-bottom: 75px solid #555;
    position: relative;
    top: -675px;
    left: 600px;
}
#berg4 {
    width: 0;
	height: 0;
	border-left: 40px solid transparent;
	border-right: 40px solid transparent;
	border-bottom: 150px solid lightgray;
    position: relative;
    top: -825px;
    left: 1050px;
}
#berg5 {
    width: 0;
	height: 0;
	border-left: 75px solid transparent;
	border-right: 75px solid transparent;
	border-bottom: 175px solid #494444;
    position: relative;
    top: -1000px;
    left: 925px;
}
#bodem {
    width: 0px;
    height: 0px;
    border-left: 400px solid transparent;
    border-right: 400px solid transparent;
    border-top: 200px solid lightslategrey;
    position: relative;
    top: -800px;
    left: 450px;
}
#boomstam1 {
    height: 50px;
    width: 5px;
    background-color: #5C4033;
    position: relative;
    top: -1250px;
    left: 500px;
}
#boomstam2 {
    height: 50px;
    width: 5px;
    background-color: #7B3F00;
    position: relative;
    top: -1300px;
    left: 1100px;
}
#boomstam3 {
    height: 50px;
    width: 5px;
    background-color: #6F4E37;
    position: relative;
    top: -1350px;
    left: 870px;
}
#boomstam4 {
    height: 50px;
    width: 5px;
    background-color: #4A0404;
    position: relative;
    top: -1400px;
    left: 650px;
}

#bladeren1 {
    height: 30px;
    width: 30px;
    background-color: #32CD32;
    border-radius: 360px;
    position: relative;
    top: -1450px;
    left: 475px;
}
#bladeren2 {
    height: 30px;
    width: 30px;
    background-color: #32CD32;
    border-radius: 360px;
    position: relative;
    top: -1480px;
    left: 500px;
}
#bladeren3 {
    height: 30px;
    width: 30px;
    background-color: #32CD32;
    border-radius: 360px;
    position: relative;
    top: -1530px;
    left: 490px;
}
#bladeren4 {
    height: 30px;
    width: 30px;
    background-color: #32CD32;
    border-radius: 360px;
    position: relative;
    top: -1550px;
    left: 625px;
}
#bladeren5 {
    height: 30px;
    width: 30px;
    background-color: #32CD32;
    border-radius: 360px;
    position: relative;
    top: -1580px;
    left: 650px;
}
#bladeren6 {
    height: 30px;
    width: 30px;
    background-color: #32CD32;
    border-radius: 360px;
    position: relative;
    top: -1630px;
    left: 635px;
}
#bladeren7 {
    height: 30px;
    width: 30px;
    background-color: #32CD32;
    border-radius: 360px;
    position: relative;
    top: -1650px;
    left: 870px;
}
#bladeren8 {
    height: 30px;
    width: 30px;
    background-color: #32CD32;
    border-radius: 360px;
    position: relative;
    top: -1680px;
    left: 845px;
}
#bladeren9 {
    height: 30px;
    width: 30px;
    background-color: #32CD32;
    border-radius: 360px;
    position: relative;
    top: -1730px;
    left: 855px;
}
#bladeren10 {
    height: 30px;
    width: 30px;
    background-color: #32CD32;
    border-radius: 360px;
    position: relative;
    top: -1725px;
    left: 1075px;
}
#bladeren11 {
    height: 30px;
    width: 30px;
    background-color: #32CD32;
    border-radius: 360px;
    position: relative;
    top: -1755px;
    left: 1100px;
}
#bladeren12 {
    height: 30px;
    width: 30px;
    background-color: #32CD32;
    border-radius: 360px;
    position: relative;
    top: -1805px;
    left: 1085px;
}
body {
    transition: 0.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 #463c3c;
      border-left:3px solid #27476D;
      border-radius:50%;
      width: 20px;
      height: 20px;
      margin-left:8px;
      margin-top:0px;
      transition: 2s;
    }
    .sun {
      background-color: #f7d988;
      box-shadow: 2px 0px 0px 1px #f6d48a;
      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;
    }
    .nightmode {
        background: rgb(0,0,0);
        background: linear-gradient(180deg, rgb(5, 1, 47) 0%, rgb(1, 47, 139) 43%, rgba(14,81,140,1) 100%);
    }
@keyframes wolkenbeweging {
    0% { transform: translateX(150vw);}
    100% {transform: translateX(-100vw);}
}
.cloud1 { top: 55%; left: 50%; z-index: -1;animation-duration: 15s; }
.cloud2 { top: 60%; left: 10%; z-index: 1;animation-duration: 25s; }
.cloud3 { top: 70%; left: 80%; z-index: -1;animation-duration: 20s; } 
.cloud4 { top: 180%; left: 30%; z-index: 2; animation-duration: 30s; } 
.cloud5 { top: 290%; left: 70%; z-index: 2;animation-duration: 18s; }
/*#lucht {
    height: 100%;
    width: 100%;
    display: block;
}*/