body {
    height: 100vh;
    background-color: rgb(146, 235, 235);
    background-image: linear-gradient( rgb(100, 232, 255),rgb(164, 255, 255));

}
#Island {
    width: auto;
    height: 100vh;
    border: 0px solid red;
    margin: 0 auto;
    display: flex; 
    flex-direction: column;
    align-items: center; 
    animation: Bobbin 2s ease-in-out infinite;
    position: relative;
}
    .MainPart{
        width: 10px;
        height: 10px;
        border-left: 300px solid transparent;
        border-right: 300px solid transparent;
        border-top: 140px solid #423d3d;
        position: absolute;
        top: 380px ;
        left: 690px;
        z-index: 3;
    
    }
    .Second{
        width: 10px;
        height: 10px;
        border-left: 150px solid transparent;
        border-right: 250px solid transparent;
        border-top: 140px solid #6e6464;
        position: absolute;
        top: 380px ;
        left: 540px;
        z-index: 3;
    }
    .Third{
        width: 10px;
        height: 10px;
        border-left: 150px solid transparent;    
        border-right: 250px solid transparent;
        border-top: 140px solid #474545;
        position: absolute;
        top: 380px ;
        left: 1110px;
        z-index: 3;
    }
    .Fourth{
        width: 10px;
        height: 10px;
        border-left: 150px solid transparent;    
        border-right: 250px solid transparent;
        border-top: 140px solid #3a3636;
        position: absolute;
        top: 420px ;
        left: 960px;
        z-index: 2;
    }
    .Fifth{
        width: 10px;
        height: 10px;
        border-left: 150px solid transparent;    
        border-right: 250px solid transparent;
        border-top: 140px solid #3a3434;
        position: absolute;
        top: 440px ;
        left: 700px;
        z-index: 2;
    }
    .Sixth{
        width: 10px;
        height: 10px;
        border-left: 150px solid transparent;    
        border-right: 250px solid transparent;
        border-top: 280px solid #333030;
        position: absolute;
        top: 440px ;
        left: 800px;
        z-index: 1;
    }
    .Green{
        width: 980px;
        height: 20px;
        background-color: greenyellow;
        position: absolute;
        top: 365px ;
        left: 540px;
        z-index: 3;
    }
    .Green2{
        width: 980px;
        height: 10px;
        background-color: rgb(84, 133, 10);
        position: absolute;
        top: 360px ;
        left: 540px;
        z-index: 3;
    }
    .Mountin1{
        width: 0px;
        height: 0px;
        border-left: 50px solid transparent;
	    border-right: 50px solid transparent;
	    border-bottom: 120px solid #3a3838;
        position: absolute;
        top: 190px;
        left: 1300px;
    }
    .Mountin2{
        width: 0px;
        height: 0px;
        border-left: 100px solid transparent;
        border-right: 100px solid transparent;
        border-bottom: 180px solid #4d4d4d;
        position: absolute;
        top: 190px;    
        left: 1300px;
    }
    .Mountin3{
        width: 0px;
        height: 0px;
        border-left: 75px solid transparent;
        border-right: 75px solid transparent;
        border-bottom: 300px solid #444242;
        position: absolute;
        top: 70px;
        left: 1200px;
    }
    .Mountin4{
        width: 0px;
        height: 0px;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 172px solid #3f3c3c;
        position: absolute;
        top: 200px;
        left: 1150px;
    }
    .Mountin5{
        width: 0px;
        height: 0px;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 100px solid #4b4848;
        position: absolute;
        top: 270px;
        left: 1100px;
    }
    .Treee1{
        width: 25px;
        height: 100px;
        position: absolute;
        top: 265px;
        left: 700px;
        background-color: rgb(75, 0, 0);
    }
    .Treee2{
        width: 30px;
        height: 100px;
        position: absolute;
        top: 265px;
        left: 900px;
        background-color: rgb(122, 69, 7);
    }
    .Stumped1{
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 100px solid  rgb(107, 160, 9);
        position: absolute;
        top: 220px;
        left: 865px;
    }
    .Stumped2{
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 100px solid rgb(7, 122, 26);
        position: absolute;
        top: 220px;
        left: 665px;
        outline-color: rgb(7, 122, 26);
    }
    

#CloudContained {
    width: 180px;
    height: 100px;
    border: 0px solid red;
    position: absolute;
    top: 0px;
    left: -200px;
    margin: 0 auto;
    animation: Clouders 10s linear infinite
}
    .partcloud1{
        height: 70px;
        width: 70px;
        border-color: white;
        border-radius: 50%;
        background-color: white;
        position: absolute; /* Change to absolute */
        top: 0px; 
        left: 10px; 
      }
    
    .partcloud2{
        height: 50px;
        width: 100px;
        background-color: white;
        position: absolute;
        top: 20px; 
        left: 50px; 
        
      }
    .partcloud3{
        height: 60px;
        width: 60px;
        border-color: white;
        border-radius: 50%;
        background-color: white;
        position: absolute; 
        top: 10px; 
        left: 110px; 
      }
    .partcloud4{
        height: 70px;
        width: 60px;
        border-color: white;
        border-radius: 50%;
        background-color: white;
        position: absolute; 
        top: 0px; 
        left: 70px; 
      }
#CloudContained2 {
    width: 180px;
    height: 100px;
    border: 0px solid red;
    position: absolute;
    top: 200px;
    left: -200px;
    margin: 0 auto;
    animation: Clouders 13s linear infinite
}
#CloudContained3 {
    width: 180px;
    height: 100px;
    border: 0px solid red;
    position: absolute;
    top: 400px;
    left: -200px;
    margin: 0 auto;
    animation: Clouders 8s linear infinite
}
#CloudContained4 {
    width: 180px;
    height: 100px;
    border: 0px solid red;
    position: absolute;
    top: 600px;
    left: -200px;
    margin: 0 auto;
    animation: Clouders 19s linear infinite
}
#CloudContained5 {
    width: 180px;
    height: 100px;
    border: 0px solid red;
    position: absolute;
    top: 800px;
    left: -200px;
    margin: 0 auto;
    animation: Clouders 5s linear infinite
}
#TheSun {
    width: 300px;
    height: 300px;
    border: 0px solid red;
    position: absolute;
    top: 0px;
    left:0px;
    margin: 0 auto;
}
.Sunny {
width: 200px;
height: 200px;
position:absolute;
background-color: yellow;
top: 0px;
left: 0px;
margin: 0 auto;
cursor: pointer; 
display: flex; 
justify-content: center;
align-items: center; 
border: none; 
z-index: 10; 
transition: background-color 0.3s; 
}
.Sunny:hover {
    background-color: gold; 
}
@keyframes Clouders {
    0% {left: -200px;}
    100% {left: 2000px;}
  }
  @keyframes Bobbin {
    0% {top: -10px;}
    50% {top: 10px;}
    100% {top: -10px;}
  }