@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap");
@import "tailwindcss";

@theme {
    --color-gractwo-red: #ff637e;
    --color-gractwo-red-semidark: #cc5166;
    --color-gractwo-red-dark: #ad4153;
    --color-gractwo-blu: #00d3f2;
    --color-gractwo-blu-semidark: #41aaba;
    --color-gractwo-blu-dark: #3e8f9b;

    --font-lexend: "Lexend", sans-serif;
}

@custom-variant dark (&:where(.dark, .dark *));

@layer components {
    .bg-gractwo-index {
        background-size: "100% 100%";
        background-image:
            radial-gradient(125% 125% at 50% 90%, #ffffff 40%, transparent 95%),
            linear-gradient(to right, #ff637e 15%, #00d3f2 100%);
        @variant dark {
            background-image:
                radial-gradient(
                    125% 125% at 50% 90%,
                    #1a1a1a 40%,
                    transparent 95%
                ),
                linear-gradient(to right, #ad415377 15%, #3e8f9b77 85%);
        }
    }
}

.dashed-bottom-fade-grid {
    position: absolute;
    inset: 0;
    z-index: 0;

    background-image:
        linear-gradient(to right, rgba(255, 99, 126, 0.3) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 211, 242, 0.3) 1px, transparent 1px);
    background-size: 20px 20px;
    background-position:
        0 0,
        0 0;

    mask-image:
        repeating-linear-gradient(
            to right,
            black 0px,
            black 3px,
            transparent 3px,
            transparent 8px
        ),
        repeating-linear-gradient(
            to bottom,
            black 0px,
            black 3px,
            transparent 3px,
            transparent 8px
        ),
        radial-gradient(ellipse 100% 80% at 50% 100%, #000 50%, transparent 90%);
    -webkit-mask-image:
        repeating-linear-gradient(
            to right,
            black 0px,
            black 3px,
            transparent 3px,
            transparent 8px
        ),
        repeating-linear-gradient(
            to bottom,
            black 0px,
            black 3px,
            transparent 3px,
            transparent 8px
        ),
        radial-gradient(ellipse 100% 80% at 50% 100%, #000 50%, transparent 90%);

    mask-composite: intersect;
    -webkit-mask-composite: source-in;
}