@use "../abstracts/functions" as *;

// Make focused anchor not get covered by header
:target:not(#main-content) {
  scroll-margin-block-start: 6.5rem;
}

:focus-visible,
:target:not(#main-content) {
  animation: focus-in var(--transition);
  outline: 0.125rem solid var(--accent-color);
  outline-offset: 0.125rem;

  @keyframes focus-in {
    from {
      outline: 0.5rem solid transparent;
      outline-offset: 0.25rem;
    }
  }
}

// Style text selection to use accent color
::selection {
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--bg-color);
  color: var(--fg-color);
  font-family: var(--font-sans-serif), var(--font-system-ui), var(--font-emoji);
  overflow-wrap: break-word;

  @supports (min-height: 100dvh) {
    min-height: 100dvh;
  }
}

@media (prefers-reduced-motion) {
  *,
  *::before,
  *::after {
    animation-duration: 0s !important;
    transition-duration: 0s !important;
  }
}

// Disable blur on Firefox Mobile
@-moz-document url-prefix() {
  @media only screen and (max-width: 960px) {
    .firefox-unblur,
    .firefox-unblur::before,
    .firefox-unblur::after {
      backdrop-filter: none !important;
    }
  }
}