body {
  padding: 0;
  margin: 0;
  font-family: helvetica, arial;
  font-size: 62.5%;
/*  font-size: 1em;*/
}

body {
  cursor: move;
}

#bg {
  background-image: 
    -webkit-gradient(
      radial,
      center center,
      0,
      center center,
      400,
      color-stop(0, #666),
      color-stop(0.7, #222),
      color-stop(1, #000)
    );
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.info {
  color: #fff;
  font-weight: bold;
  text-shadow: #000 1px 1px 1px;
  width: 400px;
  font-size: 36px;
  line-height: 48px;
  margin: 25% auto 0;
}

*::selection {
  background-color: transparent;
}

.red {
  background: rgba(255, 0, 0, 0.7);
}

.blue {
  background: rgba(0, 0, 255, 0.7);
}

.green {
  background: rgba(0, 255, 0, 0.7);
}

.white {
  background: rgba(255, 255, 255, 0.7);
}

.pink {
  background: rgba(255, 0, 255, 0.7);
}

.yellow {
  background: rgba(255, 255, 0, 0.7);
}

#canvas {
  margin-top: 7em;
  -webkit-perspective: 800;
  -webkit-perspective-origin: 50% 20em;
}


.block {
  position: relative;
  height: 5.6em;
  width:  5.6em;
  text-align: center;
  border: 0.1em solid rgba(0, 0, 0, 0.1);
  float: left;
  padding: 0.5em;
  margin: 0.2em;
  -webkit-border-radius: 5px;
}

.block.selected {
  border: 0.5em dotted rgba(0, 0, 0, 0.5); /*rgba(81, 165, 238, 0.5);*/
  padding: 0.1em;
}

.block:nth-child(3n+1) {
  clear: left;
}

#rubiks {
  position: relative;
  margin: 20% auto;
  height: 21.6em;
  width: 21.6em;
  -webkit-transition: -webkit-transform 100ms ease-out;
  -webkit-transform-style: preserve-3d;
  -webkit-transform: rotateX(15deg) rotateY(15deg);
}

.face {
  -webkit-backface-visibility: hidden;
  position: absolute;
  background: rgba(0, 0, 0, 0.754);
}

.backface .face {
  -webkit-backface-visibility: visible;
}

#rubiks .face1  {
  -webkit-transform: rotateX(90deg) translateZ(10.8em);
}

#rubiks .face2 { /* front */
  -webkit-transform: translateZ(10.8em);
}

#rubiks .face3 {
  -webkit-transform: rotateY(90deg) translateZ(10.8em);
}

#rubiks .face4 { /* back face */
  -webkit-transform: rotateY(180deg) translateZ(10.8em);
}

#rubiks .face5 {
  -webkit-transform: rotateY(-90deg) translateZ(10.8em);
}

#rubiks .face6 { 
  -webkit-transform: rotateX(-90deg) translateZ(10.8em) rotate(180deg);
}