body {
    width: 100vw;
    height: 100vh;
    margin: 0;
  }

  section {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .middle-circle {
    width: 50px;
    height: 50px;
    border: 2px solid red;
    border-radius: 100%;
    animation: water-drop 2s ease infinite;
  }

  @keyframes water-drop {
    0% {
      transform: scale(0.5);
      opacity: 1;
    }

    100% {
      transform: scale(5);
      border-width: 0.5px;
      opacity: 0;
    }
  }