body{
    margin: 0px;
    padding: 0px;
}

main{
    height: 100vh;

    background-image: linear-gradient(orange,red,black);
    display: flex;
    justify-content: center;
    align-items: center;

    overflow: hidden;

    position: relative;
}

.sun{
    background-color: yellow;
    height: 170px;
    width: 170px;
    border-radius: 50%;

    animation-name: move;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
    animation-direction: alternate;

    position: absolute;
    
}


@keyframes move{
   0%{
    bottom:-150px;
    opacity: 0.6;
   }

   100%{
    bottom: 250px;
    box-shadow: 0px 0px 50px 20px yellow;
    opacity: 1;
   }
}