Fix header layout on main page to keep theme toggle right-aligned

- Add proper flexbox styling for .header-content to space items correctly
- Style .header-text with flex: 1 to take available space on left
- Position theme toggle button on the right side of header row
- Add responsive mobile layout that stacks header vertically
- Center header text and theme toggle on mobile devices
- Maintain proper spacing and visual hierarchy at all screen sizes

src/scss/pages/_index.scss

@@ -10,12 +10,59 @@
 }
 
 .header {
-  @include flex-between;
   margin-bottom: $spacing-lg;
   padding: $spacing-md 0;
   border-bottom: 1px solid var(--border-color);
 }
 
+.header-content {
+  @include flex-between;
+  align-items: flex-start;
+  gap: $spacing-lg;
+}
+
+.header-text {
+  flex: 1;
+  
+  h1 {
+    color: var(--text-color);
+    font-size: $font-size-xxl;
+    margin: 0 0 $spacing-xs 0;
+  }
+  
+  p {
+    color: var(--text-color);
+    opacity: 0.8;
+    margin: 0;
+    font-size: $font-size-md;
+  }
+}
+
+// Responsive header
+@include mobile {
+  .header-content {
+    flex-direction: column;
+    align-items: stretch;
+    gap: $spacing-md;
+  }
+  
+  .header-text {
+    text-align: center;
+    
+    h1 {
+      font-size: $font-size-xl;
+    }
+    
+    p {
+      font-size: $font-size-sm;
+    }
+  }
+  
+  .theme-toggle {
+    align-self: center;
+  }
+}
+
 .title {
   color: var(--text-color);
   font-size: $font-size-xxl;