div#Viewer {
  display:none;
  position:fixed;
  width:100%;
  height:100%;
  top:0;
  left:0;
  background-color:rgba(0,0,0,0.85);
}

div#Viewer div {
  position:absolute;
  box-sizing:border-box;
}

div#Viewer svg {
  position:absolute;
  stroke:white;
  stroke-width:5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

div#Viewer-spin {
  top:50%;
  left:50%;
  height:30px;
  width:30px;
  border:5px solid grey;
  border-top:5px solid blue;
  border-radius:100%;
  animation:Viewer-rotation 1s infinite ease;
}

div#Viewer-exit {
  top:0; right:0;
  width:10%; height:10%;
}

div#Viewer-exit svg {
  top:10%; right:10%;
}

div#Viewer-next {
  top:10%; right:0;
  width:60%; height:90%;
}

div#Viewer-next svg {
  top:45%; right:5%;
}

div#Viewer-prev {
  top:10%; left:0;
  width:40%; height:90%;
}

div#Viewer-prev svg {
  top:45%; left:5%;
}

div#Viewer-head {
  top:1%;
  left:50%;
  transform:translate(-50%);
  background-color:black;
  color:white;
  position:absolute;
  padding:10px 20px;
  border-radius: 10px;
}

div#Viewer-desc {
  bottom:5%;
  left:20%;
  width:60%;
  background-color:black;
  color:white;
  position:absolute;
  padding:20px;
  border-radius: 10px;
  display:none;
}

div#Viewer-photo {
  top:5%;
  left:5%;
  width:90%;
  height:90%;
}

div#Viewer-photo img {
  display:block;
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  max-width:100%;
  max-height:100%;
  user-select:none;
}

@keyframes Viewer-rotation {
  from { transform: rotate(0deg); }
  to   { transform: rotate(359deg); }
}