@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');

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

body {
    font-family: 'Montserrat', sans-serif;
    @apply bg-gray-900 text-gray-300;
}

h1, h2, h3, h4, h5, h6 {
    @apply font-bold text-white;
}

.nav-link {
    @apply text-gray-300 hover:text-cyan-400 transition-colors duration-300 px-3 py-2 rounded-md text-sm font-semibold;
}

.nav-link-active {
    @apply text-cyan-400 font-bold;
}

.card {
    @apply bg-gray-800 border border-gray-700 rounded-lg shadow-lg overflow-hidden hover:shadow-cyan-500/20 hover:border-cyan-500 transition-all duration-300;
}

.card-image {
    @apply w-full h-48 object-cover;
}

.card-content {
    @apply p-6;
}

.card-title {
    @apply text-2xl text-white mb-2 leading-tight;
}

.card-excerpt {
    @apply text-gray-400;
}

.btn {
    @apply inline-block bg-cyan-600 text-white font-bold py-2 px-4 rounded-lg hover:bg-cyan-700 transition-colors duration-300;
}

.article-content a {
    @apply text-cyan-400 underline hover:text-cyan-300;
}

.prose {
    @apply text-gray-300;
}

.prose h1, .prose h2, .prose h3 {
    @apply text-white;
}