@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: 15vh;
    --angle: 45deg;
    background: repeating-linear-gradient(
        var(--angle),
        var(--color-base-200) 0%,
        var(--color-base-200) 12.5%,
        var(--color-secondary) 12.5%,
        var(--color-secondary) 25%,
        var(--color-base-200) 25%,
        var(--color-base-200) 37.5%,
        var(--color-accent) 37.5%,
        var(--color-accent) 50%,
        var(--color-base-200) 50%,
        var(--color-base-200) 62.5%,
        var(--color-secondary) 62.5%,
        var(--color-secondary) 75%,
        var(--color-base-200) 75%,
        var(--color-base-200) 87.5%,
        var(--color-accent) 87.5%,
        var(--color-accent) 100%,
        var(--color-base-200) 100%
    );
    background-repeat: repeat;
    background-size: calc(var(--size) / sin(var(--angle)))
        calc(var(--size) / sin(var(--angle)));
    animation: BackgroundAnimate 10s linear infinite reverse;
}

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