x

index.html

@@ -146,38 +146,55 @@ body {
     font-family: 'Courier New', Courier, monospace; /* Monospace font for all text */
 }
 
-       .video-modal {
-            display: none; /* Hidden by default */
-            position: fixed; /* Stay in place */
-            z-index: 1000; /* Sit on top */
-            left: 0;
-            top: 0;
-            width: 100%; /* Full width */
-            height: 100%; /* Full height */
-            overflow: auto; /* Enable scroll if needed */
-            background-color: rgb(0,0,0); /* Fallback color */
-            background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
-        }
-        .video-modal-content {
-            position: fixed;
-            background-color: #fefefe;
-            margin: 15% auto; /* 15% from the top and centered */
-            padding: 20px;
-            border: 1px solid #888;
-            width: 80%; /* Could be more or less, depending on screen size */
-        }
-        .close {
-            color: #aaa;
-            float: right;
-            font-size: 28px;
-            font-weight: bold;
-        }
-        .close:hover,
-        .close:focus {
-            color: black;
-            text-decoration: none;
-            cursor: pointer;
-        }
+.video-modal {
+    display: none; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 1000; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+}
+
+.video-modal-content {
+    position: fixed;
+    top: 10%; /* Adjusted for better vertical alignment */
+    left: 5%; /* Centering the modal on mobile */
+    width: 90%; /* Full width on mobile */
+    background-color: #fefefe;
+    padding: 20px;
+    border: 1px solid #888;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow for better visibility */
+}
+
+.close {
+    position: absolute;
+    right: 20px; /* More accessible position */
+    top: 20px;
+    font-size: 28px; /* Larger clickable area */
+    color: #aaa;
+    cursor: pointer;
+}
+
+.close:hover,
+.close:focus {
+    color: black;
+    text-decoration: none;
+}
+
+
+        @media (max-width: 600px) {
+    .video-modal-content {
+        padding: 10px;
+        font-size: 14px; /* Smaller font size for very small devices */
+    }
+    .close {
+        font-size: 24px; /* Smaller close button on very small devices */
+    }
+}
+
 
 .hidden { display: none; }
 .flex { display: flex; }