.cloud
{
    position : absolute;
    width: 150px;
    height: 20px;
    border-radius: 50%;
   filter: blur(12px) brightness(80%);
    opacity: 100%;
    background-image: 
    linear-gradient(white,white, lightgrey,rgb(201, 201, 201),rgb(53, 53, 53));

   /* transition-property: left, right;
    transition-duration: 3s;
    transition-timing-function: ease-in-out;
    transition-delay: 1s;*/
    transition: transform 1s linear;
    z-index: 0;
}



/* tree and spawn location styles */



.tree
{   
    position: absolute;
    width: 0;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 100px solid #60912f;
    bottom: 0;
    left: 3%;
    transition: transform 1s linear;
    transform-origin: bottom;



}



.spawnLocation
{
    position: relative;
   /* background-color:rgb(148, 156, 77);
*/
  
    width: 100%;
    background-size: 100%;
    height: 10%;
    bottom: -90%;
    background-image: url("ground.png");
    filter: hue-rotate(202deg);
    
}



#_1
{
    width: 100%;
    position: relative;
    height: 8%;
    background-color:/* rgba(255, 127, 80, 0.568)*/ transparent;
    text-align: center;
    bottom: -82%;
} 

#view
{
    position: relative;
    display: flex;
    flex-direction: row;
    background-color:  rgb(29, 54, 75);
    height: 500px;
    width: 100%;
}

#withBorders
{
    display: flex;
    flex-direction: column;
    position: relative;
    width: 600px;
    height: 600px;
    background-color: #60912f;
}
#scene
{
    /*position: relative;*/
    background-color: rgb(67, 202, 255);
    width: 500px;
    height: 500px;  
  

}

#left_Border , #right_Border
{
    width: 20%;
    height: 100%;
    background-color: rgb(29, 54, 75);
}
#top_Border , #bottom_Border
{
    width: 100%;
    height: 20px;
    background-color:  rgb(29, 54, 75);
    z-index: 10;
}


/*
#left_Border
{
    width: 10px;
    height: 100%;
    background-color: red;
}
*/

html
{
    text-align: center;
}