fix: made things a bit smaller

src/lib/components/atoms/IndexHeroTitle.svelte

@@ -10,7 +10,7 @@
 	h1 {
 		color: var(--white);
 		font-weight: 800;
-        font-size: 6.5rem;
+        font-size: 6rem;
 		letter-spacing: -0.04em;
 	}
 </style>

src/lib/components/molecules/NavHost.svelte

@@ -3,35 +3,46 @@
 	import { page } from '$app/stores';
 </script>
 
-<nav>
-	<a href="/">
-		<div class="logo">
-			<img src="/logo.svg" class="logo-image" alt="ReVanced Logo" />
-
-			{#if $page.url.pathname !== '/'}
-				<h1><span>Re</span>Vanced</h1>
-			{/if}
-		</div>
-	</a>
-	<ul>
-		<Navigation href="/">Home</Navigation>
-		<Navigation href="/download">Download</Navigation>
-		<Navigation href="/docs">Docs</Navigation>
-		<Navigation href="/credits">Credits</Navigation>
-	</ul>
-</nav>
+<div>
+	<nav>
+		<a href="/">
+			<div class="logo">
+				<img src="/logo.svg" class="logo-image" alt="ReVanced Logo" />
+	
+				{#if $page.url.pathname !== '/'}
+					<h1><span>Re</span>Vanced</h1>
+				{/if}
+			</div>
+		</a>
+		<ul>
+			<Navigation href="/">Home</Navigation>
+			<Navigation href="/download">Download</Navigation>
+			<Navigation href="/docs">Docs</Navigation>
+			<Navigation href="/credits">Credits</Navigation>
+		</ul>
+	</nav>
+</div>
 
 <style>
 	nav {
 		width: 100%;
+		position: fixed;
+ 		top: 0;
 		display: flex;
-		padding-top: 0.75rem;
+		padding-top: 1.5rem;
 		padding-right: 3rem;
 		padding-left: 6rem;
+		padding-bottom: 1.5rem;
 		justify-content: space-between;
 		align-items: center;
 		min-height: 90px;
 		user-select: none;
+		background-color: #0f111ab8;
+		backdrop-filter: blur(50px);
+		background-blend-mode: overlay;
+		display: flex;
+		z-index: 99;
+		margin-bottom: 20rem;
 	}
 
 

src/lib/components/molecules/SocialHost.svelte

@@ -15,7 +15,7 @@
         position: absolute;
 		align-items: center;
         bottom: 3rem;
-        left: 4.5rem;
+        left: 5.5rem;
         user-select: none;
     }
 </style>