/*  
    Simple CSS CRT filter by 𝕂𝕣𝕪𝕡𝕥𝕠𝕟𝕒𝕦𝕥 (et al). My eclectic site -> https://kry.pt 
    Inspired by this filter by Alec Lownes: http://aleclownes.com/2017/02/01/crt-display.html . 
    Hopefully less RAM-hogging for those (like me) who hear their laptop fans spin up every 
    time they open their sites on Chrome or Edge.

    Version 1.5 - APR 2023
*/

/*
    Instead of pure CSS like Alec's, I used a small APNG of a collection of pixels 
    for the "screen door" effect. Results in happy RAM but requires, yaknow, the image.
    This sometimes results in the filter loading slowly but is nice for pixel perfect scaling.
    If your browser doesn't support APNG, it will use the first frame as a fallback!
*/

crt {   background-image: url('APNG/pixel.apng');
        background-size: 2px 1px;
        background-color: white;
        background-blend-mode: hard-light;  /* <- Helps combat the 'darkening' effect from multiply.  */
        mix-blend-mode: multiply;
        pointer-events: none;
        opacity: 0.3;
        position: absolute; 
        width: 100%; 
        inset: 0;
        z-index: 999999;
    }

/*  Firefox deals with opacity rendering differently, so I have to drastically lower it. 
    Eats RAM, defeating the purpose, but Firefox is lame anyways so I don't really care.  */

@-moz-document url-prefix() {

    crt {opacity: 0.1;}

}