drfeely.com/app/globals.css

@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-6xl;
    @apply font-cormorant;
    @apply my-10;
  }
  h2 {
    @apply text-2xl;
    @apply font-bold;
    @apply my-3;
  }
}

@layer components {
  .ArticleContent h2 {
    @apply text-xl;
    @apply font-bold;
    @apply mb-4 mt-3;
    @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;
  }
}

@layer utilities {
  .behind-shadow {
    position: relative !important;
  }

  .behind-shadow::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: -1 !important;
    @apply drop-shadow-2xl !important;
  }
}