* {
    padding: 0px;
    margin: 0px;
    outline: none;
    box-sizing: border-box;
    list-style-type: none;
    text-decoration: none;
}

body {
    max-width: 100svw;
    height: 100svh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(to bottom,orange,red,rgb(72, 69, 69));
}

.sun {
    background-color: yellow;
    
    width: 150px;
    height: 150px;
    border-radius: 50%;
     animation-name: sun;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count:infinite;
    animation-fill-mode: both;
    animation-direction: alternate-reverse;
}
@keyframes sun {
    0% {
        transform: translate(0px,0px) ;
         box-shadow: 0px 0px 100px 30px rgb(201, 201, 7);
    }
    100% {
         transform: translate(0px,400px) ;
         opacity: .5;
    }

 }