Update styles and layout for improved responsiveness and consistency:

- **Global fonts**: Adjusted `font-family` fallback to include `serif`.
- **Header improvements**: Refined structure with flexbox, adjusted heights, and fixed responsive issues (e.g., removed hardcoded margins).
- **New Layout styles**: Added scoped `Layout.css` for better layout control and modularity.
- **Links fix**: Corrected casing in `About` and `Contact` links for proper navigation.

styles/components/Header.css

@@ -7,6 +7,11 @@
     z-index: 1000;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
     backdrop-filter: blur(5px);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.5rem 1rem;
+    height: 70px;
 }
 
 
@@ -34,7 +39,6 @@
 .nav-main {
     display: flex;
     align-items: center;
-    margin-right: 377px;
 }
 
 .nav-main a,
@@ -86,16 +90,8 @@
 }
 
 @media (max-width: 768px) {
-    .nav-container {
-        padding: 1rem;
-    }
-
-    .nav-links {
-        gap: 1rem;
-    }
-    
-    .nav-main {
-        margin-right: 20px;
+    .header {
+        height: 65px;
     }
     
     .logo {
@@ -106,14 +102,16 @@
     .dropdown-content {
         right: 0;
     }
+    
+    .header-spacer {
+        height: 65px;
+    }
 }
 
 @media (max-width: 480px) {
     .header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
         padding: 0.5rem;
+        height: 60px;
     }
     
     .logo {
@@ -121,13 +119,13 @@
         height: 2.5em;
     }
     
-    .nav-main {
-        margin-right: 10px;
-    }
-    
     .nav-main a,
     .dropdbtn {
         margin: 0 0.5rem;
         font-size: 0.9rem;
     }
+    
+    .header-spacer {
+        height: 60px;
+    }
 }