body {
	transition: 1.5s;
	}
	.night-toggle {
	width: 33px;
	height: 33px;
	right: 200px;
	top: 20px;
	position: absolute;
	}
	.night-toggle:hover{
	  cursor: pointer;
	}
	.moon {
	  background-color: transparent;
	  box-shadow: -6px 1px 0 3px #275e8e;
	  border-left:10px solid #27476D;
	  border-radius:50%;
	  width: 200px;
	  height: 200px;
	  margin-left:8px;
	  margin-top:0px;
	  transition: 2s;
	}
	.sun {
	  background-color: #fdd462;
	  box-shadow: 2px 0px 0px 1px #D19C29;
	  border-radius:50%;
	  width: 200px;
	  height: 200px;
	  transition: 2s;
	}
	
#Good {
background-color: #141D26;
}

#wolkendoos {
    width: 160px;
    height: 100px;
    position: relative;
    animation: B 20s infinite;
    margin: 0 auto;
    top: 300px;
}

@keyframes B {
    0% {left: 800px;}
    50% {left: -900px;}
    100% {left: -900px;}
}
#wolkenlang {
    width: 160px;
    height: 60px;
    border-radius: 100px;
    background-color: white;
    position: relative;
    top: 30px;
}

#wolkenbolgroot {
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background-color: white;
    position: relative;
    top: -10px;
    left: 13px;
}

#wolkenbolklein {
    width: 75px;
    height: 75px;
    border-radius: 50px;
    background-color: white;
    position: relative;
    top: -80px;
    left: 60px;
}


#wolkendoos1 {
    width: 160px;
    height: 100px;
    position: relative;
    margin: 0 auto;
    animation: A 20s infinite;
    top: 300px;
    left: 100px;
}
@keyframes A {
    0% {left: -800px;}
    50% {left: 800px;}
    100% {left: 800px;}
}

#wolkenlang1 {
    width: 160px;
    height: 60px;
    border-radius: 100px;
    background-color: white;
    position: relative;
    top: 30px;
}

#wolkenbolgroot1 {
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background-color: white;
    position: relative;
    top: -10px;
    left: 13px;
}

#wolkenbolklein1 {
    width: 75px;
    height: 75px;
    border-radius: 50px;
    background-color: white;
    position: relative;
    top: -80px;
    left: 60px;
}


#wolkendoos2 {
    width: 160px;
    height: 100px;
    position: relative;
    animation: B1 20s infinite;
    margin: 0 auto;
    top: 300px;
}

@keyframes B1 {
    0% {left: 900px;}
    50% {left: -900px;}
    100% {left: -900px;}
}
#wolkenlang2 {
    width: 160px;
    height: 60px;
    border-radius: 100px;
    background-color: white;
    position: relative;
    top: 30px;
}

#wolkenbolgroot2 {
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background-color: white;
    position: relative;
    top: -10px;
    left: 13px;
}

#wolkenbolklein2 {
    width: 75px;
    height: 75px;
    border-radius: 50px;
    background-color: white;
    position: relative;
    top: -80px;
    left: 60px;
}

#wolkendoos3 {
width: 160px;
height: 100px;
position: relative;
margin: 0 auto;
animation: A1 20s infinite;
top: -100px;
left: 100px;
}
@keyframes A1 {
0% {left: -700px;}
30% { left: 400px;}
50% {left: 800px;}
100% {left: 800px;}
}

#wolkenlang3 {
width: 160px;
height: 60px;
border-radius: 100px;
background-color: white;
position: relative;
top: 30px;
}

#wolkenbolgroot3 {
width: 50px;
height: 50px;
border-radius: 25px;
background-color: white;
position: relative;
top: -10px;
left: 13px;
}

#wolkenbolklein3 {
width: 75px;
height: 75px;
border-radius: 50px;
background-color: white;
position: relative;
top: -80px;
left: 60px;
}

#eiland{
    width: 0;
	height: 0;
	border-left: 100px solid transparent;
	border-right: 100px solid transparent;
	border-top: 175px solid #4e2402;
    position: relative;
    animation: OO 20s infinite;
    left: 500px;
    bottom: 100px;
}

@keyframes OO {
    0% {left: 400px; bottom: 100px;}
    25% {left: 200px; bottom: 180px;}
    50% {left: 600px; bottom: 20px;}
    75% {right: 100px; bottom: 250px;}
    100%{left: 400px; bottom: 100px;}
}

#eiland1{
    width: 0;
	height: 0;
	border-left: 100px solid transparent;
	border-right: 100px solid transparent;
	border-top: 150px solid #4e2402;
    position: relative;
    left: 0px;
    bottom: 140px;
}

#grond {
    height: 30px;
  width: 200px;
  background-color: #05770f;
  border-radius: 50%;
  position: relative;
  bottom: 510px;
  left: -100px;
}

#grond1 {
    height: 30px;
  width: 200px;
  background-color: #05770f;
  border-radius: 50%;
  position: relative;
  bottom: 660px;
  left: 0px;
}
#schaduw {
    width: 29px;
	height: 150px;
	transform: skew(29deg);
	background: #271604;
    position: relative;
    right: 56px;
    bottom:320px;
}

#schaduw1 {
    width: 0;
	height: 0;
	border-left: 13px solid transparent;
	border-right: 14px solid transparent;
	border-top: 23px solid #271604;
    position: relative;
    left: -14px;
    top: -320px;
}

#schaduw2 {
    width: 29px;
	height: 130px;
	transform: skew(34deg);
	background: #271604;
    position: relative;
    right: -43px;
    bottom:493px;
}

#schaduw3 {
    width: 0;
	height: 0;
	border-left: 13px solid transparent;
	border-right: 14px solid transparent;
	border-top: 23px solid #271604;
    position: relative;
    right: -87px;
    bottom: 493px;
}

#berg {
    width: 0;
	height: 0;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 70px solid #555;
    position: relative;
    bottom: 780px;
    left: -60px;
}
#berg1 {
    width: 0;
	height: 0;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	border-bottom: 25px solid #555;
    position: relative;
    bottom: 810px;
    left: -90px;

}
#berg2 {
    width: 0;
	height: 0;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	border-bottom: 90px solid #555;
    position: relative;
    bottom: 860px;
    left: 140px;
}
#berg3 {
    width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 50px solid #555;
    position: relative;
    bottom: 910px;
    left: 90px;
}
#berg4 {
    width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 30px solid #555;
    position: relative;
    bottom: 940px;
    left: 10px;
}
#house {
	position:absolute;
	width:80px;
	height:40px;
	background:var(--house-color);
	border-bottom:30px solid var(--house-bottom-color);
	margin-top: -1025px;
	margin-left: 0px;
	transform:scale(.5);
}
#house:after {
	content:'';
	position:absolute;
	display:block;
	width:25px;
	height:15px;
	background:var(--house-window-color);
	margin-top:30px;
	margin-left:45px;
	border:1px solid var(--house-window-border-color);
}
#door {
	position:absolute;
	width:30px;
	height:40px;
	background:var(--house-door-color);
	margin-top:30px;
	margin-left:10px;
}
#door:after {
	content:'';
	position:absolute;
	display:block;
	width:10px;
	height:4px;
	background:var(--house-door-knob-color);
	margin-left:25px;
	margin-top:25px;
}

#chimney {
	content:'';
	position:absolute;
	display:block;
	background:var(--house-chimney-color);
	width:15px;
	height:40px;
	margin-top:-40px;
	margin-left:60px;
}

#roof {
	content:'';
	position:absolute;
	display:block;
	width:0;
	height:0;
	border-style:solid;
	border-width:0 50px 50px 50px;
	border-color:transparent transparent var(--house-roof-border-color) transparent;
	margin-left:-10px;
	margin-top:-40px;
}
#roof:after {
	content:'';
	position:absolute;
	display:block;
	width:0;
	height:0;
	border-style:solid;
	border-width:0 35px 35px 35px;
	border-color:transparent transparent var(--house-roof-color) transparent;
	margin-left:-35px;
	margin-top:13px;
}

:root {
	--house-color:#FFEE58;
	--house-bottom-color:#5D4037;
	--house-window-color:lightblue;
	--house-window-border-color:#9E9E9E;
	--house-door-color:#4E342E;
	--house-door-knob-color:white;
	--house-chimney-color:#3E2723;
	--house-roof-border-color:#3E2723;
	--house-roof-color:#5D4037;
}

#water {
    background: #287ad8;
	width: 30px;
	height: 10px;
	transform: skew(-20deg);
    position: relative;
    bottom: 980px;
    left: -90px;
}

#water1 {
    background: #287ad8;
	width: 5px;
	height: 15px;
	transform: skew(-20deg);
    position: relative;
    bottom: 1005px;
    left: -62px;
}

#boom {
    width: 10px;
    height: 30px;
    background-color: #4e2402;
    position: relative;
    bottom: 1030px;
    right: 10px;
}

#bladeren{
    width: 30PX;
    height: 18px;
    background-color: rgb(54, 122, 54);
    position: relative;
    border-radius: 100%;
    right: 10px;
    bottom: 10px;
}