@import url(modules/callouts.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 a, .button) {
  @apply font-normal 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-th:font-bold prose-img:rounded-3xl;
} */

.footnote-item:target p {
  @apply bg-slate-200 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: '';
    }
  }
}