:root {
        --blob-size: 360px;
        --blob-speed: 8s;
        --blob-speed-scale: calc(0.75 * var(--blob-speed));
        --blob-speed-move: calc(1 * var(--blob-speed));
        --blob-speed-rotate: calc(2 * var(--blob-speed));
        --blob-opacity: 0.5;
        --blob-blur: 80px;
        --blob-color-1: hsl(304deg, 100%, 55%);
        --blob-color-2: hsl(182deg, 100%, 55%);
        --blob-color-3: hsl(216deg, 100%, 55%);
        /** --blob-color-4: hsl(60, 79%, 31%); */
    }
    

    .blobs {
        position: relative;
        width: 100%;
        filter: blur(var(--blob-blur));
        
    }

    .blobs * {
        backface-visibility: hidden;
        transform-origin: 50% 50%;
        transform-style: preserve-3d;
        will-change: transform;
    }

    .blobs:after {
        position: relative;
        display: block;
        width: 22rem;
        height: 38rem;
        background: hsla(0deg, 0%, 72%, 0.08);
        backdrop-filter: blur(8rem) saturate(1.6);
        border-radius: 1.5rem;
    }

    .blob {
        width: var(--blob-size);
        height: calc(0.25 * var(--blob-size));
        background-color: var(--blob-color-1);
        border-radius: 100%;
        opacity: var(--blob-opacity);
        mix-blend-mode: multiply;
        animation: blob ease-in-out var(--blob-speed-scale) infinite;
    }

    .blobs > :nth-child(2) .blob {
        background-color: var(--blob-color-2);
        animation-delay: calc(-0.8 * var(--blob-speed-scale));
    }

    .blobs > :nth-child(3) .blob {
        background-color: var(--blob-color-3);
        animation-delay: calc(-0.2 * var(--blob-speed-scale));
    }

    /**
    .blobs > :nth-child(4) .blob {
        background-color: var(--blob-color-4);
        animation-delay: calc(-6 * var(--blob-speed-scale));
    } 
    */

    @keyframes blob {
        0%, 100% {
            transform: scale(0.8, 2);
        }
        50% {
            transform: scale(1.4, 0.8);
        }
    }

    .blob-rotate {
        position: absolute;
        left: 50%;
        top: 50%;
        animation: blob-rotate linear var(--blob-speed-rotate) infinite alternate;
    }

    .blob-rotate:nth-child(2) {
        animation-duration: calc(2 * var(--blob-speed-rotate));
        animation-delay: calc(-1.5 * var(--blob-speed-rotate));
    }

    .blob-rotate:nth-child(3) {
        animation-direction: alternate-reverse;
        animation-duration: calc(0.8 * var(--blob-speed-rotate));
        animation-delay: calc(-1 * var(--blob-speed-rotate));
    }

    @keyframes blob-rotate {
        0% {
            transform: translate3d(-50%, -50%, 0) rotateZ(-28deg);
            transform-origin: 50% 100%;
        }
        100% {
            transform: translate3d(-50%, -50%, 0) rotateZ(28deg);
            transform-origin: 50% 0%;
        }
    }

    .blob-move {
        animation: blob-move ease-in-out var(--blob-speed-move) infinite;
    }

    .blobs > :nth-child(2) .blob-move {
        animation-delay: calc(-0.8 * var(--blob-speed-move));
    }

    .blobs > :nth-child(3) .blob-move {
        animation-delay: calc(-0.4 * var(--blob-speed-move));
    }

    @keyframes blob-move {
        0%, 100% {
            transform: translateX(30%);
        }
        50% {
            transform: translateX(-30%);
        }
    }