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

.prose-zinc {
  --tw-prose-body: #3f3f46;
  --tw-prose-headings: #18181b;
  --tw-prose-links: #18181b;
  --tw-prose-bold: #18181b;
  --tw-prose-code: #27272a;
  --tw-prose-pre-code: #f4f4f5;
  --tw-prose-pre-bg: #18181b;
  --tw-prose-quotes: #52525b;
  --tw-prose-quote-borders: #d4d4d8;
}

@media (prefers-color-scheme: dark) {
  .prose-zinc {
    --tw-prose-body: #d4d4d8;
    --tw-prose-headings: #fafafa;
    --tw-prose-links: #fafafa;
    --tw-prose-bold: #fafafa;
    --tw-prose-code: #e4e4e7;
    --tw-prose-pre-code: #18181b;
    --tw-prose-pre-bg: #fafafa;
    --tw-prose-quotes: #a1a1aa;
    --tw-prose-quote-borders: #52525b;
  }
}

.prose pre {
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.prose img {
  border-radius: 0.5rem;
}
.prose a {
  text-decoration: none;
  border-bottom: 1px solid #d4d4d8;
  transition: border-color 0.2s;
}
.prose a:hover {
  border-bottom-color: #18181b;
}
.prose blockquote {
  border-left-width: 2px;
  font-style: normal;
}

@media (max-width: 640px) {
  .prose {
    font-size: 0.95rem;
  }
}