styles/header.css

@@ -260,7 +260,12 @@ button:active {
 /* Responsive Design */
 @media (max-width: 768px) {
     :root {
-        --header-height: 180px;
+        --header-height: 140px;
+        --space-xs: 0.2rem;
+        --space-sm: 0.4rem;
+        --space-md: 0.75rem;
+        --space-lg: 1rem;
+        --space-xl: 1.25rem;
     }
 
     .header {
@@ -272,23 +277,48 @@ button:active {
         padding: var(--space-md);
     }
 
+    .dictionary-section h3 {
+        font-size: 1.25rem;
+    }
+
+    .dictionary-section p {
+        font-size: 0.875rem;
+    }
+
     input[type=text] {
         max-width: 100%;
     }
 }
 
 @media (max-width: 480px) {
+    :root {
+        --header-height: 120px;
+        --space-xs: 0.15rem;
+        --space-sm: 0.35rem;
+        --space-md: 0.65rem;
+        --space-lg: 0.85rem;
+        --space-xl: 1rem;
+    }
+
     .header a {
-        font-size: 0.9rem;
+        font-size: 0.85rem;
         padding: var(--space-xs);
     }
 
+    .dictionary-section h3 {
+        font-size: 1.1rem;
+    }
+
+    .dictionary-section p {
+        font-size: 0.8rem;
+    }
+
     input[type=button],
     input[type=submit],
     input[type=reset],
     button {
         padding: var(--space-sm) var(--space-md);
-        font-size: 0.9rem;
+        font-size: 0.85rem;
     }
 }
 </style>