updated header

src/routes/+layout.svelte

@@ -16,6 +16,7 @@
 
 <style>
 
+    /* #region Fonts */
     /* Roboto Flex */
     @font-face {
         font-family: "Roboto Flex";
@@ -50,13 +51,16 @@
         src: url("/fonts/ibm-plex-mono/medium.ttf");
         font-weight: 500;
     }
+    /* #endregion */
 
     :global {
         :root {
             --color-text: #d0d0d0;
             --color-text-img: invert(98%) sepia(1%) saturate(4643%) hue-rotate(297deg) brightness(115%) contrast(76%);
             --color-text-dark: #1e1e1e;
-            --color-highlight: #51B86B !important;
+            --color-highlight: #51B86B;
+            --color-header: color-mix(in srgb, var(--color-highlight) 80%, black);
+            --color-header-highlight: color-mix(in srgb, #6d1e26 80%, transparent);
 
             --color-background: #1b1b1b;
             --color-background-highlight: color-mix(in srgb, var(--color-highlight) 10%, transparent);
@@ -74,6 +78,7 @@
             /* --font-title: 'Roboto Flex'; */
             --font-sans-serif: 'Roboto Flex', 'Lato', sans-serif;
             --font-mono: 'IBM Plex Mono', monospace;
+            --font-stylised: 'Space Mono', monospace;
 
             --page-width: 1200px;
             --content-width: 1000px;
@@ -314,7 +319,7 @@
             
             color: var(--color-text-dark);
             background-color: var(--color-highlight);
-            font-family: 'Space Mono', monospace;
+            font-family: var(--font-stylised);
             padding: 4px;
         }