.circle {
      width: 210px;
      height: 210px;
      border-radius: 50%;
      background-color: white;
      position: absolute;
    }

#circle1 {
      animation: moveRight 2s linear infinite;
      top: 10px; /* Starting position */
      left: 690px; /* Starting position */
    }

    #circle2 {
      animation: moveLeft 2s linear infinite;
      top: 80px; /* Starting position */
      left: 1000px; /* Starting position */
    }

    #circle3 {
      animation: moveRight 2s linear infinite;
      top: 570px; /* Starting position */
      left: 20px; /* Starting position */
      background-color: gray;
      width: 400px;
      height: 400px;
    }

     #circle4 {
      animation: moveLeft 2s linear infinite;
      top: 400px; /* Starting position */
      left: 900px; /* Starting position */
      width: 600px;
      height: 600px;
    }