body {
  font-family: "Press Start 2P", cursive;
  background: #171DA8;
  overflow: hidden;
  -webkit-animation: blue-me 5ms infinite;
          animation: blue-me 5ms infinite;
}

body:after {
  box-shadow: inset 0 0 10em rgba(0, 0, 0, 0.75);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  content: "";
}

@-webkit-keyframes blue-me {
  28% {
    background: #171DA8;
  }
  30% {
    background: rgba(23, 29, 168, 0.95);
  }
  33% {
    background: #171DA8;
  }
  34% {
    background: rgba(23, 29, 168, 0.9);
  }
  35% {
    background: #171DA8;
  }
}

@keyframes blue-me {
  28% {
    background: #171DA8;
  }
  30% {
    background: rgba(23, 29, 168, 0.95);
  }
  33% {
    background: #171DA8;
  }
  34% {
    background: rgba(23, 29, 168, 0.9);
  }
  35% {
    background: #171DA8;
  }
}
.vhs-message {
  -webkit-animation: track 5ms infinite;
          animation: track 5ms infinite;
  position: relative;
  margin: 4em;
}

h1 {
  position: absolute;
  font-size: 3em;
  left: 0;
  filter: blur(3px);
  color: #fff;
  color: #fff;
  text-shadow: 1px 3px green, -2px -3px red;
}

.vhs-message span {
  -webkit-animation: blur 30ms infinite, flick 50ms infinite, jump 50ms infinite;
          animation: blur 30ms infinite, flick 50ms infinite, jump 50ms infinite;
}

@-webkit-keyframes blur {
  0% {
    filter: blur(1px);
    opacity: 0.8;
  }
  50% {
    filter: blur(1px);
    opacity: 1;
  }
  100% {
    filter: blur(1px);
    opacity: 0.8;
  }
}

@keyframes blur {
  0% {
    filter: blur(1px);
    opacity: 0.8;
  }
  50% {
    filter: blur(1px);
    opacity: 1;
  }
  100% {
    filter: blur(1px);
    opacity: 0.8;
  }
}
@-webkit-keyframes flick {
  50% {
    left: 2px;
  }
  51% {
    left: 0;
  }
}
@keyframes flick {
  50% {
    left: 2px;
  }
  51% {
    left: 0;
  }
}
@-webkit-keyframes jump {
  30% {
    top: 10px;
  }
  31% {
    top: 0;
  }
}
@keyframes jump {
  30% {
    top: 10px;
  }
  31% {
    top: 0;
  }
}
@-webkit-keyframes track {
  40% {
    opacity: 1;
    top: 0;
    left: 0;
    transform: scale(1, 1);
    transform: skew(0, 0);
  }
  41% {
    opacity: 0.8;
    top: 0px;
    left: -100px;
    transform: scale(1, 1.2);
    transform: skew(50deg, 0);
  }
  42% {
    opacity: 0.8;
    top: 0px;
    left: 100px;
    transform: scale(1, 1.2);
    transform: skew(-80deg, 0);
  }
  43% {
    opacity: 1;
    top: 0;
    left: 0;
    transform: scale(1, 1);
    transform: skew(0, 0);
  }
}
@keyframes track {
  40% {
    opacity: 1;
    top: 0;
    left: 0;
    transform: scale(1, 1);
    transform: skew(0, 0);
  }
  41% {
    opacity: 0.8;
    top: 0px;
    left: -100px;
    transform: scale(1, 1.2);
    transform: skew(50deg, 0);
  }
  42% {
    opacity: 0.8;
    top: 0px;
    left: 100px;
    transform: scale(1, 1.2);
    transform: skew(-80deg, 0);
  }
  43% {
    opacity: 1;
    top: 0;
    left: 0;
    transform: scale(1, 1);
    transform: skew(0, 0);
  }
}
.screen-bottom {
  position: fixed;
  bottom: 0;
  width: 100%;
}

.line {
  width: 100%;
  height: 3px;
  position: relative;
  -webkit-animation: appear 1s infinite, flick 1s infinite, big-jump 5ms infinite;
          animation: appear 1s infinite, flick 1s infinite, big-jump 5ms infinite;
}
.line .white {
  background: white;
  position: relative;
  top: 0;
  left: 0;
  height: 4px;
}
.line .red {
  background: red;
  position: relative;
  top: 0;
  left: 0;
  height: 1px;
}
.line .green {
  background: green;
  position: relative;
  top: 0;
  left: 0;
  height: 1px;
}

@-webkit-keyframes appear {
  0% {
    filter: blur(5px);
    opacity: 0.85;
  }
  50% {
    filter: blur(3px);
    opacity: 0.85;
  }
  100% {
    filter: blur(4px);
    opacity: 0.85;
  }
}

@keyframes appear {
  0% {
    filter: blur(5px);
    opacity: 0.85;
  }
  50% {
    filter: blur(3px);
    opacity: 0.85;
  }
  100% {
    filter: blur(4px);
    opacity: 0.85;
  }
}
@-webkit-keyframes big-jump {
  0% {
    top: 0;
  }
  10% {
    top: -100px;
  }
  12% {
    top: 0;
  }
  54% {
    top: 0;
  }
  55% {
    top: -300px;
  }
  56% {
    top: 0;
  }
  86% {
    top: 0;
  }
  87% {
    top: -600px;
  }
  88% {
    top: 0;
  }
}
@keyframes big-jump {
  0% {
    top: 0;
  }
  10% {
    top: -100px;
  }
  12% {
    top: 0;
  }
  54% {
    top: 0;
  }
  55% {
    top: -300px;
  }
  56% {
    top: 0;
  }
  86% {
    top: 0;
  }
  87% {
    top: -600px;
  }
  88% {
    top: 0;
  }
}