:root {
  --skipLinksMargin: 10px;
  --skipLinksPadding: 10px;
}

.skiplink {
  position: absolute;
  transform: translateY(calc((var(--headerHeight) * -1)));
  top: 0;
  left: 0;
  z-index: var(--skipLinkLayer);
  background-color: var(--focusColor);
  box-sizing: border-box;
  margin: var(--skipLinksMargin);
  padding: var(--skipLinksPadding);
  border: black solid 2px;
  border-radius: 3px;
  filter: brightness(1);
  transition: filter 0.2s, transform 0.2s;
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  line-height: 1.5;
  scroll-margin-top: 100vh;
}

.skiplink:focus-visible {
  outline: var(--focusColor) solid var(--focusSize);
  outline-offset: var(--focusSize);
  filter: brightness(1.2);
  transform: translateY(calc(var(--headerHeight)));

}

.skiplink:hover {
  filter: brightness(1.2);
}

  @media (max-width: 300px) {
    .skiplink:focus-visible {
      transform: translateY(0%);
    }
  }


  @media (prefers-reduced-motion: reduce) {
    .skiplink {
      transform: translateY(calc(var(--headerHeight)));
      transition: opacity 0.2s;
      opacity: 0;
      pointer-events: none;
    }

    .skiplink:focus-visible {
      opacity: 1;
      pointer-events: all;
    }
  }