html {
  scroll-padding-top: 10rem;
}

h1 {
  text-align: center;
}

body>header {
  padding: 0; 
}

body>header>:only-child {
    margin-block-start: 0rem;
}

:target {
  animation: highlight 2s ease-out;
}

@keyframes highlight {
  0% { background-color: var(--bg); }
  50% { background-color: yellow; }
  100% { background-color: var(--bg); }
}

header {
  position: sticky;
  top: 0;
  z-index: 2;
}

footer {
  text-align: center;
  padding-bottom: 2rem;
}