adjusted sizing and spacing of body and header text, images, video

src/routes/+layout.svelte

@@ -15,42 +15,6 @@
 </div>
 
 <style>
-    /* #region Old Fonts */
-    /* Roboto Flex */
-    @font-face {
-        font-family: "Roboto Flex";
-        src: url("/fonts/roboto-flex/flex.ttf");
-    }
-
-    /* Space Mono */
-    @font-face {
-        font-family: "Space Mono";
-        src: url("/fonts/space-mono/regular.ttf");
-    }
-    @font-face {
-        font-family: "Space Mono";
-        src: url("/fonts/space-mono/italic.ttf");
-        font-style: italic;
-    }
-    @font-face {
-        font-family: "Space Mono";
-        src: url("/fonts/space-mono/bold.ttf");
-        font-weight: bold;
-    }
-    @font-face {
-        font-family: "Space Mono";
-        src: url("/fonts/space-mono/bolditalic.ttf");
-        font-style: italic;
-        font-weight: bold;
-    }
-    /* IBM Plex Mono */
-    @font-face {
-        font-family: "IBM Plex Mono";
-        src: url("/fonts/ibm-plex-mono/medium.ttf");
-        font-weight: 500;
-    }
-    /* #endregion */
-    
     /* #region New Fonts */
     /* Bai Jamjuree. wght: 200-700 */
 
@@ -136,6 +100,7 @@
             --color-text-img: invert(98%) sepia(1%) saturate(4643%) hue-rotate(297deg) brightness(115%) contrast(76%);
             --color-text-dark: #1e1e1e;
             --color-highlight: #51B86B;
+            --color-highlight-alt: #d03b4a;
             --color-header: color-mix(in srgb, var(--color-highlight) 80%, black);
             --color-header-highlight: color-mix(in srgb, #6d1e26 80%, transparent);
 
@@ -153,7 +118,7 @@
             --color-link-hovered: #ffdad5;
 
             /* fonts */
-            --font-line-height: 1.5rem;
+            --font-line-height: 1.6rem;
 
             --font-sans-serif: 'Bai Jamjuree', sans-serif;
             --font-size-sans-serif: 1.1rem;
@@ -161,11 +126,13 @@
             --font-mono: 'Kode Mono', monospace;
             --font-size-mono: 0.9em;
 
-            --font-stylised: 'Space Mono', monospace;
+            --font-size-h1: 2.0rem;
+            --font-size-h2: 1.5rem;
+            --font-size-h3: 1.3rem;
+            --font-size-h4: 1.2rem;
 
             /* page sizing */
-            --page-width: 1200px;
-            --content-width: 1000px;
+            --page-width: 1000px;
             --screen-width-mobile: 800px;
 
             --margin-content-side: 24px;
@@ -211,6 +178,7 @@
             color: var(--color-text);
             font-size: var(--font-size-sans-serif);
             line-height: var(--font-line-height);
+            margin: 12px 0;
             font-weight: 400;
         }
         ul {
@@ -235,58 +203,62 @@
             display: inline;
         }
 
-        h1 {
-            font-size: 4.0rem;
-            line-height: 4.0rem;
-        }
-
-        h2 {
-            font-size: 2.5rem;
-            line-height: 2.5rem;
-        }
-        h2::before {
-            letter-spacing: -0.5rem;
-            content: '› ';
-            margin-right: 15px;
-        }
-
-        h3 {
-            font-size: 2.0rem;
-            line-height: 2.0rem;
-        }
-        h3::before {
-            letter-spacing: -0.3rem;
-            content: '›› ';
-            margin-right: 10px;
-        }
-
-        h4, h5, h6 {
-            font-size: 1.7rem;
-            line-height: 1.7rem;
-        }
-        h4::before {
-            letter-spacing: -0.26rem;
-            content: '››› ';
-            margin-right: 6px;
-        }
-
+        /* #region Headers */
+        /* All headers */
         h1, h2, h3, h4, h5, h6 {
-            font-weight: 870;
-            font-family: var(--font-sans-serif);
+            font-weight: 700;
+            font-family: var(--font-mono);
             color: var(--color-highlight);
-            margin-top: 12px;
+            margin-top: 16px;
             margin-bottom: 8px;
             width: fit-content;
         }
-        h1, h2, h3, h4, h5, h6, .wide-font {
-            font-variation-settings: 
-                "wdth" 151, /* width */
-                "XTRA" 560, /* counter width */
-                "YTUC" 662, /* uppercase height */
-                "YTAS" 700, /* ascender height */
-                "YOPQ" 69, /* thin stroke */
-                "YTFI" 788 /* figure height */
-            ;
+
+        h2 + h3, h3 + h4, h4 + h5, h5 + h6 {
+            /* Remove top margin when a header immediately preceds another header */
+            margin-top: 0;
+        }
+
+        /* Individual header settings */
+        h1 {
+            font-size: var(--font-size-h1);
+            line-height: var(--font-size-h1);
+        }
+
+        h2 {
+            font-size: var(--font-size-h2);
+            line-height: var(--font-size-h2);
+        }
+        h2::before {
+            content: '> ';
+            margin-right: 12px;
+        }
+
+        h3 {
+            font-size: var(--font-size-h3);
+            line-height: var(--font-size-h3);
+        }
+        h3::before {
+            content: '>> ';
+            margin-right: 4px;
+        }
+
+        h4, h5, h6 {
+            font-size: var(--font-size-h4);
+            line-height: var(--font-size-h4);
+        }
+        h4::before {
+            letter-spacing: -0.26rem;
+            content: '>>> ';
+            margin-right: 14px;
+        }
+        /* #endregion */
+
+        hr {
+            width: 100%;
+            height: 1px;
+            border: none;
+            border-top: 2px dashed var(--color-highlight);
         }
 
         code, .code-block {
@@ -306,6 +278,8 @@
             margin-left: auto;
             margin-right: auto;
             display: flex;
+            max-height: 400px;
+            object-fit: contain;
         }
 
         .horizontally-centre-aligned {