Update index.html

index.html

@@ -24,20 +24,29 @@
         
         #ui-overlay {
             position: fixed;
-            top: 0; /* Align to top of the page */
-            left: 50%; /* Start from horizontal center */
-            transform: translateX(-50%); /* Center horizontally */
-            width: auto; /* Adjust width as needed */
+            top: 0;
+            left: 0;
+            width: 100%; /* Take full width of the screen */
             pointer-events: none;
             z-index: 100;
             color: white;
-            padding: 2rem;
+            padding: 1rem;
             box-sizing: border-box;
             display: flex;
             flex-direction: column;
             align-items: center; /* Center items horizontally */
-            justify-content: flex-start; /* Align items to the top */
+            justify-content: flex-start;
+            text-align: center; /* For better alignment on mobile */
         }
+        
+        /* Optional: make text size and padding adjust on smaller screens */
+        @media (max-width: 600px) {
+            #ui-overlay {
+                padding: 0.5rem;
+                font-size: 0.9rem;
+            }
+        }
+
 
         
         .title {