@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
    @font-face {
        font-family: "Inter";
        font-style: normal;
        font-weight: 400;
        font-display: swap;
    }
    h1 {
        @apply text-2xl;
        @apply font-sans;
        @apply text-gray-900;
        @apply py-4;
    }

    ::selection {
        @apply bg-green-400;
        @apply text-gray-900;
        @apply bg-opacity-30;
    }
    a {
        @apply underline text-blue-600 hover:text-blue-800 visited:text-purple-600;
    }

    @layer components {
        .btn {
            @apply relative z-10 inline-flex min-h-[36px] cursor-pointer items-center
            justify-center border-0 bg-transparent px-3 pb-[0.3rem] text-base
            text-gray-900 before:absolute before:inset-0 before:-z-10
            before:block before:rounded-sm before:border before:border-blue-200
            before:bg-white before:shadow-[0_4px_3px_0_rgba(20,20,96,0.1),inset_0_-5px_0_0_#e5edff]
            before:content-[''] hover:before:border-blue-300
            hover:before:bg-blue-50
            hover:before:shadow-[0_4px_3px_0_rgba(20,20,96,0.1),inset_0_-5px_0_0_#e5edff]
            focus:outline-none focus-visible:before:outline
            focus-visible:before:outline-4 focus-visible:before:outline-blue-500
            active:border-t-4 active:border-transparent active:py-1
            active:before:shadow-none;
        }
    }

    @layer utilities {
        .error {
            @apply py-1 border-red-400 text-red-600;
        }
    }
}