@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@import '/node_modules/@fortawesome/fontawesome-free/css/all.min.css';

@import './templated-app.css';

@layer base {
    html {
        @apply text-gray-600;
    }

    h1, h2, h3, h4 {
        @apply mb-4;
    }

    p {
        @apply mb-4;
    }

    hr {
        @apply my-4;
    }

    ul {
        @apply list-inside list-disc;
    }

    ol {
        @apply list-inside list-decimal;
    }
    .primary-btn{
        @apply items-center mx-2 px-4 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-600 rounded-md hover:bg-blue-500 focus:outline-none focus:bg-blue-500;
    }
    .text-btn{
        @apply underline text-sm text-gray-600 hover:text-gray-900; 

    }
    .nav-btn{
        @apply text-blue-600 border-transparent border-b-2 hover:border-blue-600 px-3 py-2 text-base font-medium transition ease-out duration-300;
    }
    
    
    
    
    
    
    
    
}

@layer components {
    .form-success{
        @apply text-green-900 placeholder-green-700 border border-green-500 rounded outline-none focus:ring-green-500 focus:border-green-500 focus:ring-1;
    }
    .has-errors{
        @apply text-red-900 placeholder-red-700 border border-red-500 rounded outline-none focus:ring-red-500 focus:border-red-500 focus:ring-1;
    }
  .btn-primary {
    @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
  }



}