body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    margin: 0;
    background:  #222;
}

#defaultCanvas0
{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    box-shadow: 4px 4px 20px #fff;
    cursor: pointer;
    animation: gravedad 2.5s infinite linear;
}

@keyframes gravedad {
    0%{
        top:52%;
        box-shadow: 4px 4px 40px #fff,3px 3px 20px rgb(0, 47, 255);
    }
    25%{
        top:53%;
        box-shadow: 4px 4px 30px #fff,3px 3px 20px rgb(0, 255, 13);
    }
    50%{
        top:52%;
        box-shadow: 4px 4px 20px #fff,3px 3px 20px rgb(212, 0, 255);
    }
    75%{
        top:51%;
        box-shadow: 4px 4px 40px #fff,3px 3px 20px rgb(226, 73, 13);
    }
    100%{
        top:52%;
        box-shadow: 4px 4px 40px #fff,3px 3px 20px red;
    }
}