/* Import Tailwind layers */
@import "tailwindcss";

@tailwind utilities;

/* Custom recipe app styles */

@layer components {

    h1 {
        @apply text-3xl font-black text-blue-900;
    }

    h2 {
        @apply text-xl font-bold mb-4 mt-4;
    }

    h3 {
        @apply font-semibold;
    }

    /* input fields */
    input, textarea {
        @apply p-2 w-full border rounded-md bg-white placeholder-gray-400 border-gray-600 hover:border-blue-800 transition-colors text-gray-600 focus:outline-none focus:border-blue-900;
    }

    /* labels */
    label {
        @apply text-gray-600;
    }

    body {
        @apply bg-gray-50 flex items-center;
    }


    /* errors */
    .error-text {
        @apply text-sm text-red-600;
    }

}