@tailwind base;
@tailwind components;
@tailwind utilities;

article subtitle {
  @apply text-lg lg:text-xl;
}

article h1 {
  @apply scroll-m-20 text-4xl font-bold tracking-tight;
}

article p + h1 {
  @apply mt-12;
}
article h2 {
  @apply scroll-m-20 text-3xl font-bold tracking-tight my-8;
}

article h3 {
  @apply scroll-m-20 text-2xl font-bold tracking-tight my-4;
}

article h4 {
  @apply scroll-m-20 text-xl font-bold tracking-tight my-2;
}

article subtitle {
  @apply text-lg;
}
article p {
  @apply leading-7 [&:not(:first-child)]:mt-6;
}

article :where(code):not(:where([class~="not-prose"] *)):before {
  content: "";
}

article :where(code):not(:where([class~="not-prose"] *)):after {
  content: "";
}

article p a {
  @apply underline;
}

article pre {
  @apply max-h-[650px] overflow-x-auto rounded-lg border bg-zinc-950 dark:bg-zinc-900 text-white py-4 px-8 rounded-lg my-4;
}

article p > code {
  @apply text-white bg-black p-1 rounded;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */