html {
  height: 100%;
}
body {
  overflow: hidden;
  color: rgba(248, 233, 214, 1);
  font-family: "Lucida Sans Typewriter", "Lucida Console", Monaco, "Bitstream Vera Sans Mono", monospace;
  font-size: 110px;
  .background-image( ~'radial-gradient(50% 50%, circle, rgb(103, 114, 140) 0%, rgb(69, 76, 94) 36%, rgb(34, 37, 46) 90%)');
  height: 100%;
  margin: 0px;
  padding: 0px;
  main {
    height: 100%;
  background-size: 18px 18px;
  .background-image( ~"linear-gradient(-45deg, transparent 0%, transparent 40%, rgba(0, 0, 0, .2) 40%, rgba(0, 0, 0, .2) 50%, transparent 50%, transparent 90%, rgba(0, 0, 0, .2) 90%);");
    .num-anim {
      display: block;
      position: absolute;
      top: 0px;
      left: 0px;
      height: 130px;
      width: 89px;
      .top-half-num, .bottom-half-num {
        .background-image( ~"linear-gradient(180deg, rgba(68, 75, 93, 1), rgba(46, 50, 62, 1) 100%)");
        text-align: center;
        overflow: hidden;
        padding-top: 0px;
      }
      .top-half-num {
        height: 50%;
      }
      .bottom-half-num {
        margin-top: 0px;
        height: 50%;
        margin-top: 65px;
        .dropper {
          margin-top: -68px;
        }
        background-color: rgba(46, 50, 62, 1);
        background-image: none;
      }
      &.bottom-anim {
        left: 0px;
        top: 5px;
        .transform(~"perspective(80px) rotateX(90deg) rotateY(0deg);");
        &.down {
          .transform(~"perspective(80px) rotateX(0deg) rotateY(0deg)");
          .transition(0.25s);
          .transition-delay(0.25s);
        }
      }
      &.top-anim {
        .transform(~"perspective(80px) rotateX(0deg) rotateY(0deg);");
      
        &.up {
          .transform(~"perspective(80px) rotateX(-90deg) rotateY(0deg)");
          .transition(0.25s);
        }
      }
    }
    canvas {
      height: 100%;
      width: 100%;
      background-color: transparent;
    }
    #clock {
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -75px 0 0 -372.5px;
      height: 150px;
      width: 745px;
      .time-container {
        float: left;
        width: 220px;
        height: 150px;
        margin: 0 0 0 20px;
        border: 1px solid #000;
        .border-radius(10px);
        background: rgba(24, 24, 40, .50);
        .box-shadow(~"0 2px 0px rgba(255, 255, 255, .25), inset 0 2px 0px rgba(0, 0, 0, .25)");
         .num {
          position: absolute;
          top: 0px;
          left: 00px;
          display: inline-block;
          z-index: 1;
          height: 50%;
          overflow: hidden;
          width: 100%;
          .box-shadow(~"0 2px 0px rgba(0, 0, 0, .25), inset 0 2px 0px rgba(255, 255, 255, .25)");
          &.bottom {
            top: 53%;
            height: 46%;
            .bottom-container {
              margin-top: -76%;
            }
          }
         }
         .fade {
          position: absolute;
          top: -105px;
          left: -41px;
          width: 100%;
          height: 200%;
          background-color: transparent;
          .background-image( ~"linear-gradient(0deg, transparent 35%, rgba(255, 255, 255, .2), rgba(255, 255, 255, .5))");
          .rotate(45deg);
          z-index: 2;
         }
        .digit {
          position: relative;
          float: left;
          width: 88px;
          height: 130px;
          margin: 11px 0 0 15px;
          .border-radius(5px);
          text-align: center;
          text-shadow: rgba(255,255,255, 1) 0px -3px 0px, rgba(0,0,0,1) 0px 3px 0px;
          background-color: rgba(53, 58, 72, 1);
          .box-shadow(~"0 2px 0px rgba(0, 0, 0, .25), inset 0 2px 0px rgba(255, 255, 255, .25), 2px 2px 3px rgba(0, 0, 0, 1), -2px -2px 3px rgba(0, 0, 0, 1), 2px -2px 3px rgba(0, 0, 0, 1), -2px 2px 3px rgba(0, 0, 0, 1)");
          .background-image( ~"linear-gradient(180deg, rgba(68, 75, 93, 1), rgba(46, 50, 62, 1) 100%)");
          overflow: hidden;
          &::after {
            content: " ";
            border: 2px solid rgba(0, 0, 0, .15);
            width: 80px;
            margin-top: 3px;
            height: 121px;
            .border-radius(5px);
            display: inline-block;
          }
          .ring {
            position: absolute;
            top: 58px;
            left: 5px;
            height: 20px;
            width: 7px;
            background-color: rgba(125, 125, 125, 1);
            .box-shadow(~"0 2px 0px rgba(0, 0, 0, .25), inset 0 2px 0px rgba(255, 255, 255, .25), 2px 2px 1px rgba(0, 0, 0, .5), -2px -2px 1px rgba(0, 0, 0, .5), 2px -2px 1px rgba(0, 0, 0, .5), -2px 2px 1px rgba(0, 0, 0, .5)");
          .background-image( ~"linear-gradient(180deg, rgba(205, 205, 205, 1), rgba(46, 50, 62, 1) 100%)");
            z-index: 3;
            &.ring-right {
              left: 76px;
            }
            .border-radius(8px);
          }
        }
      }
    }
  }
}
.swapper {
  position: relative;
  z-index: 2;
}