body {
    background-color: rgb(61, 125, 209);
}

#wolkendoos {
    width: 200px;
    height: 100px;
    margin: 0 auto;
    top: 10px;
    left: 500px;
    position: relative;
}

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

}

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

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

#wolkendoos2 {
    width: 200px;
    height: 100px;
    margin: 0 auto;
    position: relative;
    top: 350px;
    left: 750px;
}
#wolkendoos3 {
    width: 200px;
    height: 100px;
    margin: 0 auto;
    position: relative;
    top: -50px;
    left: 150px;
}

#wolkendoos4 {
    width: 200px;
    height: 100px;
    margin: 0 auto;
    position: relative;
    top: 175px;
    left: 100px;
}

#wolkendoos5 {
    width: 200px;
    height: 100px;
    margin: 0 auto;
    position: relative;
    top: -300px;
    left: 900px;
}
#bewegendewolken {
    width: 180px;
    height: 100px;
    position: relative;
    animation: bewegendewolken 4s infinite;
}

@keyframes bewegendewolken {
    0% {top:   0px;}
    30% {top: -30px;}
    50% {top: -10px;}
}

#triangle-down {
    width: 0px;
    height: 0px;
    border-left: 150px solid transparent;
    border-right: 120px solid transparent;
    border-top: 300px solid rgb(112, 69, 19);
    position: relative;
    top: 250px;
    left: 500px;

}
#oval {
    height: 175px;
    width: 274px;
    background-color: #098004;
    border-radius: 50%;
    top: -152px;
    left: 498px;
    position: relative;
  }

#triangle-up {
	width: 0;
	height: 0;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	border-bottom: 50px solid #471602;
    position: relative;
    top: -320px;
    left: 705px;
}

#triangle-up2 {
	width: 0;
	height: 0px;
	border-left: 30px solid transparent;
	border-right: 30px solid transparent;
	border-bottom: 70px solid #471602;
    position: relative;
    top: -400px;
    left: 670px;
}

#triangle-up3 {
	width: 2px;
	height: 0;
	border-left: 35px solid transparent;
	border-right: 35px solid transparent;
	border-bottom: 80px solid #471602;
    position: relative;
    top: -480px;
    left: 610px;
}

#triangle-up4 {
	width: 0;
	height: 0;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 90px solid #471602;
    position: relative;
    top: -540px;
    left: 730px;
}
#triangle-up5 {
	width: 0;
	height: 0;
	border-left: 30px solid transparent;
	border-right: 30px solid transparent;
	border-bottom: 60px solid #471602;
    position: relative;
    top: -630px;
    left: 640px;
}

#rectangle {
    height: 20px;
    width: 271px;
    background-color: #555;
    position: relative;
    top: -595px;
    left: 500px;
  }

#rectangle2 {
    height: 60px;
    width: 15px;
    background-color: #381304;
    position: relative;
    top: -685px;
    left: 515px;
}

#circle {
    height: 40px;
    width: 40px;
    background-color: #2fb606;
    border-radius: 50%;
    position: relative;
    top: -770px;
    left: 503px;
}

#rectangle3 {
    height: 50px;
    width:  15px;
    background-color: #3a0b02;
    position: relative;
    top: -690px;
    left: 700px;
}

#circle2 {
    height: 40px;
    width: 40px;
    background-color: #19bd0a;
    border-radius: 50%;
    position: relative;
    top: -770px;
    left: 687px;
  }

  #triangle-down2 {
	width: 0;
	height: 0;
	border-left:50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 200px solid rgb(112, 69, 19);
    position: relative;
    top: -710px;
    left: 537px;
}

#triangle-down3 {
	width: 0;
	height: 0;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	border-top: 170px solid rgb(75, 46, 13);
    position: relative;
    top: -830px;
    left: 590px;
    z-index: -3;
}

#triangle-down4 {
	width: 0;
	height:0;
	border-left: 35px solid transparent;
	border-right: 35px solid transparent;
	border-top: 250px solid rgb(112, 69, 19);
    position: relative;
    top: -1085px;
    left: 672px;
}

#triangle-down5 {
	width: 0;
	height: 0;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-top: 85px solid rgb(75, 46, 13);
    position: relative;
    top: -1210px;
    left: 665px;
    z-index: -3;
}

#triangle-down6 {
	width: 0;
	height: 0;
	border-left: -20px solid transparent;
	border-right: 90px solid transparent;
	border-top: 290px solid rgb(75, 46, 13);
    position: relative;
    top: -1415px;
    left: 540px;
    z-index: -3;
}

#triangle-up7 {
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 20px solid #fdfdfd;
    position: relative;
    top: -1895px;
    left: 745px;
}

#triangle-up8 {
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 25px solid #fdfcfc;
    position: relative;
    top: -1940px;
    left: 636px;
}

#circle4 {
    height: 20px;
    width: 35px;
    background-color: #faf6f6;
    border-radius: 50%;
    position: relative;
    top: -1500px;
    left: 1790px;
}

#circle5 {
    height: 20px;
    width: 35px;
    background-color: #fdfbfb;
    border-radius: 50%;
    position: relative;
    top: -1940px;
    left: 505px;
}

#sneeuwopboom {
    height: 20px;
    width: 35px;
    background-color: #faf8f8;
    border-radius: 50%;
    position: relative;
    top: -2187px;
    left: 690px
}

#square1 {
    height: 110px;
    width: 70px;
    background-color: #19e45d;
    position: relative;
    top: -2025px;
    left: 545px;
}

#square2 {
    height: 53px;
    width: 20px;
    background-color: #555;
    position: relative;
    top: -2025px;
    left: 570px;
}

#triangle-up9 {
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 60px solid #0e0d0d;
    position: relative;
    top: -2230px;
    left: 530px;
}

#deur {
    height: 50px;
    width: 30px;
    background-color: #080808;
    position: relative;
    top: -2188px;
    left: 565px;
}

#deurknop {
    height: 10px;
    width: 10px;
    background-color: #dfbf09;
    border-radius: 50%;
    position: relative;
    top: -2215px;
    left: 583px;
}

#schoorsteen {
    height: 35px;
    width: 15px;
    background-color: #0e0d0d;
    position: relative;
    top: -2340px;
    left: 600px;
  }

#eiland {
    width: 180px;
    height: 100px;
    position: relative;
    animation: eiland 5s infinite;
}
  
@keyframes eiland {
    0% {top:   0px;}
    30% {top: -30px;}
    50% {top: -10px;}
}

  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;
    }