/* styles.css */

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: pink;
  margin: 0;
}

.smallcircle {
  width: 50px; /* Starting size */
  height: 50px; /* Starting size */
  border-radius: 50%; /* Makes it a circle */
  background-color: red; /* Circle color */
  animation: growShrinkBlur 3s infinite; /* Animation applied */
}

.circle {
  width: 100px; /* Starting size */
  height: 100px; /* Starting size */
  border-radius: 50%; /* Makes it a circle */
  background-color: red; /* Circle color */
  animation: growShrinkBlur 3s infinite; /* Animation applied */
}

/* Keyframes for the animation */
@keyframes growShrinkBlur {
  0%, 100% {
      transform: scale(1); /* Original size */
      filter: blur(0); /* In focus */
  }
  50% {
      transform: scale(2); /* Bigger size */
      filter: blur(5px); /* Out of focus */
  }
}