@import url(modules/callouts.css);

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

:root {
  --font-copy: 'Encode Sans', sans-serif;
  --font-heading: 'Tilt Warp', sans-serif;
  --font-monospace: 'M PLUS 1 Code', monospace;
}

body {
  font-family: var(--font-copy);
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading)
}

pre, code {
  font-family: var(--font-monospace);
}

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

.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: '';
    }
  }
}
