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

body {
    @apply bg-dark-500 text-gray-100;
    font-family: 'Inter', sans-serif;
}

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

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

.prose h1 {
    @apply text-2xl md:text-3xl mb-4 mt-8;
}

.prose h2 {
    @apply text-xl md:text-2xl mb-3 mt-6;
}

.prose h3 {
    @apply text-lg md:text-xl mb-3 mt-6;
}

.prose p {
    @apply mb-4;
}

.prose ul, .prose ol {
    @apply mb-4 pl-5;
}

.prose ul {
    @apply list-disc;
}

.prose ol {
    @apply list-decimal;
}

.prose li {
    @apply mb-1;
}

.prose a {
    @apply text-primary-500 hover:text-primary-400;
}

.prose code {
    @apply bg-dark-200 text-white px-1.5 py-0.5 rounded text-sm;
}

.prose pre {
    @apply bg-dark-200 p-4 rounded-lg overflow-x-auto mb-4;
}

.prose pre code {
    @apply bg-transparent p-0 text-gray-300 text-sm;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.aspect-w-16 {
    position: relative;
    padding-bottom: calc(9 / 16 * 100%);
}

.aspect-h-9 {
    position: relative;
}

.aspect-w-16 > * {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}