p, body {
  margin: 0; }

html, body {
  height: 100%; }

body {
  overflow: hidden;
  box-sizing: border-box;
  color: #FFF;
  background: radial-gradient(ellipse at center, #444 0%, #000000 90%); }

.outer-wrap {
  position: relative;
  top: 160px;
  width: 800px;
  margin: 0 auto;
  perspective: 1600px; }

.cube-content {
  transform: rotateX(-30deg) rotateY(-45deg) rotateZ(0deg);
  transform-style: preserve-3d; }

.outer-box {
  position: relative;
  margin: auto;
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  transition: transform 0.3s;
  transform-style: preserve-3d;
  user-select: none; }
  .outer-box.no-animate {
    transition: none; }

.cubes {
  position: absolute;
  transform-style: preserve-3d;
  width: 100px;
  height: 100px; }

.face {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 100px;
  outline: 1px solid;
  background: #ccc;
  list-style: none;
  opacity: 0.8; }

.front {
  transform: translate3d(0px, 0px, 50px); }

.back {
  transform: translate3d(0px, 0px, -50px); }

.left {
  transform: translate3d(-50px, 0px, 0px) rotateY(90deg); }

.right {
  transform: translate3d(50px, 0px, 0px) rotateY(90deg); }

.up {
  transform: translate3d(0px, -50px, 0px) rotateX(90deg); }

.bottom {
  transform: translate3d(0px, 50px, 0px) rotateX(90deg); }