@tailwind components;

@layer components {
  .html_parser {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    h1 {
      @apply tw-text-display-md sm:tw-text-display-lg;
    }
    h2 {
      @apply tw-text-display-xs sm:tw-text-display-sm;
    }
    h3 {
      @apply tw-text-xl sm:tw-text-display-xs;
    }
    h4 {
      @apply tw-text-lg sm:tw-text-xl;
    }
    h5 {
      @apply tw-text-md sm:tw-text-lg;
    }
    p,
    ul,
    ol {
      @apply tw-text-gray-300 tw-text-md md:tw-text-xl tw-font-light;
    }
    strong {
      @apply tw-text-common-white;
    }
    ul,
    ol {
      margin-left: 2rem;
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }

    ul li::before {
      content: '\2022'; /* Unicode character for a bullet point */
      color: theme(colors.green.500);
      display: inline-block;
      width: 1em;
      margin-left: -1.5rem;
      font-size: 1.5rem;
    }
    ol {
      list-style-type: decimal;
    }
    a {
      color: theme(colors.green.500);
    }
  }
}
