#skiplinks {
  position:absolute;
  z-index: 100;
  --tw-translate-y: -100%;
  transform: translate(var(--tw-translate-x),var(--tw-translate-y));
  border-width: 1px;
  
  color: var(--color-primary-light);
  transition-duration: .3s;
 
  margin:-0.5rem 0 0 -0.5rem;
  border-radius: 0 0 8px 0;
}

#skiplinks a {
  color: var(--color-primary-light);
background-color: var(--color-primary);
  padding:0.5rem;
  display: inline-block;
  outline-offset: 4px;
  border-radius: 0 0 8px 0;
}
#skiplinks:focus-within {
  --tw-translate-y: 0;
}
#skiplinks a:focus-visible {
    color: var(--color-primary-light) !important;
    text-decoration:none;
}


.focus-within:translate-y-0 
 .motion-safe\:transition-transform {
    transition-duration: .15s;
    transition-property: transform;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
  }