diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 336effd..5667969 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,319 +1,291 @@
 <!-- If url contains "hideOnPrint" param, then detect if start printing then hide elements -->
 <script lang="ts">
-  import "../app.css";
-  import { fly } from "svelte/transition";
-  import MediaQuery from "svelte-media-queries";
-  import { Dices } from "@lucide/svelte";
-  let hideOnPrint: boolean;
+    import "../app.css";
+    import { fly } from 'svelte/transition';
+    import MediaQuery from 'svelte-media-queries';
+    import { Dices } from "@lucide/svelte";
+    let hideOnPrint: boolean;
 
-  let { children } = $props();
+    let { children } = $props();
 
-  import DeprivedLogo from "$lib/images/DeprivedLogo.svelte";
-  import HamburgerMenuIcon from "$lib/images/HamburgerMenuIcon.svelte";
+    import DeprivedLogo from "$lib/images/DeprivedLogo.svelte";
+    import HamburgerMenuIcon from "$lib/images/HamburgerMenuIcon.svelte";
 
-  const footerCollapseThreshold: string = "1000px";
-  const headerCollapseThreshold: string = "1000px";
-  let footerCollapse: boolean;
-  let isMobile: boolean = $state(false);
+    const footerCollapseThreshold : string = '1000px';
+    const headerCollapseThreshold : string = '1000px';
+    let footerCollapse : boolean;
+    let isMobile : boolean = $state(false);
 
-  let navbarHidden: boolean = $state(true);
+    let navbarHidden : boolean = $state(true);
 
-  function resetNavBar() {
-    navbarHidden = true;
-  }
-
-  import { afterNavigate } from "$app/navigation";
-  afterNavigate(() => {
-    const params = new URLSearchParams(window.location.search);
-    hideOnPrint = params.get("hideOnPrint") === "1";
-    //console.log(hideOnPrint);
-  });
-
-  import { onMount } from "svelte";
-  import Zooter from "./comps/Zooter.svelte";
-
-  onMount(async () => {
-    const lock = document.createElement("meta");
-    lock.name = "darkreader-lock";
-    document.head.appendChild(lock);
-  });
-
-  function nextTheme() {
-    let theme: string | null = null;
-
-    if (typeof localStorage !== "undefined") {
-      theme = localStorage.getItem("theme");
+    function resetNavBar() {
+        navbarHidden = true;
     }
 
-    const themesArr = (window as any).AvailableThemes;
-    let nextTheme = "dark";
-    if (
-      theme == "null" ||
-      theme == "undefined" ||
-      theme == undefined ||
-      theme == null
-    ) {
-    } else {
-      nextTheme = themesArr[(1 - -themesArr.indexOf(theme)) % themesArr.length];
+    import { afterNavigate } from '$app/navigation';
+    afterNavigate(() => {
+        const params = new URLSearchParams(window.location.search);
+        hideOnPrint = params.get('hideOnPrint') === '1';
+        //console.log(hideOnPrint);
+    });
+
+    import { onMount } from 'svelte';
+    import Zooter from "./comps/Zooter.svelte";
+    
+    onMount(async () => {
+        const lock = document.createElement('meta');
+        lock.name = 'darkreader-lock';
+        document.head.appendChild(lock);
+    });
+
+    function nextTheme(){
+        let theme: string | null = null;
+
+        if (typeof localStorage !== 'undefined') {
+            theme = localStorage.getItem('theme');
+        }
+
+        const themesArr = (window as any).AvailableThemes;
+        let nextTheme = "dark";
+        if (theme == "null" || theme == "undefined" || theme == undefined || theme == null){
+
+        } else {
+            nextTheme = themesArr[(1 - -themesArr.indexOf(theme)) % themesArr.length];
+        }
+
+        console.log("Slecting: " + nextTheme);
+        document.documentElement.setAttribute('data-theme', nextTheme);
+        localStorage.setItem('theme', nextTheme);
     }
 
-    console.log("Slecting: " + nextTheme);
-    document.documentElement.setAttribute("data-theme", nextTheme);
-    localStorage.setItem("theme", nextTheme);
-  }
+    
 </script>
 
 {#snippet SwitchThemeButton()}
-  <div
-    class="tooltip tooltip-bottom grid place-content-center"
-    data-tip="Switch theme"
-  >
-    <button class="cursor-pointer" onclick={nextTheme}> <Dices /></button>
-  </div>
+<div class="tooltip tooltip-bottom grid place-content-center" data-tip="Switch theme">
+    <button class="cursor-pointer" onclick={nextTheme}> <Dices/></button>
+</div>
 {/snippet}
 
 <!-- Detect mobile -->
-<MediaQuery
-  query="(max-width: {footerCollapseThreshold})"
-  bind:matches={footerCollapse}
-/>
-<MediaQuery
-  query="(max-width: {headerCollapseThreshold})"
-  bind:matches={isMobile}
-/>
+<MediaQuery query='(max-width: {footerCollapseThreshold})' bind:matches={footerCollapse} />
+<MediaQuery query='(max-width: {headerCollapseThreshold})' bind:matches={isMobile} />
 
 <!-- Nav bar -->
 <div class="bg-base-200 p-0">
-  <header class="{hideOnPrint ? 'hide-on-print' : ''} bg-base-300">
-    <div class="nav-bar pr-4">
-      {#if !isMobile}
-        <div class="desktop">
-          <a href="/" class="nav-head">
-            <DeprivedLogo
-              Class="fill-base-content p-2"
-              Style="width: 3.5rem; height: auto;"
-            />
-            <!-- <h3 id="logo-text">The Deprived Devs</h3> -->
-          </a>
-          <div class="nav-spacer" />
+    <header class="{hideOnPrint ? 'hide-on-print' : ''} bg-base-300">
+        <div class="nav-bar pr-4">
+            {#if !isMobile}
+                <div class="desktop">
+                    <a href="/" class="nav-head">
+                        <DeprivedLogo Class="fill-base-content p-2" Style="width: 3.5rem; height: auto;"/>
+                        <!-- <h3 id="logo-text">The Deprived Devs</h3> -->
+                    </a>
+                    <div class="nav-spacer" />
 
-          <!-- <a href="/">Home</a> -->
-          <!-- <a href="/zhen/notes/physics/1?hideOnPrint=1" target="_blank" style="width: 7.5rem;">Notes</a> -->
+                    <!-- <a href="/">Home</a> -->
+                    <!-- <a href="/zhen/notes/physics/1?hideOnPrint=1" target="_blank" style="width: 7.5rem;">Notes</a> -->
 
-          {@render SwitchThemeButton()}
-
-          <a
-            href="/zhen/cv/rev2?hideOnPrint=1"
-            target="_blank"
-            style="width: 7.5rem;">Zhen CV</a
-          >
-          <a href="/tools" style="width: 7.5rem;">Tools</a>
-          <a href="https://botalex.itch.io/" target="_blank">Games</a>
-          <!-- <a href="/posts">Blog</a>
+                    {@render SwitchThemeButton()}
+                    
+                    <a href="/zhen/cv/rev2?hideOnPrint=1" target="_blank" style="width: 7.5rem;">Zhen CV</a>
+                    <a href="/tools" style="width: 7.5rem;">Tools</a>
+                    <a href="https://botalex.itch.io/" target="_blank">Games</a>
+                    <!-- <a href="/posts">Blog</a>
                     <a href="/about">About</a> -->
-        </div>
-      {:else}
-        <div class="collapsed shadow-xl">
-          <a onclick={resetNavBar} href="/" class="nav-head">
-            <DeprivedLogo
-              Class="fill-base-content p-2"
-              Style="width: 3.5rem; height: auto;"
-            />
-            <!-- <h3 id="logo-text">The Deprived Devs</h3> -->
-          </a>
-          <div class="nav-spacer" />
-          {@render SwitchThemeButton()}
-          <div class="px-1"></div>
-          <button
-            id="toggle-nav"
-            onclick={() => {
-              navbarHidden = !navbarHidden;
-              console.log(navbarHidden);
-            }}
-          >
-            <HamburgerMenuIcon Class="fill-base-content" />
-          </button>
-        </div>
-        {#if !navbarHidden}
-          <div class="nav-list" transition:fly={{ y: -25, duration: 350 }}>
-            <!-- <a onclick={resetNavBar} href="/">Home</a> -->
-            <a
-              onclick={resetNavBar}
-              href="https://botalex.itch.io/"
-              target="_blank">Games</a
-            >
-            <a href="/zhen/cv/rev2?hideOnPrint=1" target="_blank">Zhen's CV</a>
-            <!-- <a onclick={resetNavBar} href="/posts">Blog</a>
+                </div>
+            {:else}
+                <div class="collapsed shadow-xl">
+                    <a onclick={resetNavBar} href="/" class="nav-head">
+                        <DeprivedLogo Class="fill-base-content p-2" Style="width: 3.5rem; height: auto;"/>
+                        <!-- <h3 id="logo-text">The Deprived Devs</h3> -->
+                    </a>
+                    <div class="nav-spacer" />
+                    {@render SwitchThemeButton()}
+                    <div class="px-1"></div>
+                    <button id="toggle-nav" onclick={() => {navbarHidden = !navbarHidden; console.log(navbarHidden);}}>
+                        <HamburgerMenuIcon Class="fill-base-content"/>
+                    </button>
+                </div>
+                {#if !navbarHidden}
+                <div class="nav-list" transition:fly={{ y: -25, duration: 350 }}>
+                    <!-- <a onclick={resetNavBar} href="/">Home</a> -->
+                    <a onclick={resetNavBar} href="https://botalex.itch.io/" target="_blank">Games</a>
+                    <a href="/zhen/cv/rev2?hideOnPrint=1" target="_blank">Zhen's CV</a>
+                        <!-- <a onclick={resetNavBar} href="/posts">Blog</a>
                         <a onclick={resetNavBar} href="/about">About</a> -->
-          </div>
-        {/if}
-      {/if}
-    </div>
-  </header>
+                    </div>
+                {/if}
+            {/if}
+        </div>
+    </header>
+    
+    <!-- Page content -->
+    {@render children?.()}
 
-  <!-- Page content -->
-  {@render children?.()}
-
-  <Zooter bind:hideOnPrint />
+    <Zooter bind:hideOnPrint/>
 </div>
 
-{#if footerCollapse}
-  <style>
-    .about-container {
-      flex-direction: column;
-      justify-content: center !important;
-      gap: 25px;
+
+<style lang="scss">
+    /* Nav bar. */
+    header {
+        display: flex;
+        justify-content: center;
     }
-  </style>
+
+    header a {
+        text-decoration: none;
+    }
+
+    .nav-bar {
+        width: 100%;
+        max-width: 1400px;
+    }
+
+    .desktop {
+        width: 100%;
+        display: flex;
+        gap: 30px;
+    }
+
+    .collapsed {
+        width: 100%;
+        display: flex;
+    }
+
+    #toggle-nav {
+        background: transparent;
+        border: none;
+    }
+
+
+    .nav-list {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+
+        align-items: center;
+    }
+
+    .nav-head {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+    }
+
+    #logo-link {
+        width: 64px;
+        aspect-ratio: 1 / 1;
+    }
+
+    #logo-text {
+        font-size: 24px;
+        color: oklch(var(--bc));
+        font-family: var(--title-font);
+        margin: 0;
+
+        min-width: 200px;
+    }
+
+    .nav-spacer {
+        width: 100%;
+    }
+
+    header a {
+        display: flex;
+        align-items: center;
+
+        font-size: 22px;
+        font-family: var(--title-font);
+        // Text color
+        color: oklch(var(--bc));
+    }
+
+    /* Footer. */
+    footer {
+        margin-top: 50px;
+        padding: 25px 0;
+        background-color: oklch(var(--b3));
+
+        height: 100%;
+
+        display: flex;
+        justify-content: center;
+    }
+
+    .about-container {
+        width: 80%;
+        height: 100%;
+
+        color: oklch(var(--bc));
+
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-evenly;
+
+        & h3 {
+            font-size: larger;
+        }
+    }
+
+    .about-container > div {
+        align-items: center;
+        text-align: center;
+    }
+
+    .credits {
+        line-height: 2;
+    }
+
+    .contact {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .social {
+        display: flex;
+        align-content: center;
+        gap: 10px;
+    }
+
+    .social > img {
+        width: 24px;
+    }
+
+    footer h3 {
+        margin-top: 0px;
+        color: var(--text2);
+    }
+
+    footer a {
+        color: var(--text2);
+        text-decoration-line: underline;
+    }
+
+    a:hover {
+        filter: brightness(130%);
+    }
+
+    @media print {
+    .hide-on-print {
+        display: none;
+    }
+}
+</style>
+
+{#if footerCollapse}
+    <style>
+        .about-container {
+            flex-direction: column;
+            justify-content: center !important;
+            gap: 25px;
+        }
+    </style>
 {/if}
 
 {#if isMobile}
-  <style>
-  </style>
+    <style>
+
+    </style>
 {/if}
-
-<style lang="scss">
-  /* Nav bar. */
-  header {
-    display: flex;
-    justify-content: center;
-  }
-
-  header a {
-    text-decoration: none;
-  }
-
-  .nav-bar {
-    width: 100%;
-    max-width: 1400px;
-  }
-
-  .desktop {
-    width: 100%;
-    display: flex;
-    gap: 30px;
-  }
-
-  .collapsed {
-    width: 100%;
-    display: flex;
-  }
-
-  #toggle-nav {
-    background: transparent;
-    border: none;
-  }
-
-  .nav-list {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-
-    align-items: center;
-  }
-
-  .nav-head {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-  }
-
-  #logo-link {
-    width: 64px;
-    aspect-ratio: 1 / 1;
-  }
-
-  #logo-text {
-    font-size: 24px;
-    color: oklch(var(--bc));
-    font-family: var(--title-font);
-    margin: 0;
-
-    min-width: 200px;
-  }
-
-  .nav-spacer {
-    width: 100%;
-  }
-
-  header a {
-    display: flex;
-    align-items: center;
-
-    font-size: 22px;
-    font-family: var(--title-font);
-    // Text color
-    color: oklch(var(--bc));
-  }
-
-  /* Footer. */
-  footer {
-    margin-top: 50px;
-    padding: 25px 0;
-    background-color: oklch(var(--b3));
-
-    height: 100%;
-
-    display: flex;
-    justify-content: center;
-  }
-
-  .about-container {
-    width: 80%;
-    height: 100%;
-
-    color: oklch(var(--bc));
-
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-evenly;
-
-    & h3 {
-      font-size: larger;
-    }
-  }
-
-  .about-container > div {
-    align-items: center;
-    text-align: center;
-  }
-
-  .credits {
-    line-height: 2;
-  }
-
-  .contact {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .social {
-    display: flex;
-    align-content: center;
-    gap: 10px;
-  }
-
-  .social > img {
-    width: 24px;
-  }
-
-  footer h3 {
-    margin-top: 0px;
-    color: var(--text2);
-  }
-
-  footer a {
-    color: var(--text2);
-    text-decoration-line: underline;
-  }
-
-  a:hover {
-    filter: brightness(130%);
-  }
-
-  @media print {
-    .hide-on-print {
-      display: none;
-    }
-  }
-</style>