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

@layer components {
    .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;
    }

    h1 {
        @apply text-4xl font-bold;
        color: var(--tw-main-color);
    }

    .button {
        @apply text-white font-bold py-2 px-4 rounded bg-green-500 hover:bg-green-700;
    }
}