use Fira Code; hammer CSS to match; hammer colors not be too dark

static/ansi-to-html.js

@@ -13,11 +13,11 @@ const defaults = {
 
 function getDefaultColors() {
     const colors = {
-        0: '#AAA', // no, NOT BLACK
+        0: '#999', // no, NOT BLACK
         1: '#A00',
         2: '#0A0',
         3: '#A50',
-        4: '#0000d5',
+        4: '#4242da',
         5: '#A0A',
         6: '#0AA',
         7: '#AAA',

static/application.css

@@ -2,11 +2,24 @@ body {
     background: #000;
     padding: 20px 50px;
     margin: 0;
+    font-family: 'Fira Code', monospace;
 }
+
 body pre.hljs {
     color: #c9d1d9;
     background: #000;
 }
+
+body pre.hljs code {
+    font-family: 'Fira Code', monospace;
+}
+
+@supports (font-variation-settings: normal) {
+    body pre.hljs code {
+        font-family: 'Fira Code VF', monospace;
+    }
+}
+
 /* textarea */
 
 textarea {
@@ -33,8 +46,7 @@ textarea {
     top: 20px;
     left: 0;
     width: 30px; /* 30 to get 20 away from box */
-    font-size: 13px;
-    font-family: monospace;
+    font-size: 100%;
     text-align: right;
     user-select: none;
 }
@@ -47,7 +59,7 @@ textarea {
     width: 100%;
     border: 0;
     outline: none;
-    font-size: 13px;
+    font-size: 100%;
     overflow: inherit;
 }
 

static/index.html

@@ -18,6 +18,7 @@
 
     <!--<script type="text/javascript" src="application.min.js"></script>-->
 
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/firacode@6.2.0/distr/fira_code.css">
 
     <script type="text/javascript" src="ansi-to-html.js"></script>
     <script type="text/javascript" src="application.js"></script>