:root {
    --canvas: #1b0f08;
}

html::before {
    background-image: url("halloween-props-v1.svg");
    background-color: #1b0f08;
}

body::before,
body::after {
    background-size: var(--tile);
    inset: calc(-1 * var(--tile)) calc(-1 * var(--tile)) 0 0;
    animation-name: drift;
    animation-duration: 60s;
}

body::before {
    background-image: url("halloween-pumpkins-v1.svg");
}

body::after {
    background-image: url("halloween-glow-v1.webp");
    animation: drift 60s linear infinite, breathe 2s ease-in-out infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
    body::before,
    body::after {
        animation: none;
    }
}