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

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

body {
    font-family: 'Fira Code', monospace;
    @apply bg-gray-900 text-gray-300;
}

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

.header {
    @apply bg-gray-900/80 backdrop-blur-sm border-b border-cyan-500/30 sticky top-0 z-50;
}

.logo {
    @apply text-2xl font-bold text-white tracking-widest;
    text-shadow: 0 0 5px #06b6d4, 0 0 10px #06b6d4;
}

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

.nav-link-active {
    @apply text-cyan-400 bg-cyan-900/30;
}

.card {
    @apply bg-gray-800/50 border border-gray-700 rounded-none overflow-hidden transition-all duration-300 hover:border-cyan-500 hover:shadow-[0_0_15px_rgba(6,182,212,0.5)];
}

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

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

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

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

.btn {
    @apply inline-block bg-cyan-600 text-white font-bold py-2 px-5 rounded-none hover:bg-cyan-500 transition-colors duration-300 text-sm uppercase tracking-wider border border-cyan-500;
    box-shadow: 0 0 5px rgba(6, 182, 212, 0.7);
}

.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 border-l-4 border-cyan-500 pl-4;
}