@import "tailwindcss";

@import 'github-markdown-css/github-markdown.css';
@import 'highlight.js/styles/github.css' (prefers-color-scheme: light);
@import 'highlight.js/styles/github-dark.css' (prefers-color-scheme: dark);

.markdown-body {
  color: var(--color-slate-800);
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
  color: var(--color-slate-900);
}

.markdown-body hr,
.markdown-body table tr,
.markdown-body table th,
.markdown-body table td,
.markdown-body blockquote {
  border-color: var(--color-slate-200);
}

.markdown-body code {
  background-color: var(--color-slate-100);
  color: var(--color-slate-900);
}

.markdown-body pre {
  background-color: var(--color-slate-100);
  border: 1px solid var(--color-slate-200);
}

.markdown-body pre code {
  background-color: transparent;
}

@media (prefers-color-scheme: dark) {
  .markdown-body {
    color-scheme: dark;
    color: var(--color-slate-200);
  }

  .markdown-body h1,
  .markdown-body h2,
  .markdown-body h3,
  .markdown-body h4,
  .markdown-body h5,
  .markdown-body h6 {
    color: var(--color-slate-100);
  }

  .markdown-body hr,
  .markdown-body table tr,
  .markdown-body table th,
  .markdown-body table td,
  .markdown-body blockquote {
    border-color: var(--color-slate-700);
  }

  .markdown-body code {
    background-color: var(--color-slate-800);
    color: var(--color-slate-100);
  }

  .markdown-body pre {
    background-color: var(--color-slate-900);
    border-color: var(--color-slate-700);
  }

  .markdown-body pre code,
  .markdown-body pre .hljs,
  .markdown-body pre .hljs-code,
  .markdown-body pre .hljs-subst,
  .markdown-body pre .hljs-punctuation,
  .markdown-body pre .hljs-operator {
    color: var(--color-slate-100) !important;
  }

  .markdown-body pre .hljs-comment,
  .markdown-body pre .hljs-quote {
    color: var(--color-slate-200) !important;
  }

  .markdown-body pre .hljs-keyword,
  .markdown-body pre .hljs-selector-tag,
  .markdown-body pre .hljs-built_in,
  .markdown-body pre .hljs-section,
  .markdown-body pre .hljs-title,
  .markdown-body pre .hljs-name {
    color: var(--color-sky-300) !important;
  }

  .markdown-body pre .hljs-string,
  .markdown-body pre .hljs-literal,
  .markdown-body pre .hljs-number,
  .markdown-body pre .hljs-attr,
  .markdown-body pre .hljs-template-tag,
  .markdown-body pre .hljs-template-variable {
    color: var(--color-emerald-300) !important;
  }
}

:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
}

body {
  background-color: var(--color-slate-50);
  color: var(--color-slate-900);
  overflow-x: hidden;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: var(--color-slate-950);
    color: var(--color-slate-50);
  }
}