From 2f2035bf35fb5142dfb7f17c843a8d67680dfb57 Mon Sep 17 00:00:00 2001
From: Michael Maurakis <michael.maurakis@gmail.com>
Date: Sun, 19 Jan 2025 23:24:14 -0600
Subject: [PATCH] portrait mode now hides logo and moves fumble to the bottom
 for reachablithy.

---
 styles.css | 34 ++++++++++++++++++++++++++--------
 1 file changed, 26 insertions(+), 8 deletions(-)

diff --git a/styles.css b/styles.css
index c7ecce8..ba5d1db 100644
--- a/styles.css
+++ b/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 {