edited style and added games page

src/lib/header.svelte

@@ -1,39 +1,89 @@
-<div class="center-stuff">
+<!-- <div class="center-stuff">
     <p class="banner-text" style="margin-right: 8px;">denizk0461's</p>
     <a class="banner-image" href="/">
-        <img src="/favicon.webp"/>
+        <img src="/favicon.webp" alt="Favicon">
     </a>
     <p class="banner-text" style="margin-left: 8px;">website</p>
+</div> -->
+
+<div class="header-container">
+    <div class="header-content">
+        <a class="favicon" href="/">
+            <img class="favicon-image" src="/favicon.webp" alt="Favicon">
+        </a>
+        <div class="links">
+            <span>»</span>
+            <a href="/projects">Projects</a>
+            <span> // </span>
+            <a href="/games">Games</a>
+            <span>«</span>
+        </div>
+    </div>
 </div>
 
 <style>
-    @keyframes header-text-anim {
-        0% { color: #96C9DC; }
-        33% { color: #9CE391; }
-        66% { color: #E03E59;}
-        100% { color: #96C9DC; }
+    .header-container {
+        margin: 0 0 ;
+        padding: 0;
+        background-color: transparent;
     }
-    .center-stuff {
-        width: fit-content;
+
+    .header-content {
         display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
         align-items: center;
+        max-width: var(--page-width);
+        margin: 0 auto;
+        padding: 0 24px;
+    }
+
+    .favicon {
+        margin: 8px 0;
+        background: url("/favicon.webp");
+    }
+
+    .favicon-image {
+        width: initial;
+        max-height: 32px;
+    }
+
+    .links {
         margin-left: auto;
-        margin-right: auto;
+        margin-right: 0;
+
+        padding: 12px 24px;
+        background-color: var(--color-background-highlight-hover);
+        clip-path: polygon(
+            12px 0%,
+            100% 0%,
+            calc(100% - 12px) 100%,
+            0% 100%,
+            12px 0%
+        );
     }
-    .banner-image {
-        width: 64px;
-        margin-top: 16px;
-        margin-bottom: 16px;
-    }
-    .banner-text {
-        width: fit-content;
-        font-family: 'Space Mono', monospace;
+
+    a, span {
+        font-family: var(--font-title);
+        font-size: 1rem;
         font-weight: 700;
-        color: var(--color-highlight);
-        margin: 0px 24px;
-        animation-name: header-text-anim;
-        animation-duration: 2.13333333333s;
-        animation-iteration-count: infinite;
-        animation-timing-function: linear;
+        color: var(--color-text);
+    }
+
+    a {
+        text-decoration: none;
+        transition: 0.2s ease-in-out color;
+    }
+    
+    a:link {
+        color: var(--color-text);
+    }
+    /* visited link */
+    a:visited {
+        color: var(--color-text);
+    }
+    /* mouse over link */
+    a:hover {
+        color: var(--color-text-dark);
     }
 </style>