/* 1. Enable smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* 2. Make nav sticky */
#nav-container > nav {
  position: sticky !important;
  top: 3rem !important;
  align-self: start !important;
}

/* 3. ScrollSpy active styles (see JS tab for activation) */
.section-nav li.active > a {
  color: var(--warning);
  font-weight: 500;
}

.section-nav a {
  text-decoration: none;
  display: block;
  color: var(--primary);
  transition: all 50ms ease-in-out; /* 💡 This small transition makes setting of the active state smooth */
}

.section-nav a:hover,
.section-nav a:focus {
  color: var(--warning);
}