body {height: 100vh;
    background: rgb(8,91,158);
    background: linear-gradient(180deg, rgba(8,91,158,1) 11%, rgba(0,212,255,1) 66%);
    }

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

#wolkendoos2{
    width: 150px;
    height: 100px;
    position: relative;
    margin: 0 auto;
    top: 0px;
    left: -500px; 
}

#wolkendoos3{
    width: 150px;
    height: 100px;
    position: relative;
    margin: 0 auto;
    top: 250px;
    left: -400px;
}

.wolklangdeel {
    width: 150px;
    height: 50px;
    border-radius: 100px;
    background-color: white;
    position: relative;
    top: 50px;
}

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

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

#kleinwolkendoos {
    width: 110px;
    height: 100px;
    margin: 0 auto;
    position: relative;
    top: 250px;
    left: 500px; 
}

#kleinwolkendoos2 {
    width: 110px;
    height: 100px;
    margin: 0 auto;
    position: relative;
    top: -260px;
}

.miniwolklangdeel {
    width: 110px;
    height: 40px;
    border-radius: 50px;
    background-color: white;
    position: relative;
    top: 50px;
}

.miniwolkkleinbolletje {
    width: 45px;
    height: 45px;
    border-radius: 25px;
    background-color: white;
    position: relative;
    top: -15px;
    left: 10px;
}

.miniwolkgrootbolletje {
    width: 50px;
    height: 50px;
    border-radius: 50px;
    background-color: white;
    position: relative;
    top: -65px;
    left: 40px;
}

#island {
    width: 760px;
    height: 670px;
    margin: 0 auto;
    position: relative;
    top: -400px;
}

.mud {
  height: 10px;
  width: 700px;
  background-color: rgb(128, 57, 6);
  position: relative;
  top: 360px;
  left:50px;
  }

  .sand {
    height: 10px;
    width: 700px;
    background-color: #dab237;
    position: relative;
    top: 340px;
    left:50px; 
  }

  .grass {
    height: 10px;
    width: 700px;
    background-color:#63c105;
    position: relative;
    top: 320px;
    left:50px; 
  }

.ground1 {
    width: 0;
	height: 0;
	border-left: 100px solid transparent;
	border-right: 100px solid transparent;
	border-top: 300px solid rgb(54, 53, 53);
    position: relative;
    top: 340px;
    left: 300px;
}

.ground2 {
    width: 0;
	height: 0;
	border-left: 80px solid transparent;
	border-right: 100px solid transparent;
	border-top: 250px solid rgb(83, 82, 82);
    position: relative;
    top: 40px;
    left: 200px;
}

.ground3 {
    width: 0;
	height: 0;
	border-left: 75px solid transparent;
	border-right: 200px solid transparent;
	border-top: 300px solid rgb(132, 131, 131);
    position: relative;
    top: -210px;
    left: 50px;
}

.ground4 {
    width: 0;
	height: 0;
	border-left: 200px solid transparent;
	border-right: 100px solid transparent;
	border-top: 250px solid rgb(151, 151, 151);
    position: relative;
    top: -510px;
    left: 450px;
}

.ground5 {
    width: 0;
	height: 0;
	border-left: 80px solid transparent;
	border-right: 200px solid transparent;
	border-top: 270px solid rgb(86, 85, 85);
    position: relative;
    top: -760px;
    left: 400px;
}

.mountain1 {
    width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 200px solid rgb(132, 131, 131);
    position: relative;
    top: -1259px;
    left: 580px;
}

.mountain2 {
    width: 0;
	height: 0;
	border-left: 60px solid transparent;
	border-right: 60px solid transparent;
	border-bottom: 260px solid rgb(155, 154, 154);
    position: relative;
    top:-1519px;
    left: 630px;
}

.mountain3 {
    width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 230px solid rgb(83, 83, 83);
    position: relative;
    top: -1748px;
    left: 500px;
}

.mountain4 {
    width: 0;
	height: 0;
	border-left: 40px solid transparent;
	border-right: 40px solid transparent;
	border-bottom: 250px solid rgb(98, 98, 98);
    position: relative;
    top:-1998px;
    left: 460px;
}

.mountain5 {
    width: 0;
	height: 0;
	border-left: 60px solid transparent;
	border-right: 60px solid transparent;
	border-bottom: 200px solid rgb(143, 143, 143);
    position: relative;
    top: -2198px;
    left:390px;
}

.treelog {
    height: 200px;
    width: 40px;
    background-color: rgb(96, 43, 4);
    position: relative;
    top: -2398px;
    left: 80px;
}

.leaf1 {
  height: 70px;
  width: 70px;
  background-color: darkgreen;
  border-radius: 50%;
  position: relative;
  top: -2620px;
  left: 35px;
}

.leaf2 {
    height: 80px;
    width: 80px;
    background-color: darkgreen;
    border-radius: 50%;
    position: relative;
    top: -2720px;
    left: 60px;  
}

.leaf3 {
    height: 70px;
    width: 70px;
    background-color: darkgreen;
    border-radius: 50%;
    position: relative;
    top: -2765px;
    left: 90px;     
}

.leaf4 {
    height: 60px;
    width: 60px;
    background-color: darkgreen;
    border-radius: 50%;
    position: relative;
    top: -2815px;
    left: 70px;     
}

.apple1 {
    height: 20px;
    width: 20px;
    background-color:rgba(206, 2, 2, 0.856);
    border-radius: 50%;
    position: relative;
    top: -2870px;
    left: 60px;      
}

.apple2 {
    height: 20px;
    width: 20px;
    background-color:rgba(206, 2, 2, 0.856);
    border-radius: 50%;
    position: relative;
    top: -2930px;
    left: 80px;       
}

.apple3 {
    height: 20px;
    width: 20px;
    background-color:rgba(206, 2, 2, 0.856);
    border-radius: 50%;
    position: relative;
    top: -2910px;
    left: 120px;          
}

.treelog2 {
    height: 170px;
    width: 40px;
    background-color: rgb(96, 43, 4);
    position: relative;
    top: -2908px;
    left: 240px; 
}

.leaf5 {
    height: 70px;
    width: 70px;
    background-color: darkgreen;
    border-radius: 50%;
    position: relative;
    top: -3100px;
    left: 195px;  
}

.leaf6 {
    height: 80px;
    width: 80px;
    background-color: darkgreen;
    border-radius: 50%;
    position: relative;
    top: -3200px;
    left: 220px;  
}

.leaf7 {
    height: 70px;
    width: 70px;
    background-color: darkgreen;
    border-radius: 50%;
    position: relative;
    top: -3250px;
    left: 250px;     
}

.leaf8 {
    height: 60px;
    width: 60px;
    background-color: darkgreen;
    border-radius: 50%;
    position: relative;
    top: -3297px;
    left: 230px;     
} 

.apple4 {
    height: 20px;
    width: 20px;
    background-color:rgba(206, 2, 2, 0.856);
    border-radius: 50%;
    position: relative;
    top: -3355px;
    left: 217px;       
}

.apple5 {
    height: 20px;
    width: 20px;
    background-color:rgba(206, 2, 2, 0.856);
    border-radius: 50%;
    position: relative;
    top: -3410px;
    left: 250px;        
}

.apple6 {
    height: 20px;
    width: 20px;
    background-color:rgba(206, 2, 2, 0.856);
    border-radius: 50%;
    position: relative;
    top: -3390px;
    left: 280px;         
}

#sun {
    height: 200px;
    width: 200px;
    background-color:#fab209b6;
    border-radius: 50%;
    position: relative;
    top: -500px;
    left: 1300px; 
    transition: 2s;        
}

#wolkendoos {
    position: relative;
    animation: mymovewolk 5s linear infinite;
}

@keyframes mymovewolk {
    0% {left:-1000px; }
    100% {left: 1500px;}
}

#wolkendoos2 {
    position: relative;
    animation: mymovewolk2 5s linear infinite;
}

@keyframes mymovewolk2 {
    0% {left: -900px;}
    100% {left: 1800px;}
}

#wolkendoos3 {
    position: relative;
    animation: mymovewolk3 5s linear infinite;
}

@keyframes mymovewolk3 {
    0% {left: -1300px;}
    100% {left: 1300px;}
}

#kleinwolkendoos {
    position: relative;
    animation: mymoveklein 4s linear infinite;
}

@keyframes mymoveklein {
    0% {left: -900px;}
    100% {left: 1000px;}
}

#kleinwolkendoos2 {
    position: relative;
    animation: mymoveklein2 5s linear infinite;
}

@keyframes mymoveklein2 {
    0% {left: -1000px;}
    100% {left: 1000px;}
}

#island {
    position: relative;
    animation: mymoveisland 6s infinite;
}

@keyframes mymoveisland {
    0% {top: -700px;}
    50% {top: -800px;}
    100% {top: -700px;}
}