/* ERNO / Cuber cube styles (from Chrome Cube Lab / onlinecube.com) */

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

.faceLabel {
  display: none;
  position: absolute;
  font-size: 0.5em;
  text-align: center;
  font-family: inherit;
  text-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
  color: #fff;
}

.cube .cubelet {
  box-sizing: border-box;
  position: absolute;
  width: 1em;
  height: 1em;
}

.cube .face {
  position: absolute;
  width: 1em;
  height: 1em;
  background-color: #111;
  text-align: center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  padding: 0.05em;
  box-sizing: border-box;
}

.cube .face.faceIntroverted {
  background-color: #111;
}

.cube .face.faceTransparent {
  background-color: transparent;
}

.cube .face > .wireframe {
  display: none;
}

.cube .sticker {
  width: 100%;
  height: 100%;
  background-color: #f0f;
  border-radius: 0.1em;
  text-align: center;
  -webkit-transform: translateZ(0.6px);
  transform: translateZ(0.6px);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.cube .sticker.red {
  background: #c41e3a;
}
.cube .sticker.white {
  background: #f7f7f7;
}
.cube .sticker.blue {
  background: #0b5fbf;
}
.cube .sticker.green {
  background: #0b9e4a;
}
.cube .sticker.orange {
  background: #ff6a00;
}
.cube .sticker.yellow {
  background: #ffd500;
}

.cube .face > .id,
.cube .face > .text {
  display: none;
}

#erno-container {
  width: 100%;
  height: 100%;
  min-height: 0;
  flex: 1;
  position: relative;
  touch-action: none;
}

#erno-container .cube {
  cursor: grab;
}