html,
body {
  position:relative;
  background: #fff;
  height: 100%;
  text-align: center;
}
.wrapper {
  width:100%;
}

.buttons {
  margin-left: 5px;
  z-index: 10;
  position:relative;
}
button { 
  background: #eee;
  border: 0;
  font-size: 55px;
  line-height: 1;
  padding-top: 0px;
  padding-bottom: 10px;
  width: 80px;
  height: 80px;
  color: #aaa;
  cursor:pointer;
}
button:hover {
  background: #ddd;
}
button:active {
  background: #aaa;
  color: #fff;
}




.x { 
  font-size: 990px;
  /*animation: rotate2 infinite ease-in-out 11s;*/
  animation: rotate2 ease-in infinite 12s;
  color: #fff;
  opacity: .25;
  position:absolute;
  top: 0px;
  left: 100px;
  line-height: .75;
}

@keyframes rotate2 {
  /*0%, 100% { transform: rotateX(0) rotateY(0); }*/
  5%  { color: #ff4; }
  25%  { color: #eee; }
  40%  { color: #f84; }
  50% {
    transform: rotateY(720deg) ;
    color: #f4f;
    /*left: 500px;*/
  }
  65%  { color: #44f;}
  75%  { color: #4ff; opacity: .25;}
  90% { color: #000; opacity: .5; }
  100% { color: #fff; }
}