/* LIST OF FURTHER IMPROVEMENTS */
/*
currently working on :
calculation draft for keyframes steps

$scan-moving-duration: 3s;
$scan-moving-delay: 7s;

total time = 10s (duration + delay)
keyframes :
    0%: wait
    15%: start moving
    85%: end moving & start waiting
    100% : wait

(the rest later)

*/
/* REGULAR SCANLINES SETTINGS */
/* MOVING SCANLINE SETTINGS */
/* MIXINS */
/* CSS .scanlines CLASS */

/* .screen::before {
  background: transparent linear-gradient(to bottom, #85908c 0%, #323431 100%) repeat scroll 0 0;
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  width: 100%;
  height: 100%;
  z-index: -1;
} */

.scanlines {
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/86186/crt.png');
    position: relative;
    overflow: hidden;
    /* margin-bottom: 20px; */
  }
  .scanlines:before, .scanlines:after {
    display: block;
    pointer-events: none;
    content: "";
    position: absolute;
  }
  .scanlines:before {
    width: 100%;
    height: 2px;
    z-index: 2147483649;
    background: rgba(0, 0, 0, 0.2);
    opacity: 0.1;
    -webkit-animation: scanline 6s linear infinite;
            animation: scanline 6s linear infinite;
  }
  .scanlines:after {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2147483648;
    background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.2) 51%);
    background-size: 100% 4px;
    -webkit-animation: scanlines 1s steps(60) infinite;
            animation: scanlines 1s steps(60) infinite;
  }
  
  /* ANIMATE UNIQUE SCANLINE */
  @-webkit-keyframes scanline {
    0% {
      transform: translate3d(0, 200000%, 0);
    }
  }
  @keyframes scanline {
    0% {
      transform: translate3d(0, 200000%, 0);
    }
  }
  @-webkit-keyframes scanlines {
    0% {
      background-position: 0 50%;
    }
  }
  @keyframes scanlines {
    0% {
      background-position: 0 50%;
    }
  }
  /* PRESENTATION STUFF */