@import 'tailwindcss';

@layer base {
  h1 {
    @apply text-4xl mt-3 mb-3 font-bold;
  }
  h2 {
    @apply text-3xl mt-4 mb-1.5 font-bold;
  }
  h3 {
    @apply text-2xl mt-5 mb-1.5 font-bold;
  }
  h4 {
    @apply text-xl mt-6 mb-1.5 font-bold;
  }
  p {
    @apply mb-2;
  }
  a {
    @apply text-[#FFC832] underline hover:decoration-orange-400 transition duration-300;
  }
  ul {
    @apply mt-2 mb-3 ml-1 list-disc list-inside marker:text-sky-600;
  }
  ol {
    @apply mt-2 mb-3 ml-1 list-decimal list-inside marker:text-sky-500;
  }
  li {
    @apply my-0.5;
  }
  code {
    @apply bg-white/10 px-1 pb-px pt-1 rounded-md;
  }
  pre code {
    @apply bg-inherit p-0 text-inherit;
  }
  hr {
    @apply my-5 rounded-full;
  }
  img {
    @apply md:w-3/4 lg:w-3/5;
  }
  blockquote {
    @apply px-3 pt-2 pb-0.5 mb-4 mt-2 border-s-4 border-white/80 bg-white/7 rounded-sm;
  }

  pre {
    @apply px-2 pt-2 pb-px overflow-x-auto text-sm sm:text-base rounded-sm mt-2 mb-4 after:content-[attr(data-lang)] after:text-[8px] after:opacity-40 selection:bg-white/15;
  }
  pre code mark {
    @apply pb-0.5 pt-1 pr-px text-inherit rounded-xs;
  }
}