improved mobile browser functionality

styles.css

@@ -129,30 +129,31 @@ body {
 
 .modal-content {
     background-color: #fefefe;
-    margin: 15% auto;
+    margin: 10% auto; /* Adjust margin for mobile */
     padding: 20px;
     border: 1px solid #888;
-    width: 80%;
+    width: 90%; /* Adjust width for mobile */
     max-width: 600px;
     text-align: center;
-    white-space: nowrap; /* Prevent word wrapping */
+    box-sizing: border-box;
 }
 
 .modal-content ul {
-    list-style-type: disc; /* Use bullet points */
-    padding-left: 40px; /* Add some padding for the bullets */
-    text-align: left; /* Align text left within the list */
-    display: inline-block; /* Center the list container */
+    list-style-type: disc;
+    padding-left: 20px; /* Reduce padding for mobile */
+    text-align: left;
+    display: inline-block;
+    white-space: normal; /* Allow wrapping */
 }
 
 .modal-content li {
-    text-align: left; /* Ensure individual list items are left-aligned */
-    margin-bottom: 10px; /* Add some spacing between list items */
+    text-align: left;
+    margin-bottom: 10px;
 }
 
 .modal-content button {
     display: block;
-    margin: 20px auto 0 auto; /* Center the button */
+    margin: 20px auto 0 auto;
     padding: 10px 20px;
     font-size: 1em;
     cursor: pointer;
@@ -173,3 +174,23 @@ body {
     text-decoration: none;
     cursor: pointer;
 }
+
+/* Responsive adjustments */
+@media (max-width: 600px) {
+    .modal-content {
+        margin: 5% auto; /* Adjust margin for smaller screens */
+        padding: 10px;
+        width: 95%; /* Adjust width for smaller screens */
+    }
+
+    #word-display {
+        font-size: 1.5em; /* Adjust font size for smaller screens */
+    }
+
+    #letters button {
+        padding: 5px;
+        width: 30px;
+        height: 30px;
+        font-size: 0.8em; /* Adjust button size for smaller screens */
+    }
+}