@import url(https://fonts.bunny.net/css?family=abel:400|cormorant:700);

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

@layer base {
  html {
    scroll-behavior: smooth;
  }
  body {
    @apply bg-primary-100;
    @apply text-primary-500;
    @apply font-abel;
  }
  main {
    @apply text-lg;
  }
  h1 {
    @apply text-7xl;
    @apply font-cormorant;
  }
  h2 {
    @apply text-2xl;
    @apply font-bold;
    @apply my-3;
  }
}

@layer components {
  .ArticleContent h2 {
    @apply text-xl;
    @apply font-bold;
    @apply mt-3 mb-4;
    @apply scroll-mt-20;
  }

  .ArticleContent p {
    @apply my-1;
    @apply indent-3;
  }

  .ArticleContent hr {
    @apply my-5;
  }

  .ArticleContent a {
    @apply underline;
    @apply hover:drop-shadow;
    @apply transition-all;
    @apply duration-300;
  }

  .ArticleContent ul {
    @apply list-disc;
    @apply list-inside;
    @apply ml-8;
  }

  .ArticleContent h1 {
    @apply text-4xl;
    @apply font-bold;
    @apply font-cormorant;
    @apply m-5;
    @apply ml-3;
  }

  .ArticleContent h6 {
    @apply text-lg;
    @apply italic;
    @apply m-5;
    @apply ml-3;
  }

  .ArticleContent img {
    @apply max-w-full;
    @apply md:max-w-md;
    @apply my-3;
  }
}