/* Set some base styles, so it is easy to see */
.skip-link {
    position: absolute;
    display: inline-block;
    padding: .375rem .75rem;
    line-height: 1;
    font-size: 1.25rem;
    background-color: rebeccapurple;
    color: white;
    /* Ensure the Y position is set to zero and any movement on the transform property */
    transform: translateY(0);
    transition: transform 250ms ease-in;
}

/* When it is not focused, transform its Y position by its total height, using a negative value, so it hides above the viewport */
.skip-link:not(:focus) {
    transform: translateY(-2rem);
}