body {
  background: lightgrey;
  overflow: hidden;
}

.scene {
  margin: 230px auto;
  width: 100px;
  perspective: 1000px;
  perspective-origin: 50% 50%;
}
@media (max-width: 500px) {
  .scene {
    transform: scale(0.7);
  }
}
@media (max-width: 400px) {
  .scene {
    transform: scale(0.6);
  }
}

.cube {
  position: relative;
  transform-style: preserve-3d;
  transform-origin: 50px 50px;
  transform: rotateY(25deg) rotateX(335deg) rotateZ(0deg);
  user-select: none;
  cursor: move;
}
.cube-layer {
  transform-style: preserve-3d;
  transform-origin: 50px 50px;
}
.cube-layer.turn {
  transition: transform 0.8s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.cubie {
  transform-style: preserve-3d;
  transform-origin: 50px 50px;
}

.cubie-corner-position-0 {
  transform: translate3d(100px, -100px, 100px);
}
.cubie-corner-position-1 {
  transform: translate3d(-100px, -100px, 100px) rotateY(-90deg);
}
.cubie-corner-position-2 {
  transform: translate3d(100px, -100px, -100px) rotateY(90deg);
}
.cubie-corner-position-3 {
  transform: translate3d(-100px, -100px, -100px) rotateY(180deg);
}
.cubie-corner-position-4 {
  transform: translate3d(100px, 100px, 100px) rotateX(180deg) rotateY(90deg);
}
.cubie-corner-position-5 {
  transform: translate3d(-100px, 100px, 100px) rotateX(180deg) rotateY(180deg);
}
.cubie-corner-position-6 {
  transform: translate3d(100px, 100px, -100px) rotateX(180deg);
}
.cubie-corner-position-7 {
  transform: translate3d(-100px, 100px, -100px) rotateX(180deg) rotateY(-90deg);
}

.cubie-corner-orientation-1 {
  transform: rotateY(-90deg) rotateX(90deg);
}
.cubie-corner-orientation-2 {
  transform: rotateY(90deg) rotateZ(-90deg);
}

.cubie-edge-position-0 {
  transform: translate3d(0px, -100px, 100px);
}
.cubie-edge-position-1 {
  transform: translate3d(-100px, -100px, 0px) rotateY(-90deg);
}
.cubie-edge-position-2 {
  transform: translate3d(100px, -100px, 0px) rotateY(90deg);
}
.cubie-edge-position-3 {
  transform: translate3d(0px, -100px, -100px) rotateY(180deg);
}
.cubie-edge-position-4 {
  transform: translate3d(0px, 100px, 100px) rotateX(180deg) rotateY(180deg);
}
.cubie-edge-position-5 {
  transform: translate3d(-100px, 100px, 0px) rotateX(180deg) rotateY(-90deg);
}
.cubie-edge-position-6 {
  transform: translate3d(100px, 100px, 0px) rotateX(180deg) rotateY(90deg);
}
.cubie-edge-position-7 {
  transform: translate3d(0px, 100px, -100px) rotateX(180deg);
}
.cubie-edge-position-8 {
  transform: translate3d(100px, 0px, 100px) rotateX(-90deg) rotateY(90deg);
}
.cubie-edge-position-9 {
  transform: translate3d(-100px, 0px, 100px) rotateX(-90deg) rotateY(-90deg);
}
.cubie-edge-position-10 {
  transform: translate3d(100px, 0px, -100px) rotateX(90deg) rotateY(90deg);
}
.cubie-edge-position-11 {
  transform: translate3d(-100px, 0px, -100px) rotateX(90deg) rotateY(-90deg);
}

.cubie-edge-orientation-1 {
  transform: rotateX(-90deg) rotateY(180deg);
}

.cubie-middle-r {
  transform: translate3d(100px, 0px, 0px);
}
.cubie-middle-l {
  transform: translate3d(-100px, 0px, 0px);
}
.cubie-middle-f {
  transform: translate3d(0px, 0px, 100px);
}
.cubie-middle-b {
  transform: translate3d(0px, 0px, -100px);
}
.cubie-middle-u {
  transform: translate3d(0px, -100px, 0px);
}
.cubie-middle-d {
  transform: translate3d(0px, 100px, 0px);
}

.cubie-face {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: rgba(0, 30, 60, 0.2);
  /*border-radius: 16px;*/
  transform-style: preserve-3d;
}
.font {
  width: 50px;
  height: 50px;
  border-radius: 50px;
  position: absolute;
  left: 25px;
  top: 25px;
  line-height: 50px;
  text-align: center;
  color: white;
  font-size: 30px;
  font-weight: 900;
  background-color: rgba(0, 0, 0, 0.3);
}

.fontRotate1 {
  transform: rotate(90deg);
}
.fontRotate2 {
  transform: rotate(180deg);
}
.fontRotate3 {
  transform: rotate(270deg);
}

.face-u {
  transform: rotateX(90deg) translateZ(50px);
}
.face-f {
  transform: translateZ(50px);
}
.face-r {
  transform: rotateY(90deg) translateZ(50px);
}
.face-l {
  transform: rotateY(-90deg) translateZ(50px);
}
.face-b {
  transform: rotateY(180deg) translateZ(50px);
}
.face-d {
  transform: rotateX(-90deg) translateZ(50px);
}

.cubie-sticker {
  background-image: url(./stickers.svg);
  background-size: 600px 100px;
}
.sticker-u {
  background-position-x: 0;
}
.sticker-f {
  background-position-x: -100px;
}
.sticker-r {
  background-position-x: -200px;
}
.sticker-l {
  background-position-x: -300px;
}
.sticker-b {
  background-position-x: -400px;
}
.sticker-d {
  background-position-x: -500px;
}

.turn-u1,
.turn-d3 {
  transform: rotateY(-90deg);
}
.turn-f1,
.turn-b3 {
  transform: rotateZ(90deg);
}
.turn-r1,
.turn-l3 {
  transform: rotateX(90deg);
}
.turn-l1,
.turn-r3 {
  transform: rotateX(-90deg);
}
.turn-b1,
.turn-f3 {
  transform: rotateZ(-90deg);
}
.turn-d1,
.turn-u3 {
  transform: rotateY(90deg);
}
.turn-u2 {
  transform: rotateY(-180deg);
}
.turn-f2 {
  transform: rotateZ(180deg);
}
.turn-r2 {
  transform: rotateX(180deg);
}
.turn-l2 {
  transform: rotateX(-180deg);
}
.turn-b2 {
  transform: rotateZ(-180deg);
}
.turn-d2 {
  transform: rotateY(180deg);
}

@keyframes rotate {
  from {
    transform: rotateX(-30deg) rotateY(0deg);
  }
  to {
    transform: rotateX(330deg) rotateY(1800deg);
  }
}
/* .cube {
	-webkit-animation: rotate 120s infinite linear;
	animation: rotate 120s infinite linear;
} */