Newton pendulm.css

*{
    margin: 0px;
    padding: 0px;
}
:root{
    --bgcenter:rgb(5, 138, 190);
    --shadow: 0 14px 28px rgba(0, 0, 0, 0.25),0 10px 10px rgba(0, 0, 0, 0.25);
}
.main-div{
    height: 100vh;
    width: 100vw;
    background-color: azure;
    display: grid;
    place-items: center;
}
.center-div{
    height: 60%;
    width: 60%;
    border: 2px solid var(--bgcenter);
    border-bottom:20px solid var(--bgcenter);
    box-shadow: var(--shadow);
    display: flex;
    justify-content: center; 
    /* position: relative;    */
}

.center-div div{
    margin: 0 20px;
    width: 3px;
    height: 70%;
    background-color: rgba(71, 82, 81, 0.5);
    position: relative;
    
}
.center-div div::before{
    content: '';
    width: 44px;
    height: 44px;
    background-color: rgba(71, 82, 81);
    border-radius: 50%;
    position: absolute;
    bottom: 0%;
    box-shadow: var(--shadow);
    transform: translate(-50%);
}
.center-div div:first-child{
    animation: leftball 2s linear infinite;
    transform-origin: top;
}
@keyframes leftball{
    0%{
        transform: rotate(0deg);
    }
    25%{
        transform: rotate(90deg);
    }
    50%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(0deg);
    }
}
.center-div div:last-child{
    animation: rightball 2s 1s linear infinite;
    transform-origin: top;
}
@keyframes rightball{
    0%{
        transform: rotate(0deg);
    }
    25%{
        transform: rotate(-90deg);
    }
    50%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(0deg);
    }
}