@-webkit-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%;
  }
}
@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% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(10%);
  }
  25% {
    transform: translateY(-30%);
  }
  50% {
    transform: translateY(0);
  }
  60% {
    transform: translateY(25%);
  }
  80% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes raketes {
  0% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(10%);
  }
  25% {
    transform: translateY(-30%);
  }
  50% {
    transform: translateY(0);
  }
  60% {
    transform: translateY(25%);
  }
  80% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}
@-webkit-keyframes glitch {
  0% {
    color: white;
    transform: translateX(0) translateY(0%);
  }
  25% {
    color: #3498db;
    transform: translateX(1px) translateY(1px);
  }
  40% {
    color: #e74c3c;
    transform: translateX(-2px) translateY(-2px);
  }
  50% {
    color: #cccccc;
    transform: translateX(0) translateY(0);
  }
  80% {
    color: #3498db;
    transform: translateX(2px) translateY(2px);
  }
  90% {
    color: #e74c3c;
    transform: translateX(-1px) translateY(-1px);
  }
  100% {
    color: white;
    transform: translateX(0) translateY(0);
  }
}
@keyframes glitch {
  0% {
    color: white;
    transform: translateX(0) translateY(0%);
  }
  25% {
    color: #3498db;
    transform: translateX(1px) translateY(1px);
  }
  40% {
    color: #e74c3c;
    transform: translateX(-2px) translateY(-2px);
  }
  50% {
    color: #cccccc;
    transform: translateX(0) translateY(0);
  }
  80% {
    color: #3498db;
    transform: translateX(2px) translateY(2px);
  }
  90% {
    color: #e74c3c;
    transform: translateX(-1px) translateY(-1px);
  }
  100% {
    color: white;
    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;
}

.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 pre {
  font-size: 9px;
  -webkit-animation: glitch 0.2s linear infinite;
          animation: glitch 0.2s linear infinite;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}
.console .output pre:hover {
  -webkit-animation-play-state: running;
          animation-play-state: running;
}
.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;
  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;
}