/* Blob Container */
    .blob-container {
      position: relative;
      width: 100%;
      height: 100vh;
      overflow: ;
    }

    /* Blob Styling */
    .blob {
      position: absolute;
      width: 250px;
      height: 250px;
background-color:#99ffa7;
background-image:
radial-gradient(at 67% 30%, hsla(10,89%,69%,1) 0px, transparent 50%),
radial-gradient(at 97% 99%, hsla(225,62%,62%,1) 0px, transparent 50%),
radial-gradient(at 98% 71%, hsla(11,81%,68%,1) 0px, transparent 50%),
radial-gradient(at 60% 72%, hsla(306,83%,62%,1) 0px, transparent 50%),
radial-gradient(at 62% 51%, hsla(183,81%,79%,1) 0px, transparent 50%),
radial-gradient(at 32% 57%, hsla(298,74%,73%,1) 0px, transparent 50%),
radial-gradient(at 25% 87%, hsla(217,87%,66%,1) 0px, transparent 50%);
      
      opacity: 90%;
      border-radius: 50%;
      animation: float 10s infinite ease-in-out, morph 8s infinite ease-in-out;
    }

    /* Unique Blob Positions and Animation Delays */
    .blob:nth-child(1) {
      top: 10%;
      left: 20%;
      animation-delay: 0s, 0s;
    }

    .blob:nth-child(2) {
      top: 60%;
      left: 50%;
      animation-delay: 2s, 1s;
    }

    .blob:nth-child(3) {
      top: 30%;
      left: 80%;
      animation-delay: 4s, 2s;
    }

    /* Floating Animation */
    @keyframes float {
      0%, 100% {
        transform: translateY(0) translateX(0);
      }
      25% {
        transform: translateY(-15px) translateX(20px);
      }
      50% {
        transform: translateY(30px) translateX(-20px);
      }
      75% {
        transform: translateY(-20px) translateX(-10px);
      }
    }

    /* Morphing Animation for Organic Shapes */
    @keyframes morph {
      0%, 100% {
        border-radius: 50% 50% 50% 50%;
      }
      20% {
        border-radius: 60% 40% 70% 30%;
      }
      40% {
        border-radius: 40% 60% 30% 70%;
      }
      60% {
        border-radius: 50% 70% 60% 40%;
      }
      80% {
        border-radius: 70% 50% 40% 60%;
      }
    }