html {
    scroll-behavior: smooth;
}
body {
    --animate-duration: 0.5s;
}

.animation-container {
    background: white;
    position: fixed;
    height: 100%;
    width: 100%;
  }
  
  .shape1 {
    position: absolute;
    top: 42%;
    left: 70%;
    width: 25rem;
    height: 25rem;
    background: lightblue;
    border-radius: 24% 76% 77% 23% / 30% 30% 70% 70%;
    filter: blur(6rem);
    animation: shape1 20s infinite;
  }
  
  @keyframes shape1 {
    0% {
      transform: translate(0, 0);
      border-radius: 24% 76% 77% 23% / 30% 30% 70% 70%;
    }
    25% {
      transform: translate(-55%, -10%);
      border-radius: 28% 72% 81% 19% / 78% 25% 75% 22%;
      height: 50rem;
      width: 80rem;
    }
    50% {
      transform: translate(-90%, -10%);
      border-radius: 60% 40% 0% 100% / 1% 74% 26% 99%;
    }
    75% {
      transform: translate(-30%, -10%);
      border-radius: 0% 100% 100% 0% / 0% 100% 100% 0%;
      height: 30rem;
      width: 45rem;
    }
    100% {
      transform: translate(0%, 0%);
      border-radius: 24% 76% 77% 23% / 30% 30% 70% 70%;
    }
  }
  
  .shape2 {
    position: absolute;
    top: 33%;
    left: 40%;
    width: 35rem;
    height: 25rem;
    background: pink;
    border-radius: 73% 27% 77% 23% / 53% 4% 96% 47%;
    filter: blur(12rem);
    animation: shape2 35s infinite;
  }
  
  @keyframes shape2 {
    0% {
      transform: translate(0, 0);
      border-radius: 73% 27% 77% 23% / 53% 4% 96% 47%;
    }
    25% {
      transform: translate(-55%, -55%);
      border-radius: 28% 72% 81% 19% / 78% 25% 75% 22%;
      height: 50rem;
      width: 50rem;
    }
    50% {
      transform: translate(-70%, -70%);
      border-radius: 60% 40% 0% 100% / 1% 74% 26% 99%;
    }
    75% {
      transform: translate(-30%, -30%);
      border-radius: 0% 100% 100% 0% / 0% 100% 100% 0%;
    }
    100% {
      transform: translate(0%, 0%);
      border-radius: 73% 27% 77% 23% / 53% 4% 96% 47%;
    }
  }
  
  .shape3 {
    position: absolute;
    top: 20%;
    left: 80%;
    width: 25rem;
    height: 25rem;
    background: lightblue;
    border-radius: 70% 30% 80% 20% / 42% 25% 75% 58%;
    filter: blur(14rem);
    animation: shape3 35s infinite;
  }
  
  @keyframes shape3 {
    0% {
      transform: translate(0, 0);
      border-radius: 70% 30% 80% 20% / 42% 25% 75% 58%;
    }
    25% {
      transform: translate(-125%, -25%);
      border-radius: 28% 72% 81% 19% / 78% 25% 75% 22%;
      height: 50rem;
      width: 50rem;
    }
    50% {
      transform: translate(-90%, -35%);
      border-radius: 60% 40% 0% 100% / 1% 74% 26% 99%;
    }
    75% {
      transform: translate(-30%, -40%);
      border-radius: 0% 100% 100% 0% / 0% 100% 100% 0%;
    }
    100% {
      transform: translate(0%, 0%);
      border-radius: 70% 30% 80% 20% / 42% 25% 75% 58%;
    }
  }
  
  .shape4 {
    position: absolute;
    top: 42%;
    left: 70%;
    width: 25rem;
    height: 25rem;
    background: pink;
    border-radius: 24% 76% 77% 23% / 30% 30% 70% 70%;
    filter: blur(5rem);
  }
  
  
  
  .shape6 {
    position: absolute;
    top: 20%;
    left: 80%;
    width: 25rem;
    height: 25rem;
    background: lightblue;
    border-radius: 70% 30% 80% 20% / 42% 25% 75% 58%;
    filter: blur(5rem);
  }