body {
  overflow: hidden;
}

section {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  justify-items: center;
  align-items: center;
  height: 100vh;
}

.circle {
  width: 50px;
  height: 50px;
  border: 3px solid rgb(255, 0, 149);
  border-radius: 100%;
  animation: waterdrop 2s infinite;
}

@keyframes waterdrop {
  0% {
    border: 3px solid rgb(255, 0, 149);
  }
  50% {
    border: 1px solid rgb(255, 0, 149);
  }
  100% {
    width: 400px;
    height: 400px;
    border: none;
  }
}