* {
  margin: 0;    
  border: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  font-size: 0;
  font-family: "trebuchet ms", "tahoma", sans-serif;
  color: #FFFFFF;
  background-color: #000000;
}
button {
  border: none;
}
a {
  text-decoration: none;
}
#photo-container {
  position: relative; 
  height: 100dvh;
  width: 100dvw;
  display: flex;
  justify-content: center; 
  align-items: center;
}       
#photo-container img {
  position: absolute; 
  height: 100dvh;
  width: 100dvw;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
#photo-container img.active {
  opacity: 1;
}
#photoCount {
  position: absolute;
  top: .5vmax;
  left: 4vmax;
  height: 3vmax;
  width: 12vmax;
  text-align: center;
  font-size: 1.5vmax;
  color: #FFFFFF;
  background-color: #808080;
  border-radius: 5%;
  user-select: none;
}
#exitBtn, #prevBtn, #nextBtn {
  position: absolute;
  cursor: pointer;
  width: 3vmax;
  text-align: center;
  font-size: 2vmax;
  color: #808080;						
  background-color: transparent;
  border-radius: 10%;
  user-select: none;
}
#exitBtn:focus {
  background-color: #D0D0D0;
}
#exitBtn:hover {
  background-color: #D0D0D0;
}
#prevBtn:focus, #nextBtn:focus {
  color: #D0D0D0;
}
#prevBtn:hover, #nextBtn:hover {
  color: #D0D0D0;
}
#exitBtn {
  top: .5vmax;
  left: 1vmax;
  height: 3vmax;
}
#prevBtn {
  top: 43.25dvh;
  left: 1vmax;
  height: 9vmax;
}
#nextBtn {
  top: 43.25dvh;
  right: 1dvw;
  height: 9vmax;
}
#photocontainBtn img, #photofillBtn img, #photocoverBtn img, #reverseBtn img, #pauseBtn img, #playBtn img, #fullscreenBtn img, #fullscreenexitBtn img {
  position: absolute;
  cursor: pointer;
  height: 3vmax;
  width: 3vmax;
  background-color: transparent;
  border-radius: 10%;
  user-select: none;
}
#photocontainBtn img:focus, #photofillBtn img:focus, #photocoverBtn img:focus, #reverseBtn img:focus, #pauseBtn img:focus, #playBtn img:focus, #fullscreenBtn img:focus, #fullscreenexitBtn img:focus {
  background-color: #D0D0D0;
}
#photocontainBtn img:hover, #photofillBtn img:hover, #photocoverBtn img:hover, #reverseBtn img:hover, #pauseBtn img:hover, #playBtn img:hover, #fullscreenBtn img:hover, #fullscreenexitBtn img:hover {
  background-color: #D0D0D0;
}
#photocontainBtn img, #photofillBtn img, #photocoverBtn img {
  top: .5vmax;
  left: 16vmax;
}
#reverseBtn img {
  top: .5vmax;
  left: 19vmax;
}
#pauseBtn img {
  top: .5vmax;
  left: 22vmax;
}
#playBtn img {
  top: .5vmax;
  left: 25vmax;
}
#fullscreenBtn img, #fullscreenexitBtn img {
  top: .5vmax;
  right: 1dvw;
}
@media screen and (max-width: 980px) {
  #photoCount {
    left: 5.5vmax;
    height: 4.5vmax;
    width: 18vmax;
    font-size: 2vmax;
  }
  #exitBtn, #prevBtn, #nextBtn {
    width: 4.5vmax;
    font-size: 3vmax;
  }
  #exitBtn {
    height: 4.5vmax;
  }
  #prevBtn, #nextBtn {
    height: 13.5vmax;
  }
  #photocontainBtn img, #photofillBtn img, #photocoverBtn img, #reverseBtn img, #pauseBtn img, #playBtn img {
    top: 5vmax;
    height: 4.5vmax;
    width: 4.5vmax;
  }
  #fullscreenBtn img, #fullscreenexitBtn img {
    height: 4.5vmax;
    width: 4.5vmax;
  }
  #photocontainBtn img, #photofillBtn img, #photocoverBtn img {
    left: 5.5vmax;
  }
  #reverseBtn img {
    left: 10vmax;
  }
  #pauseBtn img {
    left: 14.5vmax;
  }
  #playBtn img {
    left: 19vmax;
  }
}