:root {
    --pico-nav-element-spacing-vertical: 0.5rem;
}

header {
    position: sticky;
    top: 0; /* Sticks to the top of the viewport*/
    z-index: 1000; /* Ensures the header is above other content */
    background-color: var(--pico-background-color); /* Ensures the background color matches the root background color */
}
/* Add a top margin equal to your header's height to all elements targeted by anchor links */
:target {
  scroll-margin-top: 100px; /* Adjust this value to your header's actual height */
}

h2 {
    --pico-color: #123d42;
}

h3 {
    --pico-color: #227680;
}

/* Custom heading colors for forced dark mode */
[data-theme="dark"] h2 {
  color: #d5eef2;
}
[data-theme="dark"] h3 {
  color: #95c5cc;
}

/* Custom heading colors for automatic dark mode (user preference) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) h2 {
    color: #d5eef2;
  }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) h2 {
    color: #95c5cc;
  }
}