a {
  color: var(--clr-foreground);
  font-family: $ext-sans;
  margin-left: -0.25rem;
  margin-right: -0.25rem;
  padding: 0.125rem 0.25rem;
  text-decoration-color: var(--clr-border-main);
  text-decoration-line: underline;
  text-decoration-thickness: 0.1em;

  &:hover,
  &:focus {
    text-decoration-color: var(--clr-primary);
  }

  &:focus {
    background-color: var(--clr-accent);
    color: var(--clr-foreground);
    // makes focus visible in windows high contrast mode, do not delete
    outline: 2px solid transparent;

    /* @media (prefers-color-scheme: dark) {
      :root:not([data-user-theme='light']) & {
        color: var(--clr-background);
      }
    } */
  }
}