.fondo {
  background-color: black;
}

.cubo {
  overflow: hidden;
}

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

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

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

.scene {
  margin-top: 5%;
  margin-bottom: auto;
  width: 100%;
  height: 100%;
  perspective: 1200px;
  transform-style: preserve-3d;
}

.scene > .pivot {
  width: 0;
  height: 0;
  transition: 0.18s;
}

.scene .anchor {
  width: 2em;
  height: 6em;
}

.scene div {
  position: absolute;
  transform-style: inherit;
}

#piece4 > .element.top > .sticker {
  background-color: #ddd;
}

.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;
}

.cube > .piece > .element > .sticker.yellow {
  background-color: #e0ae00;
}

.cube > .piece > .element > .sticker.orange {
  background-color: #ff5000;
}

.cube > .piece > .element > .sticker.red {
  background-color: #df0500;
}