body{
    background-color: rgb(17, 118, 252);
}



#wolkendoos{
    width: 200px;
    height: 100px;
   
    z-index: -10;
    position: relative;
    margin: 0 auto;
    top: 300px;
    left: -470px;
    animation: wolkendoos 5s infinite

}

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

}

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

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

#wolkendoos2{
    width: 200px;
    height: 100px;
    z-index: -10;
    margin: 0 auto;
    position: relative;
    top: 400px;
    left: 600px;
    animation: wolkendoos2 5s infinite
}

#wolklangdeel2{
    width: 150px;
    height: 50px;
    border-radius: 100px;
    background-color: white;
    position: relative;
    top: -80px;


}

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

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

#wolkendoos3{
    width: 200px;
    height: 100px;
    z-index: -10;
    position: relative;
    margin: 0 auto;
    top: -200px;
    left: -200px;
    animation: wolkendoos3 5s infinite

}

#wolklangdeel3{
    width: 150px;
    height: 50px;
    border-radius: 100px;
    background-color: white;
    position: relative;
    top: -80px;

}

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

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

#wolkendoos4{
    width: 200px;
    height: 100px;
    z-index: -10;
    position: relative;
    margin: 0 auto;
    top: 300px;
    left: -630px;
    animation: wolkendoos4 5s infinite

}

#wolklangdeel4{
    width: 150px;
    height: 50px;
    border-radius: 100px;
    background-color: white;
    position: relative;
    top: -80px;

}

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

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

#wolkendoos5{
    width: 200px;
    height: 100px;
    z-index: -10;
    position: relative;
    margin: 0 auto;
    top: -350px;
    left: 470px;
    animation: wolkendoos5 5s infinite
}

#wolklangdeel5{
    width: 150px;
    height: 50px;
    border-radius: 100px;
    z-index: -10px;
    background-color: white;
    position: relative;
    top: -80px;

}

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

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

#compleet{
    position: relative; 
    animation: eilandbeweeg 5s infinite;
}

@keyframes eilandbeweeg {
    0% {top: -500px;}
    50% {top: -200px;}
    100% {top: -500px;}
}

#triangle-down {
	width: 0;
	height: 0;
	border-left: 100px solid transparent;
	border-right: 100px solid transparent;
	border-top: 200px solid #6c3b00;
    z-index: 1;
    margin: 0 auto;
    top: 300px;
}

#triangle-down2 {
	width: -0;
	height: -0;
	border-left: 30px solid transparent;
	border-right: 50px solid transparent;
	border-top: 100px solid #6c3b00;
    position: relative;
    top: -380px;
    left: 700px;
}

#triangle-down3 {
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 20px solid transparent;
	border-top: 100px solid #6c3b00;
    position: relative;
    top: -500px;
    left: 740px;
}

#oval {
    height: 115px;
    width: 205px;
    background-color: green;
    border-radius: 50%;
    z-index: 1;
    position: relative;
    left: 650px;
    top: -265px;
  }
  
  
#blok1 {
    height: 20px;
    width: 85px;
    background-color: #808080;
    border-radius: 5px;
    z-index: 1;
    transform: rotate(13deg);
    position: relative;
    top: -320px;
    left: 650px;
}

#blok2 {
    height: 20px;
    width: 125px;
    background-color: grey;
    border-radius: 5px;
    z-index: 1;
    transform: rotate(-13deg);
    position: relative;
    top: -344px;
    left: 729px;    
}

#boom1{ 
    height: 25px;
    width: 10px;
    background-color: rgb(84, 48, 29);
    z-index: 1;
    position: relative;
   top: -340px;
   left: 700px;
}

#boom2 {
    height: 30px;
    width: 30px;
    background-color: rgb(9, 174, 9);
    z-index: 1;
    border-radius: 20px;
    position: relative;
    top: -385px;
    left: 690px;
}


#boom3 {
    height: 25px;
    width: 10px;
    background-color: rgb(84, 48, 29);
    z-index: 1;
    position: relative;
   top: -400px;
   left: 790px;
}

#boom4 {
   height: 30px;
    width: 30px;
    background-color: rgb(9, 174, 9);
    z-index: 1;
    border-radius: 20px;
    position: relative;
    top: -445px;
    left: 780px;
}

#berg1 {
    width: 0;
	height: 0;
	border-left: 65px solid transparent;
	border-right: 80px solid transparent;
	border-bottom: 140px solid #414040;
    z-index: 1;
    border-radius: 30px;
    position: relative;
    top: -820px;
    left: 660px;
}

#berg2 {
	width: 0;
	height: 0;
	border-left: 45px solid transparent;
	border-right: 45px solid transparent;
	border-bottom: 120px solid #555;
    z-index: 1;
    border-radius: 5px;
    position: relative;
    top: -940px;
    left: 730px;
}


@keyframes wolkendoos{
    0% {top: -100px;}
    100% {top: 150px;}
}

@keyframes wolkendoos2{
    0% {top: -100px;}
    100% {top: 150px;}
}

@keyframes wolkendoos3{
    0% {top: -100px;}
    100% {top: 150px;}
}

@keyframes wolkendoos4{
    0% {top: -100px;}
   100% {top: 150px;}
}

@keyframes wolkendoos5{
    0% {top: -100px;}
    100% {top: 200px;}
}


#celestial-body {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    position: absolute;
    top: 20px;
    left: 20px;
    transition: background-color 0.5s ease, box-shadow 0.5s ease; /* Smooth transition */
  }
  
  /* Day (sun) styling */
  .sun {
    background-color: yellow;
    box-shadow: 0 0 30px 10px rgba(255, 223, 0, 0.7); /* Glowing sun effect */
  }
  
  /* Night (moon) styling */
  .moon {
    background-color: lightgray;
    box-shadow: 0 0 20px 5px rgba(255, 255, 255, 0.5); /* Soft moon glow */
  }
  
  #sky {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: transparent;
    display: none; /* Hidden initially */
  }
  
  .star {
    position: absolute;
    width: 3px;
    height: 3px;
    z-index: -10;
    background-color: white;
    border-radius: 50%;
    animation: twinkle 2s infinite ease-in-out;
  }
  
  @keyframes twinkle {
    0% { opacity: 0.5; }
    50% { opacity: 1; }
    100% { opacity: 0.5; }
  }

#vliegtuig {
    height: 100px;
    width: 200px;
    z-index: -10;
    position: relative;
    margin: 0px auto;
    animation: vliegtuig 8s infinite;
   
 

}

#B1 {
   height: 25px;
    width: 125px;
    background-color: white;
    border-radius: 2px;
    position: absolute;
    margin: 0 auto;
    top:  45px;
    left: 30px;
}

#B2{
    width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 55px solid white;
    position: absolute;
    top:  -8px;
    left: 30px;
}

#B3 {
	width: 0;
	height: 0;
	border-left: 20px solid transparent;
	border-right: 25px solid transparent;
	border-bottom: 75px solid #ffffff;
    position: absolute;
    top: -10px;
    left: 80px;

}

#B4 {
	width: 0;
	height: 0;
	border-left: 15px solid transparent;
	border-right: 20px solid transparent;
	border-top: 60px solid #ffffff;
    position: absolute;
    top:  70px;
    left: 80px;
    
}

#B5 {
	width: 0;
	height: 0;
	border-top: 15px solid transparent;
	border-left: 15px solid white;
	border-bottom: 12px solid transparent;
    position: absolute;
    top: 44px;
    left: 154px;
    
}

#l1{
    width: 6px;
    height: 6px;
    background-color: rgb(255, 255, 0);
    border-radius: 40px;
    position: absolute;
    margin: 0px;
    top: 55px;
    left: 84px; 
    box-shadow: 0 0 20px 2px gold;
}

#l2{
    width: 6px;
    height: 6px;
    background-color: rgb(255, 255, 0);
    border-radius: 40px;
    position: absolute;
    margin: 0px;
    top: 55px;
    left: 99px; 
    box-shadow: 0 0 20px 2px gold;
}

#l3{
    width: 6px;
    height: 6px;
    background-color: rgb(255, 255, 0);
    border-radius: 40px;
    position: absolute;
    margin: 0px;
    top: 55px;
    left: 114px; 
    box-shadow: 0 0 20px 2px gold;
}


#l4{
    width: 6px;
    height: 6px;
    background-color: rgb(255, 255, 0);
    border-radius: 40px;
    position: absolute;
    margin: 0px;
    top: 55px;
    left: 69px; 
    box-shadow: 0 0 20px 2px gold;
}

#l5{
    width: 6px;
    height: 6px;
    background-color: rgb(255, 255, 0);
    border-radius: 40px;
    position: absolute;
    margin: 0px;
    top: 55px;
    left: 129px; 
    box-shadow: 0 0 20px 2px gold;
}


@keyframes vliegtuig{
    0%{left: -800px;
    top: -200px;}
    12.5%{top: -200px;
    left: -600px;}
    25%{transform: rotate(360deg);}
    35%{top: 100px;
    left: -200px;}
    75%{transform: rotate(360deg) translate(0,0);}
    90%{top: -150px;
    left: 700px;}
    100%{top: -150px;
    left: 900px;}
    
    }