body {background-color: black; color:#E4E4E4;padding: 0px;margin: 0px;}
div{margin: 0,auto;width: 100%;text-align: center;}
a {color:yellow;text-decoration:none;}
canvas {
  background-color: #000;
  display: block;
  margin: 0 auto;
  z-index: -1;
  position : absolute;
}
.way {
    width: 100%;
    float: left;
}
@keyframes rotateHAHA{
      0%{
            transform: rotateX(0deg) rotateY(0deg);
      }
      100%{
            transform: rotateX(360deg) rotateY(360deg);
      }
}
.cube {
    font-size: 4em;
    width: 2em;
    height: 2em;
    margin: 1.5em auto;
    transform-origin: 1em 1em;
    transform-style: preserve-3d;
    transform: rotateX(0deg) rotateY(0deg);
}
.cube{
      animation: rotateHAHA 8s linear infinite;
}
.side {
    position: absolute;
    width: 2em;
    height: 2em;
    background: rgba(255, 99, 71, 0);
    border: 1px solid rgba(255, 255, 255, 0.9);
    color: white;
    text-align: center;
    line-height: 2em;
}
.front {
    transform: translateZ(1em);
}
.top {
    transform: rotateX(90deg) translateZ(1em);
}
.right {
    transform: rotateY(90deg) translateZ(1em);
}
.left {
    transform: rotateY(-90deg) translateZ(1em);
}
.bottom {
    transform: rotateX(-90deg) translateZ(1em);
}

.back {
    transform: rotateY(-180deg) translateZ(1em);
}
.w2{
      perspective-origin: 20% 20%;
    perspective: 1000px;
}