/* Loosely based on https://github.com/TheLastProject/CSSBox. */

body {
  background: #242424;
  font: 11pt sans-serif;
  color: #eee;
}

strong {
  font-weight: bold;
  font-size: 13pt;
}

a {
  color: #999;
  text-decoration: none;
}

a#start {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  padding: 50pt;
  font-size: 25pt;
}

container {
  visibility: hidden;
  z-index: 10;
  position: fixed;
  top: 15pt;
  bottom: 15pt;
  left: 15pt;
  right: 15pt;
  pointer-events: none;
  cursor: default;
  opacity: 0;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(0.95);
  transition: opacity 1s, transform 1s, visibility 1s;
  filter: drop-shadow(0 0 5pt black);
}

container:target {
  visibility: visible;
  opacity: 1;
  transform: scale(1);
  pointer-events: initial;
}

container:target a.prev,
container:target a.next {
  visibility: visible;
}

container description {
  z-index: 20;
  display: block;
  position: fixed;
  bottom: 35pt;
  left: 35pt;
  font-size: 25pt;
  text-shadow: 0 0 3pt black;
  padding: 8pt 12pt;
  border-radius: 8pt;
  background-color: rgba(0, 0, 0, 0.6);
}

a.prev, a.next, a.fullscreen, a.rewind, a.download {
  z-index: 20;
  display: block;
  position: fixed;
  opacity: 0.6;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 8pt;
  transition: opacity 0.2s, background-color 0.2s;
}

a.prev:hover, a.next:hover, a.fullscreen:hover, a.rewind:hover, a.download:hover {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.6);
}

a.prev {
  top: 40%;
  bottom: 40%;
  left: 0;
  right: 90%;
  background-image: url(img/prev.png);
}

a.next {
  top: 40%;
  bottom: 40%;
  right: 0;
  left: 90%;
  background-image: url(img/next.png);
}

a.fullscreen {
  top: 10pt;
  right: 10pt;
  height: 60pt;
  width: 60pt;
  background-image: url(img/fullscreen.png);
}

a.rewind {
  top: 10pt;
  left: 10pt;
  height: 60pt;
  width: 60pt;
  background-image: url(img/first.png);
}

a.download {
  bottom: 10pt;
  right: 10pt;
  height: 60pt;
  width: 60pt;
  background-image: url(img/download.png);
}