portrait mode now hides logo and moves fumble to the bottom for

reachablithy.

styles.css

@@ -286,24 +286,40 @@ body {
 }
 
 @media (max-width: 768px) {
+    body {
+        flex-direction: column-reverse;
+    }
+
     header {
         padding: 0.75rem 1rem;
-        flex-direction: column;
-        gap: 1rem;
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background-color: rgba(255, 255, 255, 0.95);
+        backdrop-filter: blur(10px);
+    }
+
+    .dark-mode header {
+        background-color: rgba(26, 26, 26, 0.95);
+    }
+
+    .logo {
+        display: none;
     }
 
     .header-buttons {
         width: 100%;
         justify-content: space-between;
+        margin: 0;
     }
 
-    .logo {
-        font-size: 20px;
+    main {
+        height: 100vh;
     }
 
-    .logo-icon {
-        width: 36px;
-        height: 36px;
+    #contentFrame {
+        height: calc(100% - 60px);  /* Adjust based on header height */
     }
 
     .social-buttons {
@@ -329,14 +345,16 @@ body {
         height: 20px;
     }
 
+    /* Modal adjustments for bottom header */
     .modal-content {
         width: 90%;
         margin: -300px auto 0;
         padding: 15px;
+        margin-bottom: 80px; /* Add space for bottom header */
     }
 
     .modal.show .modal-content {
-        margin-top: 80px;
+        margin-top: 60px;
     }
 
     .modal-content h2 {