body {
  background-color: #0e0f14;
  margin: 0;
}

div#wonder {
  width: 100%;
  height: 100vh;
}

div#wonder #wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 184px;
  width: 184px;
  margin-top: -92px;
  margin-left: -92px;

  -webkit-animation:spin 60s linear 5s infinite;
  -moz-animation:spin 60s linear 5s infinite;
  animation:spin 60s linear 5s infinite;
}

div#wonder #fade {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: 0 0 30px 10px #0e0f14 inset;
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

/* disabled for now
.background {
    animation: slide 3s ease-in-out infinite alternate;
    background-image : linear-gradient(-40deg, #0a0f0f 50%, #0a0a15 50%);
    bottom: 0;
    left: -50%;
    opacity: .5;
    position: fixed;
    right: -50%;
    top: 0;
    z-index: -1;
}

.background2 {
    animation-direction: alternate-reverse;
    animation-duration: 8s;
}

.background3 {
    animation-duration: 15s;
}

@keyframes slide {
    0% {
        transform: translateX(-25%);
    }
    100% {
        transform: translateX(25%);
    }
}
*/