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

@layer base {
    :root {
        --background: 0 0% 100% !important;
        --foreground: 224 71.4% 4.1% !important;
        --card: 0 0% 100% !important;
        --card-foreground: 224 71.4% 4.1% !important;
        --popover: 0 0% 100% !important;
        --popover-foreground: 224 71.4% 4.1% !important;
        --primary: 262.1 83.3% 57.8% !important;
        --primary-foreground: 210 20% 98% !important;
        --secondary: 220 14.3% 95.9% !important;
        --secondary-foreground: 220.9 39.3% 11% !important;
        --muted: 220 14.3% 95.9% !important;
        --muted-foreground: 220 8.9% 46.1% !important;
        --accent: 220 14.3% 95.9% !important;
        --accent-foreground: 220.9 39.3% 11% !important;
        --destructive: 0 84.2% 60.2% !important;
        --destructive-foreground: 210 20% 98% !important;
        --border: 220 13% 91% !important;
        --input: 220 13% 91% !important;
        --ring: 262.1 83.3% 57.8% !important;
        --radius: 0.5rem !important;
    }

    body {
        @apply text-text_color bg-base_color text-sm md:text-base font-medium text-wrap duration-500
    }

    a {
        @apply text-sky_color hover:text-pink_color text-wrap text-base font-bold duration-200
    }

    h1 {
        @apply font-extrabold text-slate-100 text-4xl md:text-5xl xl:text-6xl duration-500
    }

    h2 {
        @apply font-bold text-sky_color text-xl md:text-2xl xl:text-3xl duration-500
    }

    h3 {
        @apply font-bold text-mauve_color text-xl md:text-2xl xl:text-3xl duration-500
    }

    div {
        @apply duration-500
    }

    section {
        @apply mx-auto max-w-3xl px-8 duration-500 md:max-w-4xl md:px-6 xl:max-w-6xl xl:px-2
    }

    #icon {
        @apply hover:text-pink_color duration-200
    }
}