/* Credit for scanlines: https://dev.to/ekeijl/retro-crt-terminal-screen-in-css-js-4afh */
.scanline {
    width: 100%;
    height: 100px;
    z-index: 8;
    background: linear-gradient(0deg,
            rgba(0, 0, 0, 0) 0%,
            rgba(255, 255, 255, 0.1) 10%,
            rgba(0, 0, 0, 0.1) 100%);
    opacity: 0.1;
    position: absolute;
    bottom: 100%;
    left: 0;
    animation: scanline 4s linear infinite;
}

@keyframes scanline {
    0% {
        bottom: 100%;
    }

    80% {
        bottom: 100%;
    }

    100% {
        bottom: 0%;
    }
}

/* https://css-tricks.com/snippets/css/animated-grainy-texture/ */
@keyframes grain {

    0%,
    100% {
        transform: translate(0, 0)
    }

    10% {
        transform: translate(-5%, -10%)
    }

    20% {
        transform: translate(-15%, 5%)
    }

    30% {
        transform: translate(7%, -25%)
    }

    40% {
        transform: translate(-5%, 25%)
    }

    50% {
        transform: translate(-15%, 10%)
    }

    60% {
        transform: translate(15%, 0%)
    }

    70% {
        transform: translate(0%, 15%)
    }

    80% {
        transform: translate(3%, 35%)
    }

    90% {
        transform: translate(-10%, 10%)
    }
}

.grain {
    animation: grain 8s steps(10) infinite;
    background-image: url(https://i.ibb.co/6Rw6ysv/noise.png);
    height: 300%;
    left: -30%;
    opacity: 0.3;
    position: absolute;
    top: -110%;
    width: 200%;
    z-index: 2;
    pointer-events: none;
}