#skip-to-content {  padding: var(--unit); margin: 0;
    transform: translate(-50%,-100%);
    position: fixed;
    z-index: 100; top: 0; left: 50%; border-radius: 4px;

}
#skip-to-content:focus-within {
    transform: translate(-50%,0);
    position: fixed;
}
#skip-to-content a {     white-space: nowrap;  }


@media all and (max-width: 1023px) {
    body.hashero:not(.scrolled) #skip-to-content a {
        background: white
    }

    body.hashero:not(.scrolled) #skip-to-content a:focus-visible {
        box-shadow: 0 0 0 2px var(--dark-purple), 0 0 0 4px white;
    }
}

/*

#skip-to-content>.wrapper>a::before {
    content: '';
    background-color: currentColor;
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 1px;
    z-index: -1;
    transition: all .2s ease-in-out;
}

#skip-to-content>.wrapper>a:hover::before {
    background-color: rgba(255,255,255,1);
    bottom: 0;
    height: calc(100% - 1px);
}
#skip-to-content>.wrapper>a:focus-visible { box-shadow: 0 0 0 2px var(--purple), 0 0 0 4px white;
    border-radius: 2px;
}


@media all and (max-width: 899px) {
    #skip-to-content {  position: absolute;    font-size: 16px; }
    #skip-to-content:focus-within {
        position: fixed;
        z-index:999;
    }
}*/