app.css

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500&display=swap');
/* Write your global styles here, in PostCSS syntax */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    @apply scroll-smooth;
  }

  body {
    @apply select-none;
  }

  /* osx style scrollbars */
  .pretty-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: theme("colors.gray.200") transparent;
  }

  .pretty-scrollbar::-webkit-scrollbar {
    height: 0.75rem;
    width: 6px;
  }

  .pretty-scrollbar::-webkit-scrollbar-track {
    background-color: transparent;
  }

  .pretty-scrollbar::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 7px;
  }

  .pretty-scrollbar:hover::-webkit-scrollbar-thumb {
    background-color: theme("colors.gray.200");
  }

  /* remove user agent styles for select */
  select {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
  }
}

@layer components {
  .markdown {
    @apply leading-normal font-['Playfair_Display'] text-base antialiased text-gray-700;
  }

  img.markdown {
    @apply mx-auto h-auto max-w-full rounded-lg;
  }

  article.markdown a.markdown {
    @apply text-blue-600 underline decoration-transparent hover:decoration-blue-600  transition-all duration-200 !important;
  }

  p.markdown,
  ul.markdown,
  ol.markdown {
    margin-block-end: 1.2em;
    margin-block-start: 0em;
  }

  /* lists */

  ol.markdown {
    @apply list-decimal ps-6;
  }
  ul.markdown {
    @apply list-disc ps-6;
  }

  /* 1st level list */
  ul.markdown,
  ol.markdown {
    /* 2nd level unordered list */
    & ul.markdown {
      @apply list-circle;
    }
    /* 2nd level ordered list */
    & ol.markdown {
      @apply list-lower-alpha;
    }

    /* any 2nd level list */
    & ul.markdown,
    & ol.markdown {
      @apply mt-1;
      margin-block-end: 0em;

      /* 3rd level unordered list */
      & ul.markdown {
        @apply list-square;
      }
      /* 3rd level ordered list */
      & ol.markdown {
        @apply list-lower-roman;
      }
    }

    li.markdown {
      @apply list-item;
      text-align: -webkit-match-parent;

      & + li.markdown {
        @apply mt-1;
      }
    }
  }
  ol.markdown > li.markdown::marker {
    @apply text-gray-800;
  }

  ul.markdown > li.markdown::marker {
    @apply text-gray-800;
  }

  h1.markdown,
  h2.markdown,
  h3.markdown,
  h4.markdown,
  h5.markdown,
  h6.markdown {
    @apply scroll-mt-14 break-inside-avoid font-['Playfair_Display'];
    /* ensure that table of contents links scroll with room for the header */
  }

  h1.title:first-of-type,
  h1.markdown:first-of-type {
    @apply mt-1 mb-2;
  }

  h1.title {
    @apply mt-5 mb-1 text-2xl tracking-wide font-bold text-gray-800 break-inside-avoid;
  }

  h1.markdown,
  h1.markdown > a.markdown {
    @apply mt-5 mb-1 text-2xl tracking-wide font-bold text-gray-800 break-inside-avoid;
  }

  h2.markdown,
  h2.markdown > a.markdown {
    @apply mt-3 mb-1 text-xl font-semibold text-gray-800;
  }

  h3.markdown,
  h3.markdown > a.markdown {
    @apply mt-2 mb-1 font-semibold text-base text-gray-800;
  }

  h4.markdown,
  h4.markdown > a.markdown {
    @apply mt-1 text-sm  font-semibold text-gray-800;
  }

  h5.markdown,
  h5.markdown > a.markdown {
    @apply mt-1 text-xs font-semibold  text-gray-800;
  }

  h6.markdown,
  h6.markdown > a.markdown {
    @apply mt-1 text-xs text-gray-950;
  }

  hr.markdown {
    @apply h-px my-8 max-w-xl mx-auto bg-gray-200 border-0;
  }

  code.markdown {
    @apply font-mono text-gray-800 text-sm bg-gray-50 border rounded px-1 select-all py-0.5;
  }

  form code {
    font-size: unset;
  }

  blockquote.markdown {
    @apply border-l-4 border-gray-300 pl-3 my-8;
  }

  blockquote.markdown * {
    @apply text-gray-500;
  }

  table.markdown {
    @apply min-w-full  border-collapse text-center mx-auto my-5;
  }

  th.markdown {
    @apply text-sm text-gray-800 font-medium border-b border-gray-800 py-0 px-2 text-ellipsis overflow-hidden;
  }

  td.markdown {
    @apply text-sm text-gray-800 py-1 px-2 overflow-hidden text-ellipsis;
  }
}

:root {
  /* Layout header height */
  --header-height: 3.5rem;
  /* Font stacks */
  --monospace-font-family: theme(fontFamily.mono);
  --ui-font-family: [ "Playfair_Display", "sans-serif"];
  --ui-font-family-compact: [ "Playfair_Display", "sans-serif"];
  --color1: theme(colors.color.1);
  --color2: theme(colors.color.2);
  --color3: theme(colors.color.3);
  --color4: theme(colors.color.4);
  --color5: theme(colors.color.5);
  --color6: theme(colors.color.6);
  --color7: theme(colors.color.7);
  --color8: theme(colors.color.8);
  --color9: theme(colors.color.9);
  --color10: theme(colors.color.10);
  --color11: theme(colors.color.11);
  --color12: theme(colors.color.12);
  --color13: theme(colors.color.13);
  --color14: theme(colors.color.14);
  --color15: theme(colors.color.15);
  --color16: theme(colors.color.16);
  --color17: theme(colors.color.17);
  --color18: theme(colors.color.18);
  --color19: theme(colors.color.19);
  --color20: theme(colors.color.20);

  /* Colour System */
  --blue-50: theme(colors.blue.50);
  --blue-100: theme(colors.blue.100);
  --blue-200: theme(colors.blue.200);
  --blue-300: theme(colors.blue.300);
  --blue-400: theme(colors.blue.400);
  --blue-500: theme(colors.blue.500);
  --blue-600: theme(colors.blue.600);
  --blue-700: theme(colors.blue.700);
  --blue-800: theme(colors.blue.800);
  --blue-900: theme(colors.blue.900);
  --blue-999: theme(colors.blue.950);
  --blue-link: theme(colors.blue.700);
  --green-50: theme(colors.green.50);
  --green-100: theme(colors.green.100);
  --green-200: theme(colors.green.200);
  --green-300: theme(colors.green.300);
  --green-400: theme(colors.green.400);
  --green-500: theme(colors.green.500);
  --green-600: theme(colors.green.600);
  --green-700: theme(colors.green.700);
  --green-800: theme(colors.green.800);
  --green-900: theme(colors.green.900);
  --green-999: theme(colors.green.950);
  --grey-50: theme(colors.gray.50);
  --grey-100: theme(colors.gray.100);
  --grey-200: theme(colors.gray.200);
  --grey-300: theme(colors.gray.300);
  --grey-400: theme(colors.gray.400);
  --grey-500: theme(colors.gray.500);
  --grey-600: theme(colors.gray.600);
  --grey-700: theme(colors.gray.700);
  --grey-800: theme(colors.gray.800);
  --grey-900: theme(colors.gray.900);
  --grey-999: theme(colors.gray.950);
  --red-50: theme(colors.red.50);
  --red-100: theme(colors.red.100);
  --red-200: theme(colors.red.200);
  --red-300: theme(colors.red.300);
  --red-400: theme(colors.red.400);
  --red-500: theme(colors.red.500);
  --red-600: theme(colors.red.600);
  --red-700: theme(colors.red.700);
  --red-800: theme(colors.red.800);
  --red-900: theme(colors.red.900);
  --red-999: theme(colors.red.950);
  --yellow-50: theme(colors.yellow.50);
  --yellow-100: theme(colors.yellow.100);
  --yellow-200: theme(colors.yellow.200);
  --yellow-300: theme(colors.yellow.300);
  --yellow-400: theme(colors.yellow.400);
  --yellow-500: theme(colors.yellow.500);
  --yellow-600: theme(colors.yellow.600);
  --yellow-700: theme(colors.yellow.700);
  --yellow-800: theme(colors.yellow.800);
  --yellow-900: theme(colors.yellow.900);
  --yellow-999: theme(colors.yellow.950);
}

@media print {
  html {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  h1::after,
  h2::after,
  h3::after {
    content: "";
    display: block;
    height: 100px;
    margin-bottom: -100px;
  }

  article {
    orphans: 2;
    widows: 2;
  }
}