.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5 {
  scroll-margin-top: 3rem;
}

.prose h1 {
  @apply text-4xl font-extrabold leading-tight tracking-tight text-black dark:text-gray-50 lg:text-7xl lg:tracking-tighter;
}

.prose h2 {
  @apply text-2xl font-bold leading-tight text-gray-350 dark:text-gray-200 lg:text-3xl;
}

.prose .tabs h2 {
  @apply text-black dark:text-gray-200;
}

.prose h2 a code {
  @apply px-2 py-1 !text-black dark:!text-white;
  font-size: 0.7em;
}

.prose * + h2 {
  @apply mt-12 lg:mt-16;
}

.prose h3 {
  @apply mt-6 text-lg font-semibold leading-tight text-gray-700 dark:text-gray-300 lg:mt-8 lg:text-xl;
}

.prose h3 a code {
  @apply px-2 py-1 !text-black dark:!text-white;
  font-size: 0.7em;
}

.prose h4 {
  @apply mt-8 text-base font-semibold leading-tight text-gray-600 dark:text-gray-400 lg:text-lg;
}

.prose h4 a code {
  @apply px-2 py-1 !text-black dark:!text-white;
  font-size: 0.7em;
}

.prose h1 + h2 {
  @apply !mt-12;
}

.prose h2 + h3,
.prose h3 + h4 {
  @apply mt-2;
}

.prose h1 a,
.prose h2 a,
.prose h3 a,
.prose h4 a,
.prose h5 a {
  all: inherit;
  @apply inline cursor-pointer;
}

.prose ol,
.prose ul {
  @apply my-2 space-y-1 pl-5 text-sm font-normal leading-normal text-gray-600 dark:text-gray-400 sm:text-base lg:text-lg;
}

.prose ol {
  @apply list-decimal;
}

.prose ul {
  @apply list-disc marker:text-gray-400 dark:marker:text-gray-600;
}

.prose li {
  @apply pl-1;
}

.prose p {
  @apply mt-1 text-sm leading-normal text-gray-600 dark:text-gray-400 sm:text-base lg:text-lg;
}

.prose p + p {
  @apply mt-2;
}

.prose h1 + p {
  @apply mt-8;
}

.prose a {
  @apply text-blue-600 underline dark:text-teal-400;
}

.dark .prose h1 a,
.dark .prose h2 a,
.dark .prose h3 a,
.dark .prose h4 a,
.dark .prose h5 a {
  color: inherit;
}

.prose a code {
  @apply !text-blue-600 dark:!text-teal-400;
}

.prose blockquote {
  @apply my-4 rounded-md border border-gray-200 bg-gray-100 px-4 py-2 dark:border-gray-800 dark:bg-gray-900 sm:rounded-lg;
}

.prose blockquote a {
  @apply text-gray-900 dark:text-gray-300;
}

.prose blockquote p {
  @apply text-gray-900 dark:text-gray-300;
}

.prose blockquote a code {
  @apply !text-blue-900;
}

.prose hr {
  @apply my-8 h-px w-full border-none bg-gray-300 dark:bg-gray-700;
}

@tailwind components;
