diff --git a/assets/css/main.css b/assets/css/main.css
index da6cce1..55ca60c 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -145,10 +145,7 @@ img {
     @apply duration-200 transition-all;
 }
 .web-header.web-header-bg {
-    .web-nav-title {
-        @apply text-(--color-cloud-light)
-    }
-    @apply bg-(--color-deep-semidark) text-(--color-cloud-medium);
+    @apply bg-(--ui-bg)/75 backdrop-blur border-b border-(--ui-text)/5;
 }
 .web-header-emit-shadow-when-top.shadow-active {
     @apply shadow-lg;
@@ -221,7 +218,13 @@ p {
     }
 }
 .web-nav-title {
+    --web-nav-title-shadow: 0px 0px 16px var(--ui-bg);
     @apply text-lg font-bold;
+    text-shadow: var(--web-nav-title-shadow),
+    var(--web-nav-title-shadow),
+    var(--web-nav-title-shadow),
+    var(--web-nav-title-shadow),
+    var(--web-nav-title-shadow);
 }
 .web-hero.web-hero-bg, .web-hero-post.web-hero-bg {
     @apply bg-(--color-deep-semidark) text-(--color-cloud-medium);
@@ -264,8 +267,7 @@ p {
 .project-card-container > li, .post-card-container > li, .font-card-container > li { @apply ml-0; }
 .project-card, .font-card, .post-card {
     height: 100%;
-    padding: 0.5rem 1rem 0.5rem 0.5rem;
-    @apply flex flex-col items-center rounded-2xl sm:flex-row sm:gap-4 bg-(--ui-bg-muted) hover:bg-(--ui-bg-elevated) transition-colors duration-100 ease-fluid ml-0;
+    @apply flex flex-col p-2 items-center rounded-2xl sm:flex-row sm:gap-4 bg-(--ui-bg-muted) hover:bg-(--ui-bg-elevated) transition-colors duration-100 ease-fluid ml-0;
     h3 { @apply text-2xl font-bold line-clamp-1; }
     h3,p { z-index: 1; }
     img { @apply mb-2 sm:mb-0 aspect-video object-cover w-full sm:max-w-56 rounded-lg; }
@@ -280,7 +282,7 @@ p {
         height: calc(var(--spacing)*16);
     }
     .project-card-content, .font-card-content, .post-card-content {
-        @apply block w-full;
+        @apply block w-full px-2 sm:px-0;
     }
     &.disabled {
         @apply opacity-50 pointer-events-none cursor-not-allowed;
@@ -296,23 +298,24 @@ p {
     @apply flex md:hidden h-14 w-9 cursor-pointer items-center justify-center hover:bg-(--ui-text)/5 active:bg-(--ui-text)/10 transition-colors duration-100 ease-fluid;
 }
 .hamburger-menu {
-    @apply flex flex-col sticky h-fit left-0 top-14 w-full max-w-(--ui-container) mx-auto z-[1000];
+    transform-origin: top right;
+    @apply flex flex-col sticky h-fit left-0 top-14 w-full max-w-(--ui-container) mx-auto z-[1000] transition-all duration-200 ease-fluid;
     .nav-wrapper {
         list-style-type: none;
         display: flex;
         flex-direction: column;
         margin: 0;
         padding: 0 calc(var(--spacing)*4);
-        padding-top: 1rem;
         width: 100%;
         gap: 6px;
         align-items: end;
-        .nav-link {
+        .nav-link, .nav-button {
+            display: flex;
             font-size: 15px;
             width: 100%;
-            max-width: 24rem;
-            @apply ml-0;
-            a {
+            max-width: 18rem;
+            @apply ml-0 justify-end;
+            a, .hamburger-btn-square {
                 display: flex;
                 align-items: center;
                 width: 100%;
@@ -321,9 +324,25 @@ p {
             a.router-link-exact-active {
                 @apply text-primary;
             }
+            .hamburger-btn-square {
+                @apply aspect-square justify-center;
+                width: unset;
+            }
+        }
+        .nav-button {
+            font-size: 15px;
+            width: 100%;
+            max-width: 18rem;
+            @apply ml-0 justify-end flex;
+        }
+        .nav-button.nav-button-only-desktop {
+            @apply hidden md:flex;
         }
     }
 }
+.hamburger-menu.hamburger-menu-hidden {
+    @apply scale-95 blur opacity-0 invisible;
+}
 .nav-links {
     @apply hidden md:flex;
     height: 100%;