@-webkit-keyframes ball {
  0% {
    top: 50%;
    left: 0%;
  }
  20% {
    top: 25%;
    left: 25%;
  }
  30% {
    top: 50%;
    left: 50%;
  }m
  40% {
    top: 75%;
    left: 75%;
  }
  50% {
    top: 50%;
    left: 100%;
  }
  60% {
    top: 75%;
    left: 75%;
  }
  70% {
    top: 50%;
    left: 50%;
  }
  80% {
    top: 25%;
    left: 25%;
  }
  100% {
    top: 50%;
    left: 0%;
  }
}

@keyframes ball {
  0% {
    top: 50%;
    left: 0%;
  }
  20% {
    top: 25%;
    left: 25%;
  }
  30% {
    top: 50%;
    left: 50%;
  }
  40% {
    top: 75%;
    left: 75%;
  }
  50% {
    top: 50%;
    left: 100%;
  }
  60% {
    top: 75%;
    left: 75%;
  }
  70% {
    top: 50%;
    left: 50%;
  }
  80% {
    top: 25%;
    left: 25%;
  }
  100% {
    top: 50%;
    left: 0%;
  }
}

@-webkit-keyframes raketes {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  20% {
    -webkit-transform: translateY(10%);
    transform: translateY(10%);
  }
  25% {
    -webkit-transform: translateY(-30%);
    transform: translateY(-30%);
  }
  50% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  60% {
    -webkit-transform: translateY(25%);
    transform: translateY(25%);
  }
  80% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes raketes {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  20% {
    -webkit-transform: translateY(10%);
    transform: translateY(10%);
  }
  25% {
    -webkit-transform: translateY(-30%);
    transform: translateY(-30%);
  }
  50% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  60% {
    -webkit-transform: translateY(25%);
    transform: translateY(25%);
  }
  80% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@-webkit-keyframes glitch {
  0% {
    color: white;
    -webkit-transform: translateX(0) translateY(0%);
    transform: translateX(0) translateY(0%);
  }
  25% {
    color: #3498db;
    -webkit-transform: translateX(1px) translateY(1px);
    transform: translateX(1px) translateY(1px);
  }
  40% {
    color: #e74c3c;
    -webkit-transform: translateX(-2px) translateY(-2px);
    transform: translateX(-2px) translateY(-2px);
  }
  50% {
    color: #cccccc;
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }
  80% {
    color: #3498db;
    -webkit-transform: translateX(2px) translateY(2px);
    transform: translateX(2px) translateY(2px);
  }
  90% {
    color: #e74c3c;
    -webkit-transform: translateX(-1px) translateY(-1px);
    transform: translateX(-1px) translateY(-1px);
  }
  100% {
    color: white;
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }
}

@keyframes glitch {
  0% {
    color: white;
    -webkit-transform: translateX(0) translateY(0%);
    transform: translateX(0) translateY(0%);
  }
  25% {
    color: #3498db;
    -webkit-transform: translateX(1px) translateY(1px);
    transform: translateX(1px) translateY(1px);
  }
  40% {
    color: #e74c3c;
    -webkit-transform: translateX(-2px) translateY(-2px);
    transform: translateX(-2px) translateY(-2px);
  }
  50% {
    color: #cccccc;
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }
  80% {
    color: #3498db;
    -webkit-transform: translateX(2px) translateY(2px);
    transform: translateX(2px) translateY(2px);
  }
  90% {
    color: #e74c3c;
    -webkit-transform: translateX(-1px) translateY(-1px);
    transform: translateX(-1px) translateY(-1px);
  }
  100% {
    color: white;
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }
}

@-webkit-keyframes changeColor {
  0% {
    color: #cccccc;
  }
  25% {
    color: #2ecc71;
  }
  50% {
    color: #e74c3c;
  }
  75% {
    color: #3498db;
  }
  100% {
    color: #cccccc;
  }
}

@keyframes changeColor {
  0% {
    color: #cccccc;
  }
  25% {
    color: #2ecc71;
  }
  50% {
    color: #e74c3c;
  }
  75% {
    color: #3498db;
  }
  100% {
    color: #cccccc;
  }
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Press Start 2P', cursive;
  background-color: #212121;
}

h1, h2, p, span, textarea {
  font-family: 'Press Start 2P', cursive;
}

a:link {
  color: lime;
  text-decoration: none;
}

/* visited link */
a:visited {
  color: lime;
  text-decoration: none;
}

/* mouse over link */
a:hover {
  color: yellow;
  text-decoration: none;
}

/* selected link */
a:active {
  color: blue;
  text-decoration: none;
}

.console {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 10px;
  box-sizing: border-box;
}

.console .output {
  width: 100%;
  font-size: 12px;
  color: #cccccc;
}

.console .output span {
  line-height: 20px;
}

.console .output span.grey {
  color: #cccccc;
}

.console .output span.green {
  color: #2ecc71;
}

.console .output span.red {
  color: #e74c3c;
}

.console .output span.blue {
  color: #3498db;
}

.console .output span.lime {
  color: #00FF00;
}

.console .output pre {
  font-size: 9px;
  -webkit-animation: glitch 14s linear infinite;
  animation: glitch 14s linear infinite;
  -webkit-animation-play-state: running;
  animation-play-state: running;
}

.console .output pre:hover {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}

.console .action {
  width: 100%;
  font-size: 14px;
  margin-top: 20px;
}

.console .action span {
  display: inline-block;
  width: 60px;
  float: left;
  color: white;
}

.console .action textarea {
  width: calc(100% - 65px);
  float: left;
  background: none;
  border: none;
  color: white;
  padding: 0;
  margin: 0;
}

.console .action textarea:focus {
  outline: none;
}

span.seperator {
  font-size: 12px;
  -webkit-animation: changeColor 10s ease-in-out infinite;
  animation: changeColor 10s ease-in-out infinite;
}

.pong {
  display: inline-block;
  position: relative;
  width: 300px;
  height: 50px;
}

.pong:after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  background-color: white;
  -webkit-animation: ball 6s linear infinite;
  animation: ball 6s linear infinite;
}

.pong b {
  display: inline-block;
  position: absolute;
  top: 50%;
  margin-top: -7px;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.pong b.left {
  left: -10px;
  -webkit-animation: raketes 5s ease-in-out infinite;
  animation: raketes 5s ease-in-out infinite;
}

.pong b.right {
  right: -10px;
  -webkit-animation: raketes 5s ease-in-out 0.5s infinite;
  animation: raketes 5s ease-in-out 0.5s infinite;
}

#loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
    display: none; /* Hidden by default */
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -60px 0 0 -60px; /* Position the loader */
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}