@font-face                          { font-family:"Matrix Code NFI";src:url("../fonts/matrix_code_nfi.woff2") format("woff2"),url("../fonts/matrix_code_nfi.woff") format("woff");font-weight:normal;font-style:normal;font-display:swap; }

@keyframes letter_appear_and_fade   {
    0%                  { color:#fff; }
    1%                  { color:#fff; }
    15%                 { color:#03A062; }
    80%                 { opacity:1; }
    100%                { opacity:0; }
}

@keyframes letter_changed   {
    from                { color:#a4ff2c; }
    to                  { color:#098553; }
}


/* 150 op 1920 = 12,8 pixels breedt. 26.3px is 12.8 */
*                           { margin:0px;padding:0px;user-select:none; }
body                        { background-color:#000;height:100vh;font-family:"Matrix Code NFI";overflow:hidden;color:#03A062;font-size:calc(100vw / 1920 * 26.3); } 
main                            { display:grid;grid-template-columns:repeat(150,1fr); }
main>div                        { display:flex;flex-direction:column;height:100vh;text-align:center;overflow:hidden; }
main>div>div                    { animation-name:letter_appear_and_fade;animation-direction:normal;animation-fill-mode:forwards;animation-duration:2s;text-shadow: 0px 0px 7px #7aebbd; }
main>div>div>span.changed       { animation-name:letter_changed;animation-direction:normal;animation-fill-mode:forwards;animation-duration:250ms; }