Update index.html

index.html

@@ -7,51 +7,45 @@
     <style>
         /* Basic styles for the body */
         body {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* A clean, modern font */
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
             margin: 0;
             padding: 0;
-            /* Solid sky blue background */
-            background-color: #add8e6; /* A common light blue/skyblue color */
-            color: #333; /* Dark grey for text */
-            min-height: 100vh; /* Ensure background covers the full viewport height */
-            box-sizing: border-box; /* Include padding/border in total element size */
+            background-color: #add8e6;
+            color: #333;
+            min-height: 100vh;
+            box-sizing: border-box;
         }
 
-        /* Container to center content and add padding */
+        /* Container for centering content */
         .container {
-            max-width: 1200px; /* Maximum width of the content area */
-            margin: 20px auto; /* Center the container and add space above/below */
-            padding: 0 20px; /* Add padding on the sides */
-            text-align: center; /* Center the heading */
+            max-width: 100vw; /* Full viewport width */
+            margin: 0 auto; /* Center the container */
+            padding: 0; /* No extra padding on sides */
+            text-align: center;
         }
 
         /* Styling for the main heading */
         h2 {
-            color: #00796b; /* Darker teal/aqua color */
-            margin-top: 0;
-            margin-bottom: 20px;
-            text-shadow: 1px 1px 2px rgba(0,0,0,0.1); /* Subtle text shadow */
+            color: #00796b;
+            margin: 10px 0;
+            text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
+            background-color: #e0f2f1; /* Light teal background for the heading */
+            padding: 10px 0; /* Space above and below the heading */
         }
 
-       /* Styling for the iframe */
-/* Styling for the iframe - Full Width Expansion */
-/* Styling for the iframe - Almost Full Width with Minimal Spacing */
-iframe {
-    display: block;
-    width: calc(100vw - 20px); /* Full viewport width minus 20px total */
-    height: 90vh; /* 90% of viewport height */
-    margin-left: auto;
-    margin-right: auto;
-    border: 2px solid #00796b;
-    box-shadow: 0 6px 12px rgba(0,0,0,0.25);
-    border-radius: 8px;
-    overflow: hidden;
-    background-color: #fff;
-    box-sizing: border-box;
-}
-
-
-
+        /* Styling for the iframe with minimal spacing */
+        iframe {
+            display: block;
+            width: calc(100vw - 10px); /* Almost full width, 5px spacing on each side */
+            height: 92vh; /* Slightly taller height */
+            margin: 0 auto;
+            border: 2px solid #00796b;
+            box-shadow: 0 6px 12px rgba(0,0,0,0.25);
+            border-radius: 8px;
+            overflow: hidden;
+            background-color: #fff;
+            box-sizing: border-box;
+        }
 
         /* Styling for fallback text (if iframe is not supported) */
         .fallback-message {
@@ -61,7 +55,7 @@ iframe {
         }
 
         .fallback-message a {
-            color: #00796b; /* Match heading color */
+            color: #00796b;
             text-decoration: none;
         }
 
@@ -89,4 +83,4 @@ iframe {
     </div>
 
 </body>
-</html>
+</html>