@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --c-bg: #121212;
    --c-text: #fdfffc;
    --c-purple: #7F669D;
    --c-purple-light: #BA94D1;
    --c-box-shadow: #FBFACD;
    --c-bg-card: #374259;
    --c-pink: #AE508D;
}

@media (prefers-color-scheme: light) {
    :root {
        --c-bg: #F7FFE5;
        --c-text: #121212;
        --c-purple: #374259;
        --c-purple-light: #BA94D1;
        --c-box-shadow: #374259;
        --c-bg-card: #FFB4B4;
        --c-pink: #374259;

        --c-background-2: #FEDEFF;
    }
}

body {
    font-family: 'Fira Sans Condensed', Inter, sans-serif;
}

pre, code {
    font-family: Inconsolata, monospace;
}

.button-effect-receiver {
    transition: transform 150ms;
}

.button-effect:hover .button-effect-receiver {
    transform: translateX(-3px) translateY(-3px);
}