@media screen and (min-width: 768px) {

    @property --t {
        syntax: '<number>';
        initial-value: 0;
        inherits: true;
    }

    @keyframes timeOn {
        50% {
            --t: 1;
        }
    }

    #loader {
        display: block;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .blobs {
        filter: url("#goo");
        -webkit-filter: url("#goo");
    }

    .blobs>circle {
        fill: #fef3cc;
    }

    /* 使用 CSS 變數計算每個圓圈的位置和大小 */
    .blobs>circle:nth-child(1) {
        --n: 1;
    }

    .blobs>circle:nth-child(2) {
        --n: 2;
    }

    .blobs>circle:nth-child(3) {
        --n: 3;
    }

    .blobs>circle:nth-child(4) {
        --n: 4;
    }

    .blobs>circle:nth-child(5) {
        --n: 5;
    }

    .blobs>circle:nth-child(6) {
        --n: 6;
    }

    .blobs>circle:nth-child(7) {
        --n: 7;
    }

    .blobs>circle:nth-child(8) {
        --n: 8;
    }

    .blobs>circle:nth-child(9) {
        --n: 9;
    }

    .blobs>circle:nth-child(10) {
        --n: 10;
    }

    .blobs>circle:nth-child(11) {
        --n: 11;
    }

    .blobs>circle:nth-child(12) {
        --n: 12;
    }

    .blobs>circle:nth-child(13) {
        --n: 13;
    }

    .blobs>circle:nth-child(14) {
        --n: 14;
    }

    .blobs>circle:nth-child(15) {
        --n: 15;
    }

    .blobs>circle:nth-child(16) {
        --n: 16;
    }

    .blobs>circle:nth-child(17) {
        --n: 17;
    }

    .blobs>circle:nth-child(18) {
        --n: 18;
    }

    .blobs>circle:nth-child(19) {
        --n: 19;
    }

    .blobs>circle:nth-child(20) {
        --n: 20;
    }

    .blobs>circle:nth-child(21) {
        --n: 21;
    }

    .blobs>circle:nth-child(22) {
        --n: 22;
    }

    .blobs>circle:nth-child(23) {
        --n: 23;
    }

    .blobs>circle:nth-child(24) {
        --n: 24;
    }

    .blobs>circle:nth-child(25) {
        --n: 25;
    }

    .blobs>circle:nth-child(26) {
        --n: 26;
    }

    .blobs>circle:nth-child(27) {
        --n: 27;
    }

    .blobs>circle:nth-child(28) {
        --n: 28;
    }

    .blobs>circle:nth-child(29) {
        --n: 29;
    }

    .blobs>circle:nth-child(30) {
        --n: 30;
    }

    .blobs>circle:nth-child(31) {
        --n: 31;
    }

    .blobs>circle:nth-child(32) {
        --n: 32;
    }

    .blobs>circle:nth-child(33) {
        --n: 33;
    }

    .blobs>circle:nth-child(34) {
        --n: 34;
    }

    .blobs>circle:nth-child(35) {
        --n: 35;
    }

    .blobs>circle:nth-child(36) {
        --n: 36;
    }

    .blobs>circle:nth-child(37) {
        --n: 37;
    }

    .blobs>circle:nth-child(38) {
        --n: 38;
    }

    .blobs>circle:nth-child(39) {
        --n: 39;
    }

    .blobs>circle:nth-child(40) {
        --n: 40;
    }

    .blobs>circle:nth-child(41) {
        --n: 41;
    }

    .blobs>circle:nth-child(42) {
        --n: 42;
    }

    .blobs>circle:nth-child(43) {
        --n: 43;
    }

    .blobs>circle:nth-child(44) {
        --n: 44;
    }

    .blobs>circle:nth-child(45) {
        --n: 45;
    }

    .blobs>circle:nth-child(46) {
        --n: 46;
    }

    .blobs>circle:nth-child(47) {
        --n: 47;
    }

    .blobs>circle:nth-child(48) {
        --n: 48;
    }

    .blobs>circle:nth-child(49) {
        --n: 49;
    }

    .blobs>circle:nth-child(50) {
        --n: 50;
    }

    .blobs>circle {
        --x: calc(sin(var(--t) + var(--n) * 74.543 + 432.43312));
        --y: calc(cos(var(--t) + var(--n) * 2.34 + 1.432));
        --v: calc(0.5 + 0.5 * sin(var(--n) * var(--n) * 4.343 + 2.673));
        cx: calc(10% + var(--x) * 80%);
        cy: calc(10% + var(--y) * 80%);
        r: calc(var(--v) * 5% + 1%);
    }
}