fixes

src/components/Hero.astro

@@ -5,15 +5,17 @@ import Navbar from "./Navbar.astro";
 <div
   class="h-screen bg-[url('/background_simplified.svg')] bg-center p-8 sm:justify-normal sm:bg-cover"
 >
-  <div class="w-full backdrop-blur-md"><Navbar /></div>
+  <div class="fixed top-10 z-50 box-content w-full backdrop-blur-md">
+    <Navbar />
+  </div>
   <div
-    class="flex h-full flex-col justify-between p-4 pt-24 sm:justify-normal sm:gap-24"
+    class="flex h-full flex-col justify-between overflow-hidden p-4 pt-36 sm:justify-normal sm:gap-24 sm:pt-24"
   >
     <div class="z-10">
       <h1
-        class="text-5xl font-extrabold tracking-tight drop-shadow-2xl md:text-8xl lg:text-9xl"
+        class="text-title font-extrabold leading-tight tracking-tight drop-shadow-2xl sm:text-7xl sm:leading-normal md:text-8xl lg:text-9xl"
       >
-        DELTAHACKS<span class="text-rose-600">X</span>
+        DELTA<wbr />HACKS<span class="text-rose-600">X</span>
       </h1>
       <!-- RGBA(231, 34, 80, 1) -->
       <p
@@ -26,7 +28,7 @@ import Navbar from "./Navbar.astro";
 
     <!-- RGBA(19, 77, 84, 1) -->
     <div
-      class="z-10 flex w-full flex-col gap-4 text-center text-xl font-semibold sm:w-1/2 sm:flex-row"
+      class="z-10 flex w-full flex-col gap-4 text-center text-xl font-semibold sm:w-3/4 sm:flex-row lg:w-1/2"
     >
       <a
         href="https://portal.deltahacks.com/"

src/components/Navbar.astro

@@ -3,13 +3,13 @@ import { Image } from "astro:assets";
 ---
 
 <div
-  class="align-center flex h-16 w-full justify-between bg-[#19333A] bg-opacity-40 px-6 pt-4 backdrop-blur-xl md:px-8"
+  class="align-center flex h-16 justify-between bg-[#19333A] bg-opacity-40 px-6 py-4 backdrop-blur-xl md:px-8"
 >
   <div class="w-12 pt-1">
     <Image width="24" height="24" class="h-6" src="/nav_logo.svg" alt="logo" />
   </div>
   <div
-    class="hidden w-1/2 justify-between text-lg text-white md:flex xl:text-2xl"
+    class="hidden w-full justify-between px-12 text-lg text-white md:flex lg:w-1/2 lg:px-0 xl:text-2xl"
   >
     <p>About</p>
     <p>Statistics</p>
@@ -47,7 +47,7 @@ import { Image } from "astro:assets";
       /></a
     >
   </div>
-  <div class="flex pt-1 md:hidden">
+  <div class="flex md:hidden">
     <Image width="24" height="24" src="/nav_sizing.svg" alt="NAV" />
   </div>
 </div>

tailwind.config.cjs

@@ -14,6 +14,9 @@ module.exports = {
         "dh-blue": "#2D9AEA",
       },
     },
+    fontSize: {
+      title: "2.5rem",
+    },
   },
   plugins: [require("tailwindcss-text-fill-stroke")()],
 };