body {
  background-color: black;
  color: Red;
  font-family: minisystem;
}

.scanlines {
  overflow: hidden;
}

.scanlines::before {
  content: "";
  position: absolute;
  width:  100%;
  height: 200%;
  top:   -100%;
  left:     0;

  background: repeating-linear-gradient(to bottom,
    transparent 0%,
    rgba(255,255,255,0.05) 1%,
    transparent 2%);

  animation-name: fudge;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  // animation-direction: reverse;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
}


.scanlines::after {
  content: "";
  position: absolute;
  width:  100%;
  height: 200%;
  top:   -100%;
  left:     0;

  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(255,255,255, 0.1) 0.75%,
    transparent 1.25%,
    transparent 50%,
    rgba(255,255,255, 0.1) 50.75%,
    transparent 51.25%
    );

  animation-name: scanline;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}


@keyframes fudge {
  from { transform: translate(0px, 0px);  }
  to   { transform: translate(0px, 2%); }
}

@keyframes scanline {
  from { transform: translate(0px, 0px);  }
  to   { transform: translate(0px, 50%); }
}