@import 'tailwindcss';

* {
    font-family: 'raleway';
}

h1, h2, h3 { font-family: 'playfair display';}

h1 {font-size: 2rem;}
h2 {font-size: 1.75rem;}
h3 {font-size: 1.5;}
h4 {font-size: 1.25rem;}

h1, h2, h3, h4, p, label, hr, input, textarea, a {color: var(--color-text);}

@theme {
    --color-accent: var(--color-teal-200);
    --color-card: var(--color-pink-100);
    --color-text: var(--color-red-400);

    --animate-clip-fade: clipfade 1s ease-in-out 1;
    --animate-reveal: reveal 1s ease-in-out 1;


    @keyframes clipfade {
        from {
            opacity: 0;
            clip-path: polygon(0 0, 0 0, 0 0);
        }
        to {
            opacity: 1;
            clip-path: polygon(0 0, 200% 0, 0 200%);
        }
    }

    @keyframes reveal {
        from {
            opacity: 0;
            transform: translate(0, 32px);
        }
        to {
            opacity: 1;
            transform: translate(0, 0);
        }
    }
}