*{
    padding:0px;
    margin:0px;
    border:none;
    outline:none;
    /* position: relative; */
    box-sizing:border-box;
    
}

body {
    height: 100svh;
    max-width: 100svw;
    background-image: linear-gradient(to bottom , yellow , red
    , black
    );
    display: flex;
    justify-content: center;
    align-items: center;
    /* position: relative; */
    /* position: relative; */
    
     
}

div{
    width: 100px;
    height: 100px;
    border-radius: 50px;
    background-color: yellow;
    box-shadow: 0px 0px 30px white;
    /* display: flex;
    justify-content: center;
    align-items: end; */
    animation-name: x;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
}

@keyframes x{
    0%{
        transform: translate(0px ,420px);
        opacity: 0.4;

    }
    100%{
       
        
        overflow: hidden;

    }
}