body{
  margin:0;
  background:#000;
  font-size:16px;
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
}
body:not(.Singleton){
  font-size:min(1.7vw, 2.3vh);
}

label{
  color:#fff;
}

[type="button"],
[type="radio"]{
  height:0;
  width:0;
  margin:0;
  -webkit-appearance:none;
     -moz-appearance:none;
          appearance:none;
  float:left;
  opacity:0;
}

.controls{
  position:absolute;
  z-index: 10;
  top:0;
  left:0;
  height:8em;
  width:8em;
  border-radius:50%;
  background:rgba(0,0,0,0.5);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.button{
  position:absolute;
  height:2em;
  width:2em;
  line-height:2em;
  text-align:center;
  background:grey;
}
#left:focus ~ .controls .left,
#turnleft:focus ~ .controls .turnleft,
#forwards:focus ~ .controls .forwards,
#backwards:focus ~ .controls .backwards,
#right:focus ~ .controls .right,
#turnright:focus ~ .controls .turnright{
  outline: Highlight auto 2px;
  outline: -webkit-focus-ring-color auto 5px;
}
#left:active ~ .controls .left,
#turnleft:active ~ .controls .turnleft,
#forwards:active ~ .controls .forwards,
#backwards:active ~ .controls .backwards,
#right:active ~ .controls .right,
#turnright:active ~ .controls .turnright{
  background:darkgrey;
}



.button.forwards,
.button.backwards{
  transform:rotate(-90deg);
}
.button.forwards{
  top:0;
  left:3em;
}
.button.backwards{
  bottom:0;
  left:3em;
}
.button.left{
  top:3em;;
  left:0;
}
.button.right{
  top:3em;
  right:0;
}
.button.turnleft{
  top:0em;
  left:0;
}
.button.turnright{
  top:0em;
  right:0;
}


.controlsLeft,
.controlsRight{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index:-1;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-duration: 20s;
          animation-duration: 20s;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.controlsLeft{
  -webkit-animation-name:controlsLeft;
          animation-name:controlsLeft;
}
#turnleft:active ~* .controlsLeft{
  -webkit-animation-play-state: running;
          animation-play-state: running;
}
@-webkit-keyframes controlsLeft{
  100%{
    transform:rotate(3600deg);
  }
}
@keyframes controlsLeft{
  100%{
    transform:rotate(3600deg);
  }
}

.controlsRight{
  -webkit-animation-name:controlsRight;
          animation-name:controlsRight;
}
#turnright:active ~* .controlsRight{
  -webkit-animation-play-state: running;
          animation-play-state: running;
}
@-webkit-keyframes controlsRight{
  100%{
    transform:rotate(-3600deg);
  }
}
@keyframes controlsRight{
  100%{
    transform:rotate(-3600deg);
  }
}


.move{
  transform-style: preserve-3d;
  transition:transform 1s;
}
.scene{
  transform: translateY(18em);
}

.move{
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-duration: 20s;
          animation-duration: 20s;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.walkF{
  -webkit-animation-name:forward;
          animation-name:forward;
}
#forwards:active ~* .walkF{
  -webkit-animation-play-state: running;
          animation-play-state: running;
}
@-webkit-keyframes forward{
  100%{
    transform:translateZ(280em);
  }
}
@keyframes forward{
  100%{
    transform:translateZ(280em);
  }
}

.walkB{
  -webkit-animation-name:backwards;
          animation-name:backwards;
}
#backwards:active ~* .walkB{
  -webkit-animation-play-state: running;
          animation-play-state: running;
}
@-webkit-keyframes backwards{
  100%{
    transform:translateZ(-280em);
  }
}
@keyframes backwards{
  100%{
    transform:translateZ(-280em);
  }
}

.walkL{
  -webkit-animation-name:walkLeft;
          animation-name:walkLeft;
}
#left:active ~* .walkL{
  -webkit-animation-play-state: running;
          animation-play-state: running;
}
@-webkit-keyframes walkLeft{
  100%{
    transform:translateX(280em);
  }
}
@keyframes walkLeft{
  100%{
    transform:translateX(280em);
  }
}

.walkR{
  -webkit-animation-name:walkRight;
          animation-name:walkRight;
}
#right:active ~* .walkR{
  -webkit-animation-play-state: running;
          animation-play-state: running;
}
@-webkit-keyframes walkRight{
  100%{
    transform:translateX(-280em);
  }
}
@keyframes walkRight{
  100%{
    transform:translateX(-280em);
  }
}

.rotateR{
  -webkit-animation-name:right;
          animation-name:right;
}
#turnright:active ~* .rotateR{
  -webkit-animation-play-state: running;
          animation-play-state: running;
}
@-webkit-keyframes right{
  100%{
    transform:rotateY(3600deg);
  }
}
@keyframes right{
  100%{
    transform:rotateY(3600deg);
  }
}

.rotateL{
  -webkit-animation-name:left;
          animation-name:left;
}
#turnleft:active ~* .rotateL{
  -webkit-animation-play-state: running;
          animation-play-state: running;
}
@-webkit-keyframes left{
  100%{
    transform:rotateY(-3600deg);
  }
}
@keyframes left{
  100%{
    transform:rotateY(-3600deg);
  }
}

.rotateL,
.rotateR{
/* This isn't working on safari */
  transform-origin:25em 0em 50em;
}

.rt{
  background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/51773/Grey10.bmp) left/auto 100%;
}
.lt,
.ft,
.bk{
  background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/51773/Grey9.bmp) left/auto 100%;
}

.bm{
  background:#707070 !important;
}
.tp{
  background:#383838 !important;
}
.transparent{
  background:transparent !important;
}

.gun{
  position:absolute;
  height:15em;
  width:13em;
  left:18em;
  bottom:0;
  z-index:1;
  overflow:hidden;
}
.gun::after{
  content:'';
  position: absolute;
  width:500%;
  height:100%;
  background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/51773/wolf-gun.gif)0% 0%/cover repeat-x;
  transition:transform .5s steps(4, end);
  transform: translateX(-80%);
  transition-delay:0s;
}
#tridiv:active .gun::after{
  transform: translateX(-0%);
  transition:none;
  transition-delay:.5s;
}
/* Can shoot through divs */
.shape{
  pointer-events:none;
}
/* But can't shoot through walls */
.face{
  pointer-events:auto;
}

.guard{
  display: block;
  position:relative;
  height: 20em;
  width: 20em;
  overflow:hidden;
  transform: translate3d(65em,30em,10em) rotateY(-90deg);
  clear:both;
  float:left;
}
#guard:checked ~ * .guard{
  pointer-events:none;
}
.guard::after{
  content:'';
  position: absolute;
  width:500%;
  height:100%;
  background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/51773/guard.gif);
  background-size:cover;
  background-position: 0em -20em;
  -webkit-animation:guard 1s steps(1, start) infinite;
          animation:guard 1s steps(1, start) infinite;
}
#guard:focus ~ * .guard::before,
#boss:focus ~ * .boss::before{
  content:'';
  position: absolute;
  width:100%;
  height:100%;
  z-index: 1;
  background-image:radial-gradient(closest-side, #d00, #a00 5%, transparent 5%, transparent 15%, #d00 15%, #a00 20%, transparent 20%, transparent 25%, #d00 25%, #a00 30%, transparent 30%)
  }
#guard:checked ~ * .guard::after{
  background-position: 0em 40em;
  -webkit-animation:guard-dead 1s steps(4, start) 1 forwards;
          animation:guard-dead 1s steps(4, start) 1 forwards;
}
@-webkit-keyframes guard{
  0%,50%{
    transform:translateX(0);
  }
  75%{
    transform:translateX(-20em);
  }
  100%{
    transform:translateX(-40em);
  }
}
@keyframes guard{
  0%,50%{
    transform:translateX(0);
  }
  75%{
    transform:translateX(-20em);
  }
  100%{
    transform:translateX(-40em);
  }
}
@-webkit-keyframes guard-dead{
  100%{
    transform:translateX(-80em);
  }
}
@keyframes guard-dead{
  100%{
    transform:translateX(-80em);
  }
}

.boss{
  display: block;
  position:relative;
  height: 20em;
  width: 20em;
  overflow:hidden;
  transform: translate3d(80em,10em,-30em);
  clear:both;
  float:left;
  -webkit-animation:boss-walk 8s infinite linear;
          animation:boss-walk 8s infinite linear;
}
@-webkit-keyframes boss-walk{
  0%{transform: translate3d(80em,10em,-30em);}
  20%{transform: translate3d(80em,10em,-20em);}
  50%{transform: translate3d(80em,10em,-20em);}
  75%{transform: translate3d(80em,10em,-30em);}
}
@keyframes boss-walk{
  0%{transform: translate3d(80em,10em,-30em);}
  20%{transform: translate3d(80em,10em,-20em);}
  50%{transform: translate3d(80em,10em,-20em);}
  75%{transform: translate3d(80em,10em,-30em);}
}
#boss:checked ~ * .boss{
  pointer-events:none;
  -webkit-animation-play-state:paused;
          animation-play-state:paused;
}
.boss::after{
  content:'';
  position: absolute;
  bottom:0;
  left:0;
  width:400%;
  height:300%;
  background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/51773/boss.png);
  background-size:cover;
  -webkit-animation:boss 4s steps(1, start) infinite;
          animation:boss 4s steps(1, start) infinite;
}
#boss:checked ~ * .boss::after{
  -webkit-animation:boss-dead 1s steps(3, start) 1 forwards;
          animation:boss-dead 1s steps(3, start) 1 forwards;
}
@-webkit-keyframes boss{
  0%{transform:translateX(0%);}
  6.25%{transform:translateX(-25%);}
  12.5%{transform:translateX(-50%);}
  18.25%{transform:translateX(-75%);}
  25%{transform:translateX(0%);}
  31.25%{transform:translateX(-25%);}
  37.5%{transform:translateX(-50%);}
  43.75%{transform:translateX(-75%);}
  50%{transform:translate(0%,20em);}
  56.25%{transform:translate(-25%,20em);}
  62.5%{transform:translate(-50%,20em);}
  68.75%{transform:translate(-75%,20em);}
  75%{transform:translate(0%,20em);}
  81.25%{transform:translate(-25%,20em);}
  87.5%{transform:translate(-50%,20em);}
  93.75%{transform:translate(-75%,20em);}
}
@keyframes boss{
  0%{transform:translateX(0%);}
  6.25%{transform:translateX(-25%);}
  12.5%{transform:translateX(-50%);}
  18.25%{transform:translateX(-75%);}
  25%{transform:translateX(0%);}
  31.25%{transform:translateX(-25%);}
  37.5%{transform:translateX(-50%);}
  43.75%{transform:translateX(-75%);}
  50%{transform:translate(0%,20em);}
  56.25%{transform:translate(-25%,20em);}
  62.5%{transform:translate(-50%,20em);}
  68.75%{transform:translate(-75%,20em);}
  75%{transform:translate(0%,20em);}
  81.25%{transform:translate(-25%,20em);}
  87.5%{transform:translate(-50%,20em);}
  93.75%{transform:translate(-75%,20em);}
}
@-webkit-keyframes boss-dead{
  0%{transform:translate(0%,40em)}
  100%{transform:translate(-75%,40em)}
}
@keyframes boss-dead{
  0%{transform:translate(0%,40em)}
  100%{transform:translate(-75%,40em)}
}

/* All browsers need these Apple fixes now */
.safariFix{
  transform-style: preserve-3d;
}

 .Appleguard,
 .Appleboss{
  position:absolute;
  display:block;
  top:0;
  left:0;
  right:0;
  bottom:0;
}
 .Appleguard{transform:translateZ(18em);}
 .Appleboss{transform:translateZ(19em);}

 #guard:checked ~ * .Appleguard,
 #boss:checked ~ * .Appleboss{
  display:none;
}

/* Add .Singleton to target Applemail 10 */
.Singleton .rotateL{
  transform-origin:25em 0em 0em;
}
.Singleton .rotateR{
  transform-origin:25em 0em 50em;
} 
.Singleton .safariFix{
  transform: translateZ(50em);
  transform-style: preserve-3d;
}

.Singleton .gun{
  transform:translateX(.5em)translateY(-9em)translateZ(40em)scale(.2);
}










#tridiv {
  perspective: 50em;
  position: relative;
  overflow: hidden;
  margin:0 auto;
  width: 50em;
  height: 37.5em;
  background: transparent;
  font-size: 100%;
  outline:.25em darkred solid;
}
.scene, .shape, .face, .face-wrapper{
  position: absolute;
  transform-style: preserve-3d;
}
.scene {
  width: 80em;
  height: 80em;
  top: 50%;
  left: 50%;
  margin: -40em 0 0 -40em;
}
.shape {
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform-origin: 50%;
}
.face, .face-wrapper {
  overflow: hidden;
  transform-origin: 0 0;
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
  /* hidden by default, prevent blinking and other weird rendering glitchs */
}
.face-wrapper .face {
  left: 100%;
  width: 100%;
  height: 100%
}
.photon-shader {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%
}
.side {
  left: 50%;
}
[class*="cuboid"] .ft, [class*="cuboid"] .bk {
  width: 100%;
  height: 100%;
}
[class*="cuboid"] .bk {
  left: 100%;
}
[class*="cuboid"] .rt {
  transform: rotateY(-90deg) translateX(-50%);
}
[class*="cuboid"] .lt {
  transform: rotateY(90deg) translateX(-50%);
}
[class*="cuboid"] .tp {
  transform: rotateX(90deg) translateY(-50%);
}
[class*="cuboid"] .bm {
  transform: rotateX(-90deg) translateY(-50%);
}
[class*="cuboid"] .lt {
  left: 100%;
}
[class*="cuboid"] .bm {
  top: 100%;
}
/* .cub-4 styles */
.cub-4 {
  transform:translate3D(0em, 0em, 10em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:20em;
  height:20em;
  margin:-10em 0 0 -10em;
}
.cub-4 .ft {
  transform:translateZ(10em);
}
.cub-4 .bk {
  transform:translateZ(-10em) rotateY(180deg);
}
.cub-4 .rt, .cub-4 .lt {
  width:20em;
  height:20em;
}
.cub-4 .tp, .cub-4 .bm {
  width:20em;
  height:20em;
}


/* .cub-5 styles */
.cub-5 {
  transform:translate3D(0em, 0em, 30em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:20em;
  height:20em;
  margin:-10em 0 0 -10em;
}
.cub-5 .ft {
  transform:translateZ(10em);
}
.cub-5 .bk {
  transform:translateZ(-10em) rotateY(180deg);
}
.cub-5 .rt, .cub-5 .lt {
  width:20em;
  height:20em;
}
.cub-5 .tp, .cub-5 .bm {
  width:20em;
  height:20em;
}

.cub-5 .ft {
  width:20em;
  margin-left:0em;
}
.cub-5 .bk {
  width:20em;
  margin-left:0em;
}
.cub-5 .rt, .cub-5 .lt {
  width:20em;
}
.cub-5 .tp, .cub-5 .bm, .cub-5 .tp .photon-shader, .cub-5 .bm .photon-shader {
  border-radius:0em;
}
.cub-5 .side {
  width:0.025em;
}
/* .cub-6 styles */
.cub-6 {
  transform:translate3D(25em, 0em, 10em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:30em;
  height:20em;
  margin:-10em 0 0 -15em;
}
.cub-6 .ft {
  transform:translateZ(10em);
}
.cub-6 .bk {
  transform:translateZ(-10em) rotateY(180deg);
}
.cub-6 .rt, .cub-6 .lt {
  width:20em;
  height:20em;
}
.cub-6 .tp, .cub-6 .bm {
  width:30em;
  height:20em;
}

/* .cub-7 styles */
.cub-7 {
  transform:translate3D(50em, 0em, 10em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:20em;
  height:20em;
  margin:-10em 0 0 -10em;
}
.cub-7 .ft {
  transform:translateZ(10em);
}
.cub-7 .bk {
  transform:translateZ(-10em) rotateY(180deg);
}
.cub-7 .rt, .cub-7 .lt {
  width:20em;
  height:20em;
}
.cub-7 .tp, .cub-7 .bm {
  width:20em;
  height:20em;
}

.cub-7 .ft {
  width:20em;
  margin-left:0em;
}
.cub-7 .bk {
  width:20em;
  margin-left:0em;
}
.cub-7 .rt, .cub-7 .lt {
  width:20em;
}
.cub-7 .tp, .cub-7 .bm, .cub-7 .tp .photon-shader, .cub-7 .bm .photon-shader {
  border-radius:0em;
}

.cub-7 .side {
  width:0.025em;
}
/* .cub-8 styles */
.cub-8 {
  transform:translate3D(50em, 0em, -20em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:20em;
  height:20em;
  margin:-10em 0 0 -10em;
}
.cub-8 .ft {
  transform:translateZ(20em);
}
.cub-8 .bk {
  transform:translateZ(-20em) rotateY(180deg);
}
.cub-8 .rt, .cub-8 .lt {
  width:40em;
  height:20em;
}
.cub-8 .tp, .cub-8 .bm {
  width:20em;
  height:40em;
}
.cub-8 .ft {
  width:20em;
  margin-left:0em;
}
.cub-8 .bk {
  width:20em;
  margin-left:0em;
}
.cub-8 .rt, .cub-8 .lt {
  width:40em;
}
.cub-8 .tp, .cub-8 .bm, .cub-8 .tp .photon-shader, .cub-8 .bm .photon-shader {
  border-radius:0em;
}

.cub-8 .side {
  width:0.025em;
}


@media screen and (max-width:500px){
  body{
    font-size:2vw;
  }
  #tridiv {
    width: 100%;
  }
  .controls{
    font-size:14px;
  }
}