@import url(modules/buttons.css);
@import url(modules/callouts.css);
@import url(modules/details.css);
@import url(modules/navigation.css);
@import url(modules/pagination.css);
@import url(modules/postmeta.css);
@import url(modules/tags.css);

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

:root {
  font-family: 'Encode Sans', sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Tilt Warp', sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: 'XROT' 0, 'YROT' 0;
}

a:not(.nav-link, .read-more-button) {
  @apply text-inherit underline decoration-sky-600 decoration-2 underline-offset-4 transition-colors duration-300 hover:text-sky-600;
}

.blogpost {
  @apply prose prose-slate mx-auto md:prose-lg lg:prose-xl dark:prose-invert prose-headings:font-normal prose-strong:text-inherit prose-li:marker:!text-inherit prose-img:rounded-3xl;
}

.footnote-item:target {
  @apply bg-sky-100 dark:bg-sky-950;
}

abbr {
  @apply no-underline;

  &::after {
    content: ' (' attr(title) ')';
  }
}

@media (hover: hover) {
  abbr {
    @apply underline decoration-sky-600 decoration-dotted decoration-2 underline-offset-4;

    &::after {
      content: '';
    }
  }
}
