@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; } }