:root {
  --nav-close: 3rem;
  --nav-width: 10rem;
  --v-padding: 4rem;

  --col-caption: rgba(15, 110, 10, 1);
  --col-link: rgba(15, 110, 10, 1.0);
  --col-link-visited: rgba(20, 145, 10, 1.0);
  --col-overlay: rgba(255, 255, 255, 0.95);
}

body {
  overflow-x: hidden;
}

.lightbox .frame {
  background: var(--col-overlay);
  border: 0;
  display: none;
  height: 100%;
  left: 0;
  opacity: 0;
  overflow-x: hidden;
  padding: var(--v-padding) 0;
  position: fixed;
  top: 0;
  transition: opacity 0.5s ease;
  width: 100%;
  z-index: 5;
}
.lightbox .frame:target {
  display: block;
  opacity: 1;
}

/* Navigation */
.lightbox .nav {
  display: none;
  font-size: 1.5rem;
  left: calc(50% - (var(--nav-width) / 2));
  max-width: var(--nav-width);
  position: fixed;
  top: calc(var(--v-padding) / 2);
}
.lightbox .frame:target + .nav {
  display: block;
  z-index: 10;
}
/* Disable the prev button for the first item,
and the next button for the last item */
.lightbox .nav:nth-child(2) .prev,
.lightbox .nav:last-child .next {
  opacity: 0;
  z-index: -1;
}

.lightbox .prev,
.lightbox .close,
.lightbox .next {
  color: var(--col-link);
  position: relative;
  text-decoration: none;
}
.lightbox .close {
  left: var(--nav-close);
}
.lightbox .next {
  left: calc(var(--nav-close) * 2);
}
.lightbox .prev:visited,
.lightbox .close:visited,
.lightbox .next:visited {
  color: var(--col-link-visited);
}

/* iframe page contents */
.image-nav, .image-fig {
  text-align: center;
}
.image-fig .img {
  max-width: 90%;
  max-height: 60vh;
}
.image-fig .caption {
  color: var(--col-caption);
  margin: 0 auto;
  max-width: 60%;
}
.image-fig .caption a {
  color: var(--col-link);
}
.image-fig .caption a:visited {
  color: var(--col-link-visited);
}
.image-fig .caption h1 {
  font-size: 1.4rem;   
}
.image-fig .caption h2 {
  font-size: 1.2rem;   
}
.image-fig .caption h3 {
  font-size: 1rem;   
}