html, body {
    height: 100%; /* Ensures the body spans the full viewport height */
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensures the layout covers at least the full viewport height */
}

main {
  min-height: 100vh; /* Use min-height so it grows if content overflows */
}

/* Hide visually by default */
.skip-link {
  position: absolute;
  top: -100px; /* Move it far off the top of the viewport */
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px;
  z-index: 100;
}

/* Show when focused via the Tab key */
.skip-link:focus {
  top: 0; /* Bring it back into view */
}