diff --git a/src/lib/banner-title-alt.svelte b/src/lib/banner-title-alt.svelte
index dc032c9..87bde5b 100644
--- a/src/lib/banner-title-alt.svelte
+++ b/src/lib/banner-title-alt.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-    import SeparatorLine from "./separator-line.svelte";
-
     let {
         title,
         date = "",
@@ -71,7 +69,7 @@
 {/if}
 {/snippet}
 
-<SeparatorLine />
+<hr>
 
 <style>
     .container {
diff --git a/src/lib/banner2.svelte b/src/lib/banner2.svelte
index 4f5d582..831bef4 100644
--- a/src/lib/banner2.svelte
+++ b/src/lib/banner2.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-    import SeparatorLine from "./separator-line.svelte";
-
     let {
         title,
         date = "",
@@ -19,144 +17,63 @@
 
 </script>
 
-<div class="container">
-	
-	<div class="subcontainer">
-		<div class="img-container">
-			{#if banner}
-				{#if pixelated}
-					<img class="banner pixelated-img" src="{banner}" alt="{bannerAlt}">
-				{:else}
-					<img class="banner" src="{banner}" alt="{bannerAlt}">
-				{/if}
-			{/if}
-			<div class="text-container">
-				{@render titles({title, subtitle, date})}
-			</div>
-		</div>
-	</div>
-
-	<!-- {#if banner}
-		<div class="subcontainer">
-			<div class="img-container">
-				{#if pixelated}
-					<img class="pixelated-img" src="{banner}" alt="{bannerAlt}">
-				{:else}
-					<img src="{banner}" alt="{bannerAlt}">
-				{/if}
-			</div>
-			<div class="text-container">
-				{@render titles({title, subtitle, date})}
-			</div>
-		</div>
-	{:else}
-		<div class="subcontainer">
-			<div class="text-container">
-				{@render titles({title, subtitle, date})}
-			</div>
-		</div>
-	{/if} -->
-</div>
-
 {#snippet titles({title, subtitle, date}: {title: string, subtitle: string, date: string})}
-	<h1 class="title">{title}</h1>
-	{#if subtitle}
-		<p class="subtitle">[ {subtitle} ]</p>
-	{/if}
+	<div class="title-container">
+        <h1 class="title">{title}</h1>
+        {#if subtitle}
+            <p class="subtitle">[ {subtitle} ]</p>
+        {/if}
+    </div>
 	{#if date}
 		<p class="date">» {date}</p>
 	{/if}
 {/snippet}
 
-<SeparatorLine />
+<div class="container">
+    {#if banner}
+        {#if pixelated}
+            <img class="banner pixelated-img" src="{banner}" alt="{bannerAlt}">
+        {:else}
+            <img class="banner" src="{banner}" alt="{bannerAlt}">
+        {/if}
+    {/if}
+    {@render titles({title, subtitle, date})}
+    <hr>
+</div>
 
 <style>
     .container {
         width: 100%;
-        background-color: var(--color-background-highlight);
-    }
-
-    .subcontainer {
-        max-width: var(--page-width);
-        /* min-height: 250px;
-		max-height: 600px; */
-        display: flex;
-        flex-direction: row;
-        margin-left: auto;
-        margin-right: auto;
     }
 
 	.banner {
-		/* position: absolute;
-		top: 0;
-		bottom: 0;
-		left: 0;
-		right: 0; */
-		max-height: 260px;
-	}
-
-    .img-container {
-        flex-grow: 1;
-        width: 50%;
-		position: relative;
-    }
-
-    .text-container {
-        margin-left: var(--margin-content-side);
-        margin-right: var(--margin-content-side);
-		/* position: absolute;
-		bottom: 0; */
-    }
-
-    .container img {
-        height: 100%;
+		max-height: 300px;
         width: 100%;
         object-fit: cover;
+	}
+
+    .title-container {
+        display: flex;
+        flex-direction: row;
+        align-items: flex-end;
+        gap: 12px;
     }
 
     .title {
-        width: 100%;
         box-sizing: border-box;
         height: fit-content;
-        left: 0;
-        right: 0;
-        bottom: 0px;
-        /* font-style: italic; */
     }
 
     .date {
-        font-family: var(--font-title);
-        font-weight: 800;
+        font-weight:700;
         font-size: 1.3rem;
         margin-top: 0;
         color: var(--color-highlight);
     }
 
     .subtitle {
-        font-style: italic;
         font-family: var(--font-mono);
-        font-weight: 800;
-        font-size: 1.3rem;
-        margin-top: 0;
-    }
-
-    @media screen and (max-width: 800px) {
-        .subcontainer {
-            height: fit-content;
-            flex-direction: column;
-        }
-        .text-container {
-            width: initial;
-        }
-        .img-container {
-            width: 100%;
-        }
-        .img-container img {
-            height: 200px;
-        }
-        .subtitle {
-            font-size: 1.0rem;
-            line-height: 1.1rem;
-        }
+        font-weight: 500;
+        font-size: 1.0rem;
     }
 </style>
\ No newline at end of file
diff --git a/src/lib/content.svelte b/src/lib/content.svelte
index a5f1e74..deb29f7 100644
--- a/src/lib/content.svelte
+++ b/src/lib/content.svelte
@@ -1,37 +1,20 @@
 <script lang="ts">
-    let {
-        useContentWidth,
-    }: {
-        useContentWidth?: boolean;
-    } = $props();
+    let { children } = $props();
 </script>
 
-{#if useContentWidth}
-    <div class="main-content content-width">
-        <slot />
-    </div>
-{:else}
-    <div class="main-content page-width">
-        <slot />
-    </div>
-{/if}
+<div class="main-content">
+    {@render children()}
+</div>
 
 <style>
     .main-content {
         width: 100%;
+        max-width: var(--page-width);
         box-sizing: border-box;
         margin: 0 auto;
         padding: 0 24px;
     }
 
-    .content-width {
-        max-width: var(--content-width);
-    }
-
-    .page-width {
-        max-width: var(--page-width);
-    }
-
     @media screen and (max-width: 800px) {
         .main-content {
             padding: 0 8px;
diff --git a/src/lib/footer.svelte b/src/lib/footer.svelte
index 055373b..9a72b2f 100644
--- a/src/lib/footer.svelte
+++ b/src/lib/footer.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-    import SeparatorLine from "./separator-line.svelte";
-
     var ratCounter = 0;
 
     let playSound = function() {
@@ -16,7 +14,7 @@
 
 <footer>
     <div class="background">
-        <SeparatorLine noMargin />
+        <hr>
         <div class="content-container">
             <div class="content-box center-box">
                 <p>〔 2023–2026 〕denizk0461</p>
diff --git a/src/lib/header.svelte b/src/lib/header.svelte
index 5371886..1220c2b 100644
--- a/src/lib/header.svelte
+++ b/src/lib/header.svelte
@@ -8,9 +8,9 @@
     <a href="/about">About</a>
 {/snippet}
 
-<div class="header-content coloured-header">
+<!-- <div class="header-content coloured-header">
     {@render headerContent()}
-</div>
+</div> -->
 
 <style>
     .header-content {
diff --git a/src/lib/separator-line.svelte b/src/lib/separator-line.svelte
deleted file mode 100644
index 02d0c17..0000000
--- a/src/lib/separator-line.svelte
+++ /dev/null
@@ -1,22 +0,0 @@
-<script lang="ts">
-    let {
-        noMargin,
-    }: {
-        noMargin?: boolean;
-    } = $props();
-</script>
-
-{#if noMargin}
-    <hr style="margin-top: 0px; margin-bottom: 0px;">
-{:else}
-    <hr style="margin-top: 20px; margin-bottom: 20px;">
-{/if}
-
-<style>
-    hr {
-        width: 100%;
-        height: 1px;
-        border: none;
-        border-top: 2px dashed var(--color-highlight);
-    }
-</style>
\ No newline at end of file
diff --git a/src/lib/table-of-contents.svelte b/src/lib/table-of-contents.svelte
index 2888480..88bcdf9 100644
--- a/src/lib/table-of-contents.svelte
+++ b/src/lib/table-of-contents.svelte
@@ -98,22 +98,22 @@
             padding: 0;
             margin: 0;
         }
-        /* .toc-list li {
-            list-style: none;
-        } */
+        
         .toc-list a {
             width: 100%;
             padding-top: 3px;
             padding-bottom: 3px;
             padding-right: 24px;
+            margin: 0;
             display: inline-block;
-            color: var(--color-text);
             text-decoration: none;
             transition: all 0.2s ease-in-out;
             transition-property: color background-color;
             box-sizing: border-box;
         }
-
+        .toc-list a, .toc-list a:link, .toc-list a:visited {
+            color: var(--color-text);
+        }
         .toc-list a:hover {
             color: var(--color-text-dark);
             background-color: var(--color-highlight);
@@ -133,7 +133,7 @@
             padding-left: 116px;
         }
         .toc-level-1::before, .toc-level-2::before, .toc-level-3::before {
-            content: "↳ ";
+            content: "└ ";
         }
     }
 </style>
\ No newline at end of file
diff --git a/src/lib/webrings/gamedev.svelte b/src/lib/webrings/gamedev.svelte
index 493e36f..1c3b391 100644
--- a/src/lib/webrings/gamedev.svelte
+++ b/src/lib/webrings/gamedev.svelte
@@ -8,7 +8,7 @@
         <span>〔</span>
         <a href="https://www.rainbowcemetery.com/devring/prev.php?id=18">↫ PREV</a>
         <a href="https://www.rainbowcemetery.com/devring/rand.php?id=18">RAND</a>
-        <a href="https://www.rainbowcemetery.com/devring/list.php?id=18">LI<i>S</i>T</a>
+        <a href="https://www.rainbowcemetery.com/devring/list.php?id=18">LIST</a>
         <a href="https://www.rainbowcemetery.com/devring/next.php?id=18">NEXT ↬</a>
         <span>〕</span>
     </div>
@@ -22,14 +22,23 @@
         align-items: center;
         margin: 16px auto;
     }
-    .webring-row a {
+    a {
         margin: 0 4px;
         text-decoration: none;
     }
+    a:link, a:visited {
+        color: var(--color-highlight);
+    }
+    a:hover {
+        font-weight: 700;
+    }
     .webring-row {
-        font-family: 'Space Mono';
+        font-family: var(--font-mono);
         display: flex;
         width: 100%;
         justify-content: space-between;
     }
+    span {
+        margin: 0;
+    }
 </style>
\ No newline at end of file
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 79732c8..6732518 100644
--- a/src/routes/+layout.svelte
+++ b/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 {
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 143251c..4d196c4 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -72,46 +72,39 @@
 <Content>
     <h1 class="gradient-title"><i>Moin!</i> ~ welcome to my website :)</h1>
 
-    <div class="container">
-        <div class="subcontainer">
-            <Gallery entries={galleryEntries}/>
-        </div>
-        <div class="subcontainer">
-            <div class="quote-marquee-container">
-                {@render marqueeContent({quote: marqueeQuote, ignoreA11y: false})}
-                {@render marqueeContent({quote: marqueeQuote, ignoreA11y: true})}
-                {@render marqueeContent({quote: marqueeQuote, ignoreA11y: true})}
-            </div>
-
-            <h3>about ↬<img id="me-img" class="me-img" title="hi there" src={meImg} alt="Deniz, the website developer, small and pixelated">↫ me </h3>
-
-            <p>Hi! I'm Deniz. I'm a programmer, sometimes a music producer, and student from Northern Germany. Welcome to my webpage!</p>
-
-            <p>I share my projects on this website. Check them out – the devlog of the game I'm working on especially!</p>
-
-            <h3>where to find me</h3>
-
-            <LinkList entries={[
-                {
-                    icon: "icons/bluesky.svg",
-                    text: "Bluesky",
-                    link: "https://bsky.app/profile/denizk0461.dev",
-                },
-                {
-                    icon: "icons/codeberg.svg",
-                    text: "Codeberg",
-                    link: "https://codeberg.org/denizk0461",
-                },
-                {
-                    icon: "icons/github.svg",
-                    text: "GitHub",
-                    link: "https://github.com/denizk0461",
-                },
-            ]}/>
-
-            <GamedevWebring />
-        </div>
+    <div class="quote-marquee-container">
+        {@render marqueeContent({quote: marqueeQuote, ignoreA11y: false})}
+        {@render marqueeContent({quote: marqueeQuote, ignoreA11y: true})}
+        {@render marqueeContent({quote: marqueeQuote, ignoreA11y: true})}
     </div>
+
+    <h3>about ↬<img id="me-img" class="me-img" title="hi there" src={meImg} alt="Deniz, the website developer, small and pixelated">↫ me </h3>
+
+    <p>Hi! I'm Deniz. I'm a programmer, sometimes a music producer, and student from Northern Germany. Welcome to my webpage! I share my projects on this website. Check them out – the devlog of the game I'm working on especially!</p>
+
+    <h3>where to find me</h3>
+
+    <LinkList entries={[
+        {
+            icon: "icons/bluesky.svg",
+            text: "Bluesky",
+            link: "https://bsky.app/profile/denizk0461.dev",
+        },
+        {
+            icon: "icons/codeberg.svg",
+            text: "Codeberg",
+            link: "https://codeberg.org/denizk0461",
+        },
+        {
+            icon: "icons/github.svg",
+            text: "GitHub",
+            link: "https://github.com/denizk0461",
+        },
+    ]}/>
+
+    <GamedevWebring />
+
+    <Gallery entries={galleryEntries} />
 </Content>
 
 {#snippet marqueeContent({quote, ignoreA11y}: {quote: Quote, ignoreA11y: boolean})}
@@ -119,24 +112,17 @@
 {/snippet}
 
 <style>
-    .container {
-        display: flex;
-        flex-direction: row;
-        justify-content: center;
-    }
-    .subcontainer {
-        max-width: 50%;
-    }
-    .subcontainer:last-child {
-        margin-left: 16px;
-    }
     .me-img {
         width: 32px;
         display: inline-block;
     }
 
     .gradient-title {
-        background: -webkit-linear-gradient(0deg, #96C9DC, #9CE391, #E03E59);
+        background: linear-gradient(
+            90deg,
+            var(--color-highlight) 30%,
+            var(--color-highlight-alt) 90%
+        );
         background-clip: text;
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
@@ -173,18 +159,4 @@
             transform: translateX( -100% );
         }
     }
-
-    @media screen and (max-width: 800px) {
-        .container {
-            flex-direction: column-reverse;
-        }
-        
-        .subcontainer {
-            max-width: 100%;
-        }
-
-        .subcontainer:last-child {
-            margin-left: 0px;
-        }
-    }
 </style>
\ No newline at end of file
diff --git a/src/routes/projects/projectn5/devlog/[year]/[date]/+page.svelte b/src/routes/projects/projectn5/devlog/[year]/[date]/+page.svelte
index 9c611bc..9bce89f 100644
--- a/src/routes/projects/projectn5/devlog/[year]/[date]/+page.svelte
+++ b/src/routes/projects/projectn5/devlog/[year]/[date]/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-    import BannerTitleAlt from "$lib/banner-title-alt.svelte";
+    import Banner2 from "$lib/banner2.svelte";
     import Content from "$lib/content.svelte";
     import TableOfContents from "$lib/table-of-contents.svelte";
 
@@ -11,15 +11,15 @@
     <meta name="description" content="{data.description}">
 </svelte:head>
 
-<BannerTitleAlt
-    title="{data.title}"
-    subtitle="Project N5 Devlog"
-    date="{data.date}"
-    banner="preview.webp"
-    bannerAlt="{data.bannerAlt}"    
-/>
+<Content>
 
-<Content useContentWidth>
+    <Banner2
+        title="{data.title}"
+        subtitle="Project N5 Devlog"
+        date="{data.date}"
+        banner="preview.webp"
+        bannerAlt="{data.bannerAlt}"    
+    />
 
     <TableOfContents disableStickyScrolling />
 
diff --git a/static/fonts/space-mono/bold.ttf b/static/fonts/space-mono/bold.ttf
deleted file mode 100644
index 7c38f23..0000000
Binary files a/static/fonts/space-mono/bold.ttf and /dev/null differ
diff --git a/static/fonts/space-mono/bolditalic.ttf b/static/fonts/space-mono/bolditalic.ttf
deleted file mode 100644
index b2f1e0d..0000000
Binary files a/static/fonts/space-mono/bolditalic.ttf and /dev/null differ
diff --git a/static/fonts/space-mono/italic.ttf b/static/fonts/space-mono/italic.ttf
deleted file mode 100644
index 3845e17..0000000
Binary files a/static/fonts/space-mono/italic.ttf and /dev/null differ
diff --git a/static/fonts/space-mono/regular.ttf b/static/fonts/space-mono/regular.ttf
deleted file mode 100644
index 8bf82ce..0000000
Binary files a/static/fonts/space-mono/regular.ttf and /dev/null differ