add crt-ish css and change font

www/src/main.ts

···
     });
   };
 
+  await document.fonts.load("16px EverexME");
+
   const term = new Terminal({
     cursorBlink: true,
-    cursorStyle: "bar",
+    cursorStyle: "block",
     cursorInactiveStyle: "block",
-    fontFamily: '"Comic Mono", monospace',
-    fontSize: 15,
+    customGlyphs: true,
+    fontFamily: "EverexME",
+    fontSize: 16,
+    lineHeight: 1,
+    letterSpacing: 0,
     scrollback: 100000,
     theme: {
       background: "#000000",
···
     }
   };
 
-  // 1. Setup Input Handler immediately so terminal isn't blocked
   term.onData(async (e) => {
     // SEARCH MODE INPUT
     if (searchState !== "none" && e >= " " && e <= "~") {
···
     .catch((e) => {
       term.write(`\r\n\x1b[31mfatal: failed to load engine: ${e}\x1b[0m\r\n`);
     });
+
+  fitAddon.fit();
+  // setTimeout(() => fitAddon.fit(), 1000);
 }
 
 bootstrap().catch(console.error);

www/src/style.css

···
+@font-face {
+    font-family: "EverexME";
+    src: url("/Web437_EverexME_5x8.woff") format("woff");
+    font-weight: normal;
+    font-style: normal;
+}
+
+:root {
+    --screen-background: #121010;
+
+    --flicker-opacity: 0.3;
+    --flicker-speed: 0.1s;
+
+    --scanline-opacity: 0.25;
+    --scanline-size: 2px;
+
+    --rgb-red-opacity: 0.12;
+    --rgb-green-opacity: 0.08;
+    --rgb-blue-opacity: 0.18;
+    --rgb-stripe-size: 3px;
+
+    --crt-contrast: 1;
+    --crt-brightness: 1.2;
+    --crt-saturation: 1.3;
+}
+
 body {
     margin: 0;
     padding: 0;
-    background-color: #000000;
+    background-color: var(--screen-background);
     height: 100vh;
     width: 100vw;
     overflow: hidden;
 }
 
+@keyframes flicker {
+    0% {
+        opacity: 0.27861;
+    }
+    3% {
+        opacity: 0.34769;
+    }
+    6% {
+        opacity: 0.23604;
+    }
+    7% {
+        opacity: 0.90626;
+    }
+    8% {
+        opacity: 0.18128;
+    }
+    11% {
+        opacity: 0.83891;
+    }
+    19% {
+        opacity: 0.65583;
+    }
+    20% {
+        opacity: 0.67807;
+    }
+    24% {
+        opacity: 0.26559;
+    }
+    27% {
+        opacity: 0.84693;
+    }
+    40% {
+        opacity: 0.96019;
+    }
+    41% {
+        opacity: 0.08594;
+    }
+    43% {
+        opacity: 0.20313;
+    }
+    53% {
+        opacity: 0.71988;
+    }
+    57% {
+        opacity: 0.53455;
+    }
+    64% {
+        opacity: 0.37288;
+    }
+    68% {
+        opacity: 0.71428;
+    }
+    76% {
+        opacity: 0.70419;
+    }
+    81% {
+        opacity: 0.7003;
+    }
+    86% {
+        opacity: 0.36108;
+    }
+    95% {
+        opacity: 0.24387;
+    }
+    100% {
+        opacity: 0.27861;
+    }
+}
+
+@keyframes flicker-speed {
+    0% {
+        animation-duration: 0.12s;
+    }
+    10% {
+        animation-duration: 0.08s;
+    }
+    20% {
+        animation-duration: 0.15s;
+    }
+    30% {
+        animation-duration: 0.09s;
+    }
+    40% {
+        animation-duration: 0.13s;
+    }
+    50% {
+        animation-duration: 0.11s;
+    }
+    60% {
+        animation-duration: 0.14s;
+    }
+    70% {
+        animation-duration: 0.07s;
+    }
+    80% {
+        animation-duration: 0.16s;
+    }
+    90% {
+        animation-duration: 0.1s;
+    }
+    100% {
+        animation-duration: 0.12s;
+    }
+}
+
 #terminal {
+    font-family: "EverexME", monospace;
+    font-size: 16px;
+
+    image-rendering: pixelated;
+    -webkit-font-smoothing: none;
+    -moz-osx-font-smoothing: grayscale;
+    font-smooth: never;
+
+    position: relative;
+    overflow: hidden;
+    filter: contrast(var(--crt-contrast)) brightness(var(--crt-brightness))
+        saturate(var(--crt-saturation));
+
+    width: 100vw;
     height: 100vh;
-    width: 100vw;
+}
+
+#terminal::after {
+    content: " ";
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background: rgba(18, 16, 16, var(--flicker-opacity));
+    opacity: 0;
+    z-index: 2;
+    pointer-events: none;
+    animation:
+        flicker var(--flicker-speed) steps(2, jump-none) infinite,
+        flicker-speed 3.7s steps(10, jump-none) infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    #terminal::after {
+        animation: none;
+        opacity: 0.1;
+    }
+}
+
+#terminal::before {
+    content: " ";
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background:
+        linear-gradient(
+            rgba(18, 16, 16, 0) 50%,
+            rgba(0, 0, 0, var(--scanline-opacity)) 50%
+        ),
+        linear-gradient(
+            90deg,
+            rgba(255, 0, 0, var(--rgb-red-opacity)),
+            rgba(0, 255, 0, var(--rgb-green-opacity)),
+            rgba(0, 0, 255, var(--rgb-blue-opacity))
+        );
+    z-index: 2;
+    background-size:
+        100% var(--scanline-size),
+        var(--rgb-stripe-size) 100%;
+    pointer-events: none;
 }