body{
    padding: 0;
    margin: 0;
}
.circles{
    height:  100vh;
    background-color:#81dfdd;
    position: relative;
}
.circles span{
    height: 40px;
    width: 40px;
    border-radius: 50%;
    position: absolute;
    background: #81dfdd;
    box-shadow:  7px 7px 18px #72c4c2, 
                -7px -7px 18px #90faf8;
    animation: pressed 2s infinite forwards;
}
.circles span:first-child{
    top: 350px;
    left: 620px;
}
.circles span:nth-child(2){
    top: 300px;
    left: 645px;
    animation-delay: 0.125s;
}
.circles span:nth-child(3){
    top: 270px;
    left: 700px;
    animation-delay: 0.25s;
}
.circles span:nth-child(4){
    top: 300px;
    left: 755px;
    animation-delay: 0.375s;
}
.circles span:nth-child(5){
    top: 350px;
    left: 780px;
    animation-delay: 0.5s;
}
.circles span:nth-child(6){
    top: 400px;
    left: 755px;
    animation-delay: 0.625s;
}
.circles span:nth-child(7){
    top: 430px;
    left: 700px;
    animation-delay: 0.75s;
}
.circles span:nth-child(8){
    top: 400px;
    left: 645px;
    animation-delay: 0.875s;
}
@keyframes pressed{
    50%{
        box-shadow: inset 7px 7px 8px #73c6c5, 
                    inset -7px -7px 8px #8ff8f5;
    }
}