@import url("https://fonts.googleapis.com/css2?family=Sour+Gummy:ital,wght@0,100..900;1,100..900&display=swap");
@import "tailwindcss";
@plugin "daisyui" {
    themes: cupcake --default;
}

body {
    font-family: "Sour Gummy", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}

.bg-hero {
    --size: 5vh;
    --angle: 45deg;
    background: repeating-linear-gradient(
        var(--angle),
        var(--color-base-200) calc(0 * var(--size)),
        var(--color-base-200) calc(1 * var(--size)),
        var(--color-secondary) calc(1 * var(--size)),
        var(--color-secondary) calc(2 * var(--size)),
        var(--color-base-200) calc(2 * var(--size)),
        var(--color-base-200) calc(3 * var(--size)),
        var(--color-accent) calc(3 * var(--size)),
        var(--color-accent) calc(4 * var(--size)),
        var(--color-base-200) calc(4 * var(--size))
    );
    background-size: calc(4 * var(--size) / sin(var(--angle)))
        calc(4 * var(--size) / sin(var(--angle)));
    animation: BackgroundAnimate 10s linear infinite reverse;
}

@keyframes BackgroundAnimate {
    0% {
        background-position: calc(4 * var(--size) / sin(var(--angle))) 0;
    }
}