@import "tailwindcss";

:root {
    --background: #ffffff;
    --foreground: #171717;
}

@theme inline {
    --color-background: var(--background);
    --color-foreground: var(--foreground);
    --font-sans: var(--font-geist-sans);
    --font-mono: var(--font-geist-mono);
    --color-space-shrimp-blue: #2c2c54;
    --color-cherry-shrimp: #a40e4c;
    --color-ashy-shrimp: #acc3a6;
    --color-apricot-shrimp: #f5d6ba;
    --color-tangerine-dream-shrimp: #f49d6e;
}

@utility wave-border {
    border-image: url("lib/waves-border.png") 27 fill / 35px / 25px 0 0 0 round;
    position: relative;
}

body {
    background: var(--background);
    color: var(--foreground);
    font-family: Arial, Helvetica, sans-serif;
    cursor: url("lib/cursors/shrimp_cursor.png"), auto;
}

@theme {
    --animate-blink: blink-border 0.75s step-end infinite;
    @keyframes blink-border {
        from,
        to {
            border-color: transparent;
        }
        50% {
            border-color: var(--ashy-shrimp);
        }
    }

    --animate-shrimply-rain: rain-down 3s linear 1;
    @keyframes rain-down {
        0% {
            transform: translateY(0);
        }
        100% {
            transform: translateY(200vh);
        }
    }
}