@import url(http://fonts.googleapis.com/css?family=Inconsolata|Sacramento);
/* COLORS */
/* Typography */
* {
  font-family: "Inconsolata", Monaco, Courier, monospace !important; }

body {
  /*font-size: 1.2em;*/
  font-size: 18px;
  color: #8adbdb;
  text-shadow: 0 0 2px #009eff;
  word-wrap: break-word;
  background-color: #17181c; 
}

.machine {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 100vh;
  max-height: 100vh;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column; }

.footer {
  padding: .6em;
  font-family: "Sacramento", cursive !important;
  font-size: 1.2em;
  color: #17181c;
  text-align: center;
  text-shadow: none;
  background-color: #17181c;
  -webkit-box-flex: 0;
  -webkit-flex: none;
      -ms-flex: none;
          flex: none; }

hr {
  border: 0;
  border-bottom: 1px dotted #e3e4e8; }

/* UI-Controls */
/* COLORS */
/* Typography */
.controls {
  margin: 10px;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 6em;
      -ms-flex: 0 0 6em;
          flex: 0 0 6em; }
  .controls a.button, .controls button.button {
    display: block;
    padding: 6px;
    margin-bottom: 5px;
    color: #e3e4e8;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 0 2px #009eff;
    vertical-align: baseline;
    cursor: pointer;
    background-color: transparent;
    border: 2px solid #97D6DF; }
    .controls a.button:active, .controls button.button:active {
      color: #010101;
      background-color: #f5f5f5; }

/* UI-Preload */
/* COLORS */
/* Typography */
#frame {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  visibility: hidden;
  border: 0.8em solid #e3e4e8;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.7);
  opacity: 1.0;
  -webkit-animation: crt-on .4s 0s 1;
          animation: crt-on .4s 0s 1;
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1; }

/* UI-Preload */
#preload {
  padding-top: 25%;
  margin: 10px;
  font-size: 20px;
  text-align: center;
  opacity: 1;
  -webkit-animation: blink 1s infinite;
          animation: blink 1s infinite; }

/* UI-CRT */
@-webkit-keyframes crt-on {
  0% {
    box-shadow: inset 0 9999px 0 white;
    opacity: .0;
    -webkit-transform: scale(0.5, 0.005);
            transform: scale(0.5, 0.005); }
  40% {
    opacity: 1.0; }
  70% {
    box-shadow: inset 0 9999px 0 white;
    -webkit-transform: scale(1, 0.005);
            transform: scale(1, 0.005); }
  100% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1); } }
@keyframes crt-on {
  0% {
    box-shadow: inset 0 9999px 0 white;
    opacity: .0;
    -webkit-transform: scale(0.5, 0.005);
            transform: scale(0.5, 0.005); }
  40% {
    opacity: 1.0; }
  70% {
    box-shadow: inset 0 9999px 0 white;
    -webkit-transform: scale(1, 0.005);
            transform: scale(1, 0.005); }
  100% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1); } }

@-webkit-keyframes crt-off {
  0% {
    opacity: 1.0;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1); }
  40% {
    box-shadow: inset 0 9999px 0 white;
    -webkit-transform: scale(1, 0.005);
            transform: scale(1, 0.005); }
  70% {
    opacity: 1.0; }
  100% {
    box-shadow: inset 0 9999px 0 white;
    opacity: .0;
    -webkit-transform: scale(0.5, 0.005);
            transform: scale(0.5, 0.005); } }

@keyframes crt-off {
  0% {
    opacity: 1.0;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1); }
  40% {
    box-shadow: inset 0 9999px 0 white;
    -webkit-transform: scale(1, 0.005);
            transform: scale(1, 0.005); }
  70% {
    opacity: 1.0; }
  100% {
    box-shadow: inset 0 9999px 0 white;
    opacity: .0;
    -webkit-transform: scale(0.5, 0.005);
            transform: scale(0.5, 0.005); } }

/* UI-Screen */
/* COLORS */
/* Typography */
@-webkit-keyframes flicker {
  0% {
    opacity: 0.4939; }
  5% {
    opacity: 0.0201; }
  10% {
    opacity: 0.88711; }
  15% {
    opacity: 0.97212; }
  20% {
    opacity: 0.28015; }
  25% {
    opacity: 0.5066; }
  30% {
    opacity: 0.45207; }
  35% {
    opacity: 0.7705; }
  40% {
    opacity: 0.15682; }
  45% {
    opacity: 0.28201; }
  50% {
    opacity: 0.26277; }
  55% {
    opacity: 0.08846; }
  60% {
    opacity: 0.00493; }
  65% {
    opacity: 0.02701; }
  70% {
    opacity: 0.39298; }
  75% {
    opacity: 0.67803; }
  80% {
    opacity: 0.31553; }
  85% {
    opacity: 0.89155; }
  90% {
    opacity: 0.44275; }
  95% {
    opacity: 0.90599; }
  100% {
    opacity: 0.66393; } }
@keyframes flicker {
  0% {
    opacity: 0.4939; }
  5% {
    opacity: 0.0201; }
  10% {
    opacity: 0.88711; }
  15% {
    opacity: 0.97212; }
  20% {
    opacity: 0.28015; }
  25% {
    opacity: 0.5066; }
  30% {
    opacity: 0.45207; }
  35% {
    opacity: 0.7705; }
  40% {
    opacity: 0.15682; }
  45% {
    opacity: 0.28201; }
  50% {
    opacity: 0.26277; }
  55% {
    opacity: 0.08846; }
  60% {
    opacity: 0.00493; }
  65% {
    opacity: 0.02701; }
  70% {
    opacity: 0.39298; }
  75% {
    opacity: 0.67803; }
  80% {
    opacity: 0.31553; }
  85% {
    opacity: 0.89155; }
  90% {
    opacity: 0.44275; }
  95% {
    opacity: 0.90599; }
  100% {
    opacity: 0.66393; } }

#screen {
  padding: 3px 13px;
  margin: 10px;
  margin-right: 0;
  overflow-y: scroll;
  border: 2px solid #e3e4e8;
  box-shadow: inset 0 0 33px rgba(0, 0, 0, 0.8);
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto; }
  #screen::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: block;
    pointer-events: none;
    content: " ";
    background: rgba(18, 16, 16, 0.1);
    opacity: 1; }

#switch.switch-off {
  border-color: #888;
  color: #888;
  text-shadow: none; }
  #switch.switch-off::after {
    content: "ON"; }

#switch.switch-on {
  border-color: #f5f5f5;
  color: #f5f5f5;
  text-shadow: none; }
  #switch.switch-on::after {
    content: "OFF"; }

#switch:checked ~ #frame::after {
  -webkit-animation: flicker 0.15s infinite;
          animation: flicker 0.15s infinite; }

@-webkit-keyframes turn-on {
  0% {
    -webkit-transform: scale(1, 0.8) translate3d(0, 0, 0);
            transform: scale(1, 0.8) translate3d(0, 0, 0);
    -webkit-filter: brightness(30);
    filter: brightness(30);
    opacity: 1; }
  3.5% {
    -webkit-transform: scale(1, 0.8) translate3d(0, 100%, 0);
            transform: scale(1, 0.8) translate3d(0, 100%, 0); }
  3.6% {
    -webkit-transform: scale(1, 0.8) translate3d(0, -100%, 0);
            transform: scale(1, 0.8) translate3d(0, -100%, 0);
    opacity: 1; }
  9% {
    -webkit-transform: scale(1.3, 0.6) translate3d(0, 100%, 0);
            transform: scale(1.3, 0.6) translate3d(0, 100%, 0);
    -webkit-filter: brightness(30);
    filter: brightness(30);
    opacity: 0; }
  11% {
    -webkit-transform: scale(1, 1) translate3d(0, 0, 0);
            transform: scale(1, 1) translate3d(0, 0, 0);
    -webkit-filter: contrast(0) brightness(0);
    filter: contrast(0) brightness(0);
    opacity: 0; }
  100% {
    -webkit-transform: scale(1, 1) translate3d(0, 0, 0);
            transform: scale(1, 1) translate3d(0, 0, 0);
    -webkit-filter: contrast(1) brightness(1.2) saturate(1.3);
    filter: contrast(1) brightness(1.2) saturate(1.3);
    opacity: 1; } }

@keyframes turn-on {
  0% {
    -webkit-transform: scale(1, 0.8) translate3d(0, 0, 0);
            transform: scale(1, 0.8) translate3d(0, 0, 0);
    -webkit-filter: brightness(30);
    filter: brightness(30);
    opacity: 1; }
  3.5% {
    -webkit-transform: scale(1, 0.8) translate3d(0, 100%, 0);
            transform: scale(1, 0.8) translate3d(0, 100%, 0); }
  3.6% {
    -webkit-transform: scale(1, 0.8) translate3d(0, -100%, 0);
            transform: scale(1, 0.8) translate3d(0, -100%, 0);
    opacity: 1; }
  9% {
    -webkit-transform: scale(1.3, 0.6) translate3d(0, 100%, 0);
            transform: scale(1.3, 0.6) translate3d(0, 100%, 0);
    -webkit-filter: brightness(30);
    filter: brightness(30);
    opacity: 0; }
  11% {
    -webkit-transform: scale(1, 1) translate3d(0, 0, 0);
            transform: scale(1, 1) translate3d(0, 0, 0);
    -webkit-filter: contrast(0) brightness(0);
    filter: contrast(0) brightness(0);
    opacity: 0; }
  100% {
    -webkit-transform: scale(1, 1) translate3d(0, 0, 0);
            transform: scale(1, 1) translate3d(0, 0, 0);
    -webkit-filter: contrast(1) brightness(1.2) saturate(1.3);
    filter: contrast(1) brightness(1.2) saturate(1.3);
    opacity: 1; } }

@-webkit-keyframes turn-off {
  0% {
    -webkit-transform: scale(1, 1.3) translate3d(0, 0, 0);
            transform: scale(1, 1.3) translate3d(0, 0, 0);
    -webkit-filter: brightness(1);
    filter: brightness(1);
    opacity: 1; }
  60% {
    -webkit-transform: scale(1.3, 0.001) translate3d(0, 0, 0);
            transform: scale(1.3, 0.001) translate3d(0, 0, 0);
    -webkit-filter: brightness(10);
    filter: brightness(10); }
  100% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
            animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: scale(0, 0.0001) translate3d(0, 0, 0);
            transform: scale(0, 0.0001) translate3d(0, 0, 0);
    -webkit-filter: brightness(50);
    filter: brightness(50); } }

@keyframes turn-off {
  0% {
    -webkit-transform: scale(1, 1.3) translate3d(0, 0, 0);
            transform: scale(1, 1.3) translate3d(0, 0, 0);
    -webkit-filter: brightness(1);
    filter: brightness(1);
    opacity: 1; }
  60% {
    -webkit-transform: scale(1.3, 0.001) translate3d(0, 0, 0);
            transform: scale(1.3, 0.001) translate3d(0, 0, 0);
    -webkit-filter: brightness(10);
    filter: brightness(10); }
  100% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
            animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: scale(0, 0.0001) translate3d(0, 0, 0);
            transform: scale(0, 0.0001) translate3d(0, 0, 0);
    -webkit-filter: brightness(50);
    filter: brightness(50); } }

.off {
  -webkit-animation: turn-off 0.55s cubic-bezier(0.23, 1, 0.32, 1);
          animation: turn-off 0.55s cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards; }

.on {
  -webkit-animation: turn-on 4s linear;
          animation: turn-on 4s linear;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards; }

/* UI-Text */
/* COLORS */
/* Typography */
.center {
  text-align: center; }

.danger {
  color: #ff3333;
  text-shadow: 0 0 2px red; }

.warning {
  color: #ffe073;
  text-shadow: 0 0 1px #ffe073; }

.ok {
  color: #5bff00;
  text-shadow: 0 0 1px #00ec72; }

.separator {
  width: 100%;
  margin: 10px auto;
  font-size: x-small;
  text-align: center;
  text-shadow: none; }
  .separator::before {
    content: "--"; }
  .separator::after {
    content: "--"; }

/* UI-Cursor */
/* COLORS */
/* Typography */
.typed-cursor {
  width: 8px;
  color: #98dfdf;
  text-shadow: none;
  background-color: #98dfdf;
  box-shadow: 0 0 3px #008ee6;
  opacity: 1;
  -webkit-animation: blink .8s infinite;
          animation: blink .8s infinite; }

@keyframes blink {
  0% {
    opacity: 1; }
  50% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-webkit-keyframes blink {
  0% {
    opacity: 1; }
  50% {
    opacity: 0; }
  100% {
    opacity: 1; } }

.blink {
  -webkit-animation: blink .2s infinite;
  animation: blink .2s infinite; }

.interlace {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: url(../images/interlace.png) top left repeat, rgba(255, 255, 255, 0.1);
  opacity: .4; }

/*BROWSER CONFIG*/
@-ms-viewport {
  width: device-width; }

::-moz-selection {
  color: #f5f5f5;
  background: #ff0065; }

::selection {
  color: #f5f5f5;
  background: #ff0065; }