body {background: #eee; margin: 0; font-family: monospace;}
.animate-fading{animation:fading 2s infinite; transition: all 0.2s ease-in-out;}
.item p {display: block; position: absolute; width: 100%; text-align: center; color: #fff;  opacity: 0.3;}
@keyframes fading{
  0%{opacity:0}
  30%{opacity:1}
  70%{opacity:1}
  100%{opacity:0}
}
#container {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 99;
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}
#hud {position: absolute; bottom: 0; z-index: 999; width: 100%; text-align: center; margin-top: 1em;
  opacity: 0.3;
}
  #hud:hover {opacity: 1;}
  #hud button {background: transparent; color: #000; border: none; outline: none; cursor: pointer; padding: 1em; font-family: monospace;}
  #hud button:hover {color: red;}
  #num {color: #000; font-family: monospace; display: inline-block; width: 40px;  text-align: center; }

  .center {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 99;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    z-index: 999999;
  }

  #playbtn {
    text-indent: -10000em;
    background: transparent url('svg/pause.svg') 0 0 no-repeat;
    border: none;
    outline: none;
    cursor: pointer;
    display: block; width: 100px; height: 100px;
    opacity: 0;
    transition: all 0.2s ease-in-out;
  }
  #playbtn.paused {background: transparent url('svg/play.svg') 0 0 no-repeat;
}

#playbtn:hover {
  background-color:rgba(0,0,0,0.4); 
  opacity: 1;
}
.item img {box-shadow: 0 0 15px rgba(0,0,0,0.2);}

#nav {
margin:1em;
position: relative;
z-index: 999;
}

#nav a {
display: block;
line-height:1.2em;
padding:5px;
}