@import 'tailwindcss';


/* This is very painful. There must be a better way. */
@layer base {

  div.journal-wrapper h1,
  div.journal-wrapper h2,
  div.journal-wrapper h3,
  div.journal-wrapper h4,
  div.journal-wrapper h5,
  div.journal-wrapper h6 {
    @apply text-gray-300 px-4;
  }

  div.journal-wrapper p,
  div.journal-wrapper ul,
  div.journal-wrapper ol,
  div.journal-wrapper table {
    @apply text-gray-400 text-sm px-4 py-2;
  }

  div.journal-wrapper table {
    @apply table-fixed w-full border border-gray-300 border-collapse;
  }

  div.journal-wrapper table th {
    @apply text-blue-300 p-2 text-xl;
  }

  div.journal-wrapper table td {
    @apply border border-gray-300 p-2 text-sm;
  }

  div.journal-wrapper ul {
    @apply list-disc list-outside ml-6;
  }

  div.journal-wrapper ol {
    @apply list-decimal list-inside ml-6;
  }

  div.journal-wrapper h1 {
    @apply text-3xl font-bold py-6;
  }

  div.journal-wrapper h2 {
    @apply text-xl font-bold p-4;
  }

  div.journal-wrapper h3 {
    @apply text-lg font-bold p-4;
  }

  div.journal-wrapper h4 {
    @apply text-lg py-2;
  }

  div.journal-wrapper h6 {
    @apply text-xs text-gray-400;
  }


  div.journal-wrapper p {
    @apply text-sm;
  }

  div.journal-wrapper blockquote {
    @apply border-l-4 border-blue-300 p-4 my-4 bg-[#252525] rounded-sm;
  }

  div.journal-wrapper a {
    @apply underline hover:text-blue-300;
  }

  div.journal-wrapper p code {
    @apply bg-[#191724] p-1;
  }


  pre {
    @apply text-sm bg-[#191724] p-4 my-4 rounded-lg overflow-x-auto whitespace-pre-wrap;
  }

  code.hljs {
    @apply text-[#e0def4];
  }

  .hljs-string,
  .hljs-number,
  .hljs-meta {
    @apply text-[#f6c177];
  }

  .hljs-punctuation,
  .hljs-operator {
    @apply text-[#908caa];
  }

  .hljs-comment {
    @apply text-[#6e6a86];
  }

  .hljs-keyword {
    @apply text-[#3e8fb0];
  }

  .hljs-params,
  .hljs-method,
  .hljs-methods,
  .hljs-regexp,
  code.language-python .hljs-meta {
    @apply text-[#c4a7e7];
  }

  .hljs-variable,
  .hljs-attr {
    @apply text-[#e0def4];
  }

  .language_ {
    @apply text-[#eb6f92];
  }

  .function_,
  .hljs-literal,
  .hljs-built_in,
  .hljs-title,
  code.language-python .hljs-built_in,
  code.language-go .hljs-built_in {
    @apply text-[#ea9a97];
  }

  .hljs-property,
  .class_,
  .hljs-type,
  .hljs-tag,
  .hljs-selector-tag,
  .hljs-selector-class,
  code.language-ts .hljs-built_in {
    @apply text-[#9ccfd8];
  }
}