:root {
  --bg: #f2f5f7;
  --bg-alt: #e6edf2;
  --text-primary: #2e2e2e;
  --text-alt: #2f4858;
  --accent: #c56a2d;
  --btn-text: #e6edf2;
}

html {
  scroll-behavior: smooth;
}

[id] {
  scroll-margin-top: 75px;
}

#top {
  scroll-margin-top: 0px;
}

.hero-overlay {
  background-color: var(--bg-alt);
  opacity: 0.88;
}

.photo-hover-overlay {
  background-color: var(--bg-alt);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.photo-item:hover .photo-hover-overlay {
  opacity: 0.88;
}

.photo-item:hover {
  cursor: pointer;
}

/* Buttons */
.btn {
  position: relative;
  overflow: hidden;
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  transition: background-color 0.15s ease;
}
.btn:hover::after {
  background-color: rgba(255, 255, 255, 0.4);
}
.btn:active::after {
  background-color: rgba(0, 0, 0, 0.2);
}

/* Nav links */
.nav-link {
  position: relative;
}
.nav-link::after {
  content: "";
  position: absolute;
  inset: 0;
  transition: background-color 0.15s ease;
}
.nav-link:hover {
  color: var(--accent);
}
.nav-link:hover::after {
  background-color: rgba(255, 255, 255, 0.4);
}
.nav-link:active::after {
  background-color: rgba(0, 0, 0, 0.2);
}

/* Lightbox */
.lightbox {
  display: none;
}
.lightbox.active {
  display: flex;
}

#lb-thumbnails {
  scrollbar-width: none;
}
#lb-thumbnails::-webkit-scrollbar {
  display: none;
}