html {
    --spacing: 128px;
    --color-foreground: #c8e0ea;
    --color-background: #a3d4df;

    --gradient-spacing: calc(2 * var(--spacing)) calc(2 * var(--spacing));
    --gradient-1: var(--gradient-spacing) conic-gradient(at 42% 42%, #0000 75%, var(--color-foreground) 0);
    --gradient-2: var(--gradient-spacing) conic-gradient(at 21% 21%, #0000 75%, var(--color-background) 0);

    background: calc(.9 * var(--spacing)) calc(.9 * var(--spacing))/var(--gradient-2),
    calc(-.1 * var(--spacing)) calc(-.1 * var(--spacing))/var(--gradient-2),
    calc(.7 * var(--spacing)) calc(.7 * var(--spacing))/var(--gradient-1),
    calc(-.3 * var(--spacing)) calc(-.3 * var(--spacing))/var(--gradient-1),
    conic-gradient(from 90deg at 20% 20%, var(--color-background) 25%, var(--color-foreground) 0) 0 0/var(--spacing) var(--spacing);

    animation: m 4.20s infinite;
}

html[data-theme="dark"] {
    --color-foreground: #131313;
    --color-background: #000000;
}

@keyframes m {
    0% {
        background-position: calc(.9 * var(--spacing)) calc(.9 * var(--spacing)),
        calc(-.1 * var(--spacing)) calc(-.1 * var(--spacing)),
        calc(.7 * var(--spacing)) calc(.7 * var(--spacing)),
        calc(-.3 * var(--spacing)) calc(-.3 * var(--spacing)), 0 0
    }
    25% {
        background-position: calc(1.9 * var(--spacing)) calc(.9 * var(--spacing)),
        calc(-1.1 * var(--spacing)) calc(-.1 * var(--spacing)),
        calc(1.7 * var(--spacing)) calc(.7 * var(--spacing)),
        calc(-1.3 * var(--spacing)) calc(-.3 * var(--spacing)), 0 0
    }
    50% {
        background-position: calc(1.9 * var(--spacing)) calc(-.1 * var(--spacing)),
        calc(-1.1 * var(--spacing)) calc(.9 * var(--spacing)),
        calc(1.7 * var(--spacing)) calc(-.3 * var(--spacing)),
        calc(-1.3 * var(--spacing)) calc(.7 * var(--spacing)), 0 0
    }
    75% {
        background-position: calc(2.9 * var(--spacing)) calc(-.1 * var(--spacing)),
        calc(-2.1 * var(--spacing)) calc(.9 * var(--spacing)),
        calc(2.7 * var(--spacing)) calc(-.3 * var(--spacing)),
        calc(-2.3 * var(--spacing)) calc(.7 * var(--spacing)), 0 0
    }
    100% {
        background-position: calc(2.9 * var(--spacing)) calc(-1.1 * var(--spacing)),
        calc(-2.1 * var(--spacing)) calc(1.9 * var(--spacing)),
        calc(2.7 * var(--spacing)) calc(-1.3 * var(--spacing)),
        calc(-2.3 * var(--spacing)) calc(1.7 * var(--spacing)), 0 0
    }
}