body {
  margin: 0;
  font-family: Helvetica, Arial, sans-serif;
  background-color: white;
  color: black;
}

/* Navigation bar */
nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;               /* full width for the bar */
  z-index: 1000;
  background-color: transparent;
  padding: clamp(20px, 6vh, 60px) clamp(25px, 8vw, 90px); /* top/bottom | left/right */
  display: flex;
  justify-content: flex-start;
  align-items: center;
}


nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(3px, 0.5vw, 5px);
}

nav a {
  text-decoration: none;
  color: black;
  font-size: clamp(10pt, 1.5vw, 12pt);
  letter-spacing: 0.5px;
}

/* MAIN GALLERY */
main {
  height: 100vh; /* full viewport height */
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

.gallery {
  display: flex;
  flex-direction: column;  /* stack images vertically */
  align-items: center;     /* center images horizontally */
}

.gallery img {
  display: block;
  height: auto;
  width: auto;
  scroll-snap-align: center;
  margin: 50vh 0; /* creates top & bottom space equal to half viewport height */
  background-color: white;
  box-sizing: border-box;
}

.gallery img.loading {
  max-width: 30%;
}

.gallery img.portrait,
.gallery img.square {
  max-width: 30%;
  width: 80%;
}

.gallery img.landscape {
  max-width: 50%;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .gallery img.portrait,
  .gallery img.square {
    max-width: 50%;
  }

  .gallery img.landscape {
    max-width: 60%;
  }
}

@media (max-width: 768px) {
  .gallery img.portrait,
  .gallery img.square {
    max-width: 55%;
  }

  .gallery img.landscape {
    max-width: 75%;
  }
}

@media (max-width: 480px) {
  .gallery img.portrait,
  .gallery img.square {
    max-width: 60%;
  }

  .gallery img.landscape {
    max-width: 80%;
  }
}


/* Contact page */
.contact-page {
  text-align: center;
  margin-top: clamp(200px, 25vh, 280px);
  font-size: 12pt;
}

.contact-page a {
  color: black;
  text-decoration: none;
  font-size: clamp(11pt, 1.5vw, 13pt);
  letter-spacing: 0.5px;
}

/* Hover effect */
a:hover {
  opacity: 0.6;
  transition: opacity 0.2s ease-in-out;
}