html, body, * {
  margin: 0;    
  border: 0;
  padding: 0;
  font-size: 0;
  font-family: "trebuchet ms", "tahoma", sans-serif;
  color: #FFFFFF;
  background-color: #000000;
}
.top-container {
  position: fixed;
  z-index: 1;
  height: 4vmax;
  width: 100dvw;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.photo-container {
  position: absolute;
  margin-top: 4.2vmax;
  width: 100%;
}
.photo-container img {        
  height: 15.41dvw;
  width: 24.65dvw;
  padding: 0.05dvw;
  object-fit: fill;
  display: inline-block;
}
.exitBtn {
  position: absolute;
  cursor: pointer;
  height: 3vmax;
  width: 3vmax;
  left: 1vmax;
  text-align: center;
  font-size: 2vmax;
  background-color: transparent;
  border-radius: 10%; 
  user-select: none;
}
.exitBtn:hover, .exitBtn:focus {
  color: #FFFFFF;
  background-color: #808080;
}
.slideshowBtn img {
  position: absolute;
  cursor: pointer;
  top: 0.5vmax;
  height: 3vmax;
  width: 3vmax;  
  left: 4vmax;
  background-color: transparent;
  border-radius: 10%;
  user-select: none;
}
.slideshowBtn img:hover, .slideshowBtn img:focus {
  background-color: #808080;
}
h1 {
  position: absolute;
  left: 8vmax;
  font-size: 1.25vmax;
}
@media screen and (max-width: 980px) {
  .top-container {
    height: 6vmax;
  }
  .exitBtn {
    height: 4.5vmax;
    width: 4.5vmax;
    font-size: 3vmax;
  }
  .slideshowBtn img {
    top: 0.75vmax;
    left: 5.5vmax;
    height: 4.5vmax;
    width: 4.5vmax;
    font-size: 3vmax;
  }
  h1 {
    left: 12vmax;
    font-size: 1.875vmax;
  }
}