#atlantis-skiplinks {
    text-align: center;
    padding: 1rem 0;
    font-size: 1rem;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    transform: translateY(-100%);
    will-change: transform;
    transition: .25s;
    /* todo: adhoc overrulen z-index. */
    z-index: 4;
}

#atlantis-skiplinks .goto {
    display: inline-block;
    background: #fff;
    padding: 7px 14px;
}

#atlantis-skiplinks a {
    display: inline-block;
    box-shadow: 0 0 1em rgba(0, 0, 0, .5);

}

#atlantis-skiplinks a:focus {
    position: relative;
    z-index: 5;
}

#atlantis-skiplinks:focus-within,
#atlantis-skiplinks:target {
    transform: translateY(0%);
}

@media (prefers-reduced-motion: reduce) {
    #atlantis-skiplinks,
    #atlantis-skiplinks a {
        transition: none !important;
    }
}

/* mobile */
@media (max-width: 560px) {
    #atlantis-skiplinks {
        background: #fff;
        left: 0;
        transform: translateY(-100%);
    }

    #atlantis-skiplinks .goto {
        padding: 0;
    }

    #atlantis-skiplinks .goto,
    #atlantis-skiplinks a {
        margin-bottom: 5px;
        display: block;
    }

    #atlantis-skiplinks:focus-within,
    #atlantis-skiplinks:target {
        transform: translateY(0%);
    }

    #atlantis-skiplinks a {
        transform: scale(.95);
        will-change: transition;
        transition: .25s;
    }
    #atlantis-skiplinks a:focus {
        transform: scale(1);
    }
}