html {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    background-color: rgb(69,69,69);
}

.circle {
    width: 200px;
    height: 200px;
    background-color: rgb(150,150,150);
    border-radius: 50%;
    position: absolute;
    animation: moveCircle 5s linear infinite;
}

@keyframes moveCircle {
    0%, 100% { top: 0; left: 0; }
    25% { top: 0; left: calc(100% - 200px); } /* Move to the right */
    50% { top: calc(100% - 200px); left: calc(100% - 200px); } /* Move down */
    75% { top: calc(100% - 200px); left: 0; } /* Move to the left */
}

div1 {
    position: absolute;
    border-radius: 50%;
    animation: ripple 10s infinite;

}

@keyframes ripple{
  0%{
    transform: scale(0.8);
  }
  
  50%{
    transform: scale(2);
  }
  
  100%{
    transform: scale(0.8);
  }
}


.bigcircle{
    width: 300px;
    height: 300px;
    background: black;
    left: 40%;
    top: 35%;
}

.midiumcircle{
    width: 200px;
    height: 200px;
    background: rgb(33, 33, 33);
    left: 42.7%;
    top: 40%;
}

.smallcircle{
    width: 100px;
    height: 100px;
    background: rgb(51, 51, 51);
    left: 45.6%;
    top: 45%;
}