body.dark {
  background: #000;
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
}

#button-praxinoscope {
  display: block;
  position: relative;
  z-index: 10;
  font-size: 1.1em;
  font-weight: bold;
  text-transform: uppercase;
  padding: 10px 15px;
  /* margin: 20px auto; */
  color: #ccc;
  background-color: #555;
  background: -webkit-linear-gradient(#888, #555);
  background: linear-gradient(#888, #555);
  border: 0 none;
  border-radius: 3px;
  text-shadow: 0 -1px 0 #000;
  box-shadow: 0 1px 0 #666, 0 5px 0 #444, 0 6px 6px rgba(0,0,0,0.6);
  cursor: pointer;
  -webkit-transition: all 150ms ease;
  transition: all 150ms ease;
}

#button-praxinoscope:hover,
#button-praxinoscope:focus {
  animation: pulsate 1.2s linear infinite;
}

#button-praxinoscope:active {
  color: #fff;
  text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff;
  box-shadow: 0 1px 0 #666, 0 2px 0 #444, 0 2px 2px rgba(0,0,0,0.9);
  transform: translateY(3px);
  animation: none;
}

#container-praxinoscope {
  width: 210px;
  height: 450px;
  position: relative;
  perspective: 1000px;
  margin: 110px auto;
}

#window {
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
  position: absolute;
  z-index: 9;
  width: 253px;
  height: 545px;
  margin-top: -100px;
  margin-left: 15px;
  -webkit-box-shadow: 0 0 0 800px rgba(0,0,0,0);
  box-shadow: 0 0 0 800px rgba(0,0,0,0);
}

.lightsOff {
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
  -webkit-box-shadow: 0 0 0 800px rgba(0,0,0,0.9) !important;
  box-shadow: 0 0 0 800px rgba(0,0,0,0.9) !important;
}

#praxinoscope {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    animation: move 1s steps(12) infinite;
    transform-origin: 127px 225px;
}

#praxinoscope figure {
  display: block;
  position: absolute;
  background: url('https://upload.wikimedia.org/wikipedia/commons/e/eb/Boys_playing_Leapfrog.jpg');
  width: 150px;
  height: 330px;
  left: 10px;
  top: 10px;
  border: 2px solid black;
  background-position-y: -20px;
  background-position-x: -18px;
}

/* Explicitly write out the 12 nth-child rules for the praxinoscope figures */
#praxinoscope figure:nth-child(1) {
  transform: rotateY(0deg) translateZ(392px);
  background-position-x: -12px;
}
#praxinoscope figure:nth-child(2) {
  transform: rotateY(30deg) translateZ(392px);
  background-position-x: -171px;
}
#praxinoscope figure:nth-child(3) {
  transform: rotateY(60deg) translateZ(392px);
  background-position-x: -330px;
}
#praxinoscope figure:nth-child(4) {
  transform: rotateY(90deg) translateZ(392px);
  background-position-x: -489px;
}
#praxinoscope figure:nth-child(5) {
  transform: rotateY(120deg) translateZ(392px);
  background-position-x: -648px;
}
#praxinoscope figure:nth-child(6) {
  transform: rotateY(150deg) translateZ(392px);
  background-position-x: -807px;
}
#praxinoscope figure:nth-child(7) {
  transform: rotateY(180deg) translateZ(392px);
  background-position-x: -966px;
}
#praxinoscope figure:nth-child(8) {
  transform: rotateY(210deg) translateZ(392px);
  background-position-x: -1125px;
}
#praxinoscope figure:nth-child(9) {
  transform: rotateY(240deg) translateZ(392px);
  background-position-x: -1284px;
}
#praxinoscope figure:nth-child(10) {
  transform: rotateY(270deg) translateZ(392px);
  background-position-x: -1443px;
}
#praxinoscope figure:nth-child(11) {
  transform: rotateY(300deg) translateZ(392px);
  background-position-x: -1602px;
}
#praxinoscope figure:nth-child(12) {
  transform: rotateY(330deg) translateZ(392px);
  background-position-x: -1761px;
}


@keyframes pulsate {
  0%, 100% {
    color: #ddd;
    text-shadow: 0 -1px 0 #000;
  }
  50% {
    color: #fff;
    text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff;
  }
}

@keyframes move {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(-360deg);
  }
}

/*
.container-praxinoscope {
  overflow: hidden;
  width: 150px;
  height: 330px;
  border: 1px solid black;
}

.sprites {
  background: url('https://upload.wikimedia.org/wikipedia/commons/e/eb/Boys_playing_Leapfrog.jpg');
  width: 100%;
  height: 100%;
  background-position-x: 0px;
  background-position-y: -370px;
  animation: film 1000ms steps(11) infinite;
}

@keyframes film {
  from {
    background-position-x: -18px;
  }
  to {
    background-position-x: -1750px;
  }
}*/