Fix viewport height responsiveness for small windows

- Added responsive behavior for viewports with max-height 600px
- Ensured title visibility when window is resized to quarter-screen (480x270)
- Added flexible hero section padding and positioning
- Reduced font sizes for small viewport heights (h1: 2.8rem, h2: 1.4rem)
- Changed alignment to flex-start with proper padding for small screens
- Maintains centered layout on larger screens while adapting to constrained heights

Author: TheWildJames

style.css

@@ -278,12 +278,23 @@ body {
 /* Hero Section */
 .hero {
     min-height: 100vh;
+    height: auto;
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
     overflow: hidden;
     background: var(--light-gradient);
+    padding: 60px 0;
+}
+
+@media (max-height: 600px) {
+    .hero {
+        min-height: auto;
+        padding: 40px 0;
+        align-items: flex-start;
+        padding-top: 80px;
+    }
 }
 
 .hero::before {
@@ -307,6 +318,14 @@ body {
     flex-direction: column;
     align-items: center;
     justify-content: center;
+    width: 100%;
+}
+
+@media (max-height: 600px) {
+    .hero-content {
+        justify-content: flex-start;
+        padding-top: 20px;
+    }
 }
 
 /* Desktop Hero */
@@ -335,6 +354,18 @@ body {
     line-height: 1.2;
 }
 
+@media (max-height: 600px) {
+    .desktop-hero h1 {
+        font-size: 2.8rem;
+        margin-bottom: 15px;
+    }
+    
+    .desktop-hero h2 {
+        font-size: 1.4rem;
+        margin-bottom: 20px;
+    }
+}
+
 .desktop-hero h2 {
     font-size: 1.8rem;
     font-weight: var(--font-weight-semibold);