html, body {
  margin:0; padding:0; width:100%; min-height:100%;
  background:#101024;
}
body.photo-page {
  overflow:hidden;
  color:white;
}
#photo-viewer {
  position:fixed; inset:0;
  background:#101024;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
#photo-img-wrap {
  margin-top:-8px;
  height:84vh;
  max-width:1200px;
  display:flex;
  align-items:center;
  justify-content:center;
}
#photo-img {
  max-height:84vh;
  max-width:100vw;
  width:auto;
  height:auto;
  cursor:pointer;
  display:block;
}
#photo-bottom {
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:16px;
  padding:0 32px;
  min-height:48px;
  width:90%;
  max-width:1200px;
  gap:16px;
}
#photo-caption {
  color:#d0e0ff;
  font-size:12pt;
  line-height:18pt;
  text-align:center;
  flex:1;
}
#photo-btn-row {
  position:fixed;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  width:90%;
  max-width:1200px;
  bottom:30px;
  left:50%;
  transform:translateX(-50%);
}
#photo-btn-row a { opacity:0.7; }
#photo-btn-row a:hover { opacity:1; }
#photo-btn-row a img { width:48px; display:block; }
#photo-close {
  position:fixed;
  top:8px; right:16px;
  color:#e0b0b0;
  font-size:28px; font-weight:bold;
  cursor:pointer;
  z-index:10001;
  line-height:1;
  text-decoration:none;
}
#photo-close:hover { color:#fff; }

@media screen and (max-width:700px) {
  #photo-bottom {
    flex-direction:column;
    gap:8px;
  }
  #photo-caption {
    order:1;
    width:100%;
  }
  #photo-btn-row {
    order:2;
    display:flex;
    justify-content:space-between;
    padding:0 8%;
    width:100%;
    box-sizing:border-box;
  }
}