@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 m-2 rounded bg-green-500 hover:bg-green-700;
    }

    .nav-item {
        @apply flex flex self-center p-2;
    }

    .menu {
        @apply flex flex-col md:flex-row;
    }
}

nav {
    background-color: white;
    opacity: 50%;
}