html, body, .stage {
  height: 100%;
  overflow: hidden; }

.stage {
  position: relative;
  perspective: 3000px;
  -webkit-user-select: none; }
  .stage .square {
    position: absolute;
    left: 50%;
    bottom: 100px;
    width: 800px;
    height: 120px;
    transform: translate3d(-50%, 0, 0) rotateX(60deg) rotateY(0deg) rotateZ(12deg);
    transform-style: preserve-3d;
    transition: all 2s; }
    .stage .square table {
      border: 1px solid #1EEDFF; }
      .stage .square table td {
        width: 40px;
        height: 40px;
        font-size: 20px;
        text-align: center; }
      .stage .square table tr:nth-child(3) td:nth-child(1):before {
        content: "0"; }
      .stage .square table tr:nth-child(3) td:nth-child(2):before {
        content: "1"; }
      .stage .square table tr:nth-child(3) td:nth-child(3):before {
        content: "2"; }
      .stage .square table tr:nth-child(3) td:nth-child(4):before {
        content: "3"; }
      .stage .square table tr:nth-child(3) td:nth-child(5):before {
        content: "4"; }
      .stage .square table tr:nth-child(3) td:nth-child(6):before {
        content: "5"; }
      .stage .square table tr:nth-child(3) td:nth-child(7):before {
        content: "6"; }
      .stage .square table tr:nth-child(3) td:nth-child(8):before {
        content: "7"; }
      .stage .square table tr:nth-child(3) td:nth-child(9):before {
        content: "8"; }
      .stage .square table tr:nth-child(3) td:nth-child(10):before {
        content: "9"; }
      .stage .square table tr:nth-child(3) td:nth-child(11):before {
        content: "10"; }
      .stage .square table tr:nth-child(3) td:nth-child(12):before {
        content: "11"; }
      .stage .square table tr:nth-child(3) td:nth-child(13):before {
        content: "12"; }
      .stage .square table tr:nth-child(3) td:nth-child(14):before {
        content: "13"; }
      .stage .square table tr:nth-child(3) td:nth-child(15):before {
        content: "14"; }
      .stage .square table tr:nth-child(3) td:nth-child(16):before {
        content: "15"; }
      .stage .square table tr:nth-child(3) td:nth-child(17):before {
        content: "16"; }
      .stage .square table tr:nth-child(3) td:nth-child(18):before {
        content: "17"; }
      .stage .square table tr:nth-child(3) td:nth-child(19):before {
        content: "18"; }
      .stage .square table tr:nth-child(3) td:nth-child(20):before {
        content: "19"; }
  .stage .cubes {
    position: absolute;
    left: 0;
    top: 0;
    transform-style: preserve-3d;
    width: 40px;
    height: 40px;
    transition: all 0.3s; }
    .stage .cubes.active .face {
      box-shadow: 0 0 36px #1EEDFF; }
    .stage .cubes.complete .up {
      background: radial-gradient(ellipse at center, #444 0%, #1EEDFF 90%); }
  .stage .face {
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 40px;
    outline: 1px solid #1EEDFF;
    background: radial-gradient(ellipse at center, #444 0%, #000000 90%);
    transition: all 0.5s;
    list-style: none;
    opacity: 0.5; }
  .stage .front {
    transform: translate3d(0px, 50%, 0px) rotateX(-90deg); }
  .stage .back {
    transform: translate3d(0px, -50%, 0px) rotateX(90deg) rotateZ(180deg); }
  .stage .left {
    transform: translate3d(-50%, 0px, 0px) rotateY(-90deg) rotateZ(90deg); }
  .stage .right {
    transform: translate3d(50%, 0px, 0px) rotateY(90deg) rotateZ(-90deg); }
  .stage .up {
    transform: translate3d(0px, 0px, 20px); }
  .stage .bottom {
    transform: translate3d(0px, 0px, -20px) rotateY(180deg); }
  .stage .left, .stage .right, .stage .front, .stage .back {
    transform-origin: 0 40px; }

.sort-form {
  margin-top: 40px; }
  .sort-form .submit {
    margin-right: 30px;
    font-size: 20px; }