/* CLEAR CSS */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
/* remember to define focus styles! */
:focus {outline: 0;}
/* remember to highlight inserts somehow! */
ins {text-decoration: none;}
del {text-decoration: line-through;}
/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: collapse; border-spacing: 0;}
body {
  background: url('cubes.png');
  font-family: Arial;
}
#cube3d {
  position: absolute;
  z-index: 10;
  font-weight: 700;
  font-size: 400%;
  margin: -2em 0 0 -2em;
  padding: 1em;
  width: 2em;
  height: 2em;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
  transition: transform .1s linear;
}

.side {
  position: absolute;
  z-index: 10;
  font-size: 100%;
  width: 2em;
  height: 2em;
  border: 0.02em solid #014;
  line-height: 2em;
  border-radius:0.1em;
  color: #014;
  text-shadow: 0px 0px 0.1em white;
  transition: all .1s linear;
}
.sside {
  padding: 0 .3em;
  border: 0.05em solid #014;
  border-radius:0.2em;
  text-shadow: 0px 0px 0.1em white;  
}

#side_-z {
  transform: translateZ(-1.1em);
}
#side_z {
  transform: translateZ(1.1em);
}
#side_-y {
  transform: translateY(-1.1em) rotateX(90deg);
}
#side_y {
  transform: translateY(1.1em) rotateX(90deg);
}
#side_-x {
  transform: translateX(-1.1em) rotateY(90deg);
}
#side_x {
  transform: translateX(1.1em) rotateY(90deg);
}
.side > span {
  position: absolute;
  z-index: 10;
  width: 100%;
  height: 100%;
  text-align: center;
  transform-style: preserve-3d;
  transition: all .1s linear;
}

#info {
  position: absolute;
  z-index: 100;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
  color: #014;
  display: none;
  opacity: 0;
  transition: all .1s linear;
  transform: translateZ(10em);
}
  #info > .content {
    position: relative;
    top: 50%;
    width: 17.5em;
    height: 17.5em;
    margin: -9em auto;
    text-align: center;
    transition: all .1s linear;
    background-color: rgba(255,255,255,.5);
    box-shadow: 0 0 1em white;
    padding: 1em 1em;
    border-radius: 2em;
    vertical-align: middle;
  }
  #info h1 {
    margin: 0;
    font-size: 500%;
    text-shadow: 0 0 .3em #014;
  }
  #info_p {line-height: 1.7em;}
.key {
  border: 1px solid;
  border-radius: 0.3em;
  padding: 0 0.3em 0.1em;
  box-shadow: 0 0 0.1em #014;
  background: rgba(0,10,40,0.1);
}
.touch {
  border: 1px solid;
  border-radius: 100%;
  padding: 0.1em 0.3em;
  box-shadow: 0 0 0.1em #014;
  background: rgba(0,10,40,0.1);
}
#logo {
  font-style: italic;
  font-weight: 700;
  font-size: 400%;
  position: absolute;
  color: white;
  text-shadow: 0 0 .3em #014;
  top: .3em;
  left: .3em;
}
#score {
  font-weight: 700;
  font-size: 400%;
  position: absolute;
  color: white;
  text-shadow: 0 0 .3em #014;
  bottom: .3em;
  left: .3em;
  transition: all .5s linear;
}

.tutorial {
  position: absolute;
  z-index: 100;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: none;
  opacity: 0;
  transition: opacity .5s linear;
}
.tutorial .content {
    margin: 0;
    position: absolute;
    bottom: 0em;
    padding: 1em 0;
    width: 100%;
    background-color: rgba(255, 255, 125, 0.5);
    box-shadow: 0 0 1em rgb(255, 255, 125);
    line-height: 2em;
    text-align: center;
}
.tutorial  .helper {
  position: absolute;
  opacity: .6;
  bottom: 50%;
  left: 50%;
}
#tutorial-1 .helper {
  margin-left: -32px;
  margin-bottom: -57px;
}
#tutorial-2 .helper {
  margin-left: -57px;
  margin-bottom: -32px;
}
#tutorial-3 .helper {
  margin-left: -32px;
  margin-bottom: -57px;
}
#tutorial-4 .helper {
  left: 4em;
  bottom: 0;
}