html, body {
  height: 100%;
}

body {
  background: radial-gradient(#777, #333);
  overflow: hidden;
}

#viewbox {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 300px;
  margin: -150px 0 0 -150px;
  perspective: 800px;
  pointer-events: none;
}

.box,
.cube,
.face,
.face-wrapper,
.cr {
  position: absolute;
  transform-style: preserve-3d;
}

.box {
  width: 100%;
  height: 100%;
}

.cube {
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform-origin: 50%;
}
.cube .face {
  overflow: hidden;
  transform-origin: 0 0;
  background-size: 100% 100% !important;
  background-position: center;
}
.cube .face .face-view {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.cube .ft,
.cube .bk {
  width: 100%;
  height: 100%;
}
.cube .bk {
  left: 100%;
}
.cube .rt {
  transform: rotateY(-90deg) translateX(-50%);
}
.cube .lt {
  transform: rotateY(90deg) translateX(-50%);
}
.cube .tp {
  transform: rotateX(90deg) translateY(-50%);
}
.cube .bm {
  transform: rotateX(-90deg) translateY(-50%);
}
.cube .lt {
  left: 100%;
}
.cube .bm {
  top: 100%;
}

.cube {
  width: 160px;
  height: 160px;
  margin: -80px 0 0 -80px;
}
.cube .ft {
  transform: translateZ(80px);
}
.cube .bk {
  transform: translateZ(-80px) rotateY(180deg);
}
.cube .rt,
.cube .lt {
  width: 160px;
  height: 160px;
}
.cube .tp,
.cube .bm {
  width: 160px;
  height: 160px;
}

.cube .face {
  background-color: #cccccc;
  border: none;
}

svg#cubie {
  margin: 30px 20px 20px;
}
svg#cubie .sadface.hidden,
svg#cubie .happyface.hidden {
  visibility: hidden;
}