html, body {
  height: 100%;
  overflow: hidden;
  background: radial-gradient(circle, white, rgba(0, 0, 0, 0.5));
  background-color: #2E732C;
  background-blend-mode: overlay;
}

.credits {
  width: 100%;
  top: 90%;
}

.text {
  text-align: center;
  font-family: Helvetica;
  font-size: .8rem;
  color: grey;
  pointer-events: none;
}

.centered, .cube > .piece > .element > .sticker {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.scene {
  width: 100%;
  height: 100%;
  perspective: 1200px;
  transform-style: preserve-3d;
}
.scene > .pivot {
  width: 0;
  height: 0;
  transition: .18s;
}
.scene .anchor {
  width: 2em;
  height: 6em;
}
.scene div {
  position: absolute;
  transform-style: inherit;
}

/*#piece4 > .element.top > .sticker {
  background-image: URL("http://i63.tinypic.com/25hh1xu.png");
  background-size: cover;
}*/

/*#piece22 > .element > .sticker {
  background-image: URL("cell_4.png");
  background-size: cover;
}*/

.cube {
  font-size: 190%;
  margin-left: -1em;
  margin-top: -1em;
}
.cube > .piece {
  width: 1.9em;
  height: 1.9em;
}
.cube > .piece > .element {
  width: 100%;
  height: 100%;
  background: #0A0A0A;
  outline: 1px solid transparent;
  border: 0.05em solid #0A0A0A;
  border-radius: 10%;
}
.cube > .piece > .element.left {
  transform: rotateX(0deg) rotateY(-90deg) rotateZ(180deg) translateZ(1em);
}
.cube > .piece > .element.right {
  transform: rotateX(0deg) rotateY(90deg) rotateZ(90deg) translateZ(1em);
}
.cube > .piece > .element.back {
  transform: rotateX(0deg) rotateY(180deg) rotateZ(-90deg) translateZ(1em);
}
.cube > .piece > .element.front {
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(1em);
}
.cube > .piece > .element.bottom {
  transform: rotateX(-90deg) rotateY(0deg) rotateZ(-90deg) translateZ(1em);
}
.cube > .piece > .element.top {
  transform: rotateX(90deg) rotateY(0deg) rotateZ(180deg) translateZ(1em);
}
.cube > .piece > .element > .sticker {
  transform: translateZ(2px);
  width: 95%;
  height: 95%;
  border-radius: 10%;
  outline: 1px solid transparent;
  box-shadow: inset 0.05em 0.05em 0.2rem 0 rgba(255, 255, 255, 0.25), inset -0.05em -0.05em 0.2rem 0 rgba(0, 0, 0, 0.25);
}
.cube > .piece > .element > .sticker.blue {
  background-color: #001ca8;
}
.cube > .piece > .element > .sticker.green {
  background-color: #006E16;
}
.cube > .piece > .element > .sticker.white {
  /*background-color: #DDD;*/
  background-image: URL("cell.png");
  background-size: cover;
}
.cube > .piece > .element > .sticker.yellow {
  background-color: #E0AE00;
}
.cube > .piece > .element > .sticker.orange {
  background-color: #FF5000;
}
.cube > .piece > .element > .sticker.red {
  background-color: #DF0500;
}

.cube > .piece > .element > .sticker.four {
  background-image: URL("cell_4.png");
  background-size: cover;
}
.cube > .piece > .element > .sticker.two {
  background-image: URL("cell_2.png");
  background-size: cover;
}
.cube > .piece > .element > .sticker.zero {
  background-image: URL("cell_0.png");
  background-size: cover;
}
.cube > .piece > .element > .sticker.b {
  background-image: URL("cell_b.png");
  background-size: cover;
}
.cube > .piece > .element > .sticker.u {
  background-image: URL("cell_u.png");
  background-size: cover;
}
.cube > .piece > .element > .sticker.d {
  background-image: URL("cell_d.png");
  background-size: cover;
}
.cube > .piece > .element > .sticker.h {
  background-image: URL("cell_h.png");
  background-size: cover;
}
.cube > .piece > .element > .sticker.i {
  background-image: URL("cell_i.png");
  background-size: cover;
}
.cube > .piece > .element > .sticker.t {
  background-image: URL("cell_t.png");
  background-size: cover;
}
.cube > .piece > .element > .sticker.n {
  background-image: URL("cell_n.png");
  background-size: cover;
}
.cube > .piece > .element > .sticker.g {
  background-image: URL("cell_g.png");
  background-size: cover;
}
.cube > .piece > .element > .sticker.c {
  background-image: URL("cell_c.png");
  background-size: cover;
}
.cube > .piece > .element > .sticker.p {
  background-image: URL("cell_p.png");
  background-size: cover;
}
.cube > .piece > .element > .sticker.o {
  background-image: URL("cell_o.png");
  background-size: cover;
}
.cube > .piece > .element > .sticker.leaf {
  background-image: URL("cell_leaf.png");
  background-size: cover;
}
.cube > .piece > .element > .sticker.copy {
  background-image: URL("cell_copy.png");
  background-size: cover;
}