@keyframes rising{
  0%{
    transform:rotate(0deg) translate(-70vh);
  
  }
  100%{
    transform:rotate(360deg) translate(-70vh);
  }
}

@keyframes lighting{

    0%{  background: darkblue;  }
    25%{  background: blue;  }
    50%{  background: darkblue;  }
    75%{  background: black;  }
    100%{  background: darkblue; }
}

@keyframes cloud{

    0%{

        margin-left: 0;
    }

    0%{

        margin-left: 200vw;
    }
}

body{

    min-height: 100vh;
    animation: lighting 10s linear infinite;
}

h1{

    color: white;
    font-size: 3vw;
    margin: 1vw;
}

#sun{

    width: 20vw;
    height: 20vw;
    background: yellow;
    border-radius: 10vw;
    position: fixed;
    margin-left: calc(50vw - 10vw);
    margin-top: calc(100vh - 10vw);
    animation: rising 10s linear infinite;
    background: radial-gradient(lightyellow, yellow); 
    box-shadow: 0 0 20vw yellow;

}

.cloud{
    
    position: fixed;
    width: 20vw;
    height: 15vw;
    border-radius: 15vw;
    background: linear-gradient(rgba(255, 255, 255, 0.5), transparent, rgba(0, 0, 255, 0.5));
    animation: cloud 30s linear infinite;
}

#cloud1{

    top: 40vh;
    left: -20vw;
}

#cloud2{

    top: 20vh;
    left: -100vw;
}

#cloud3{

    top: 10vh;
    left: -35vw;
}


#cloud4{

    top: 50vh;
    left: -60vw;
}