Update style.css

style.css

@@ -5,20 +5,21 @@
 }
 
 body {
+    padding: 0; /* Changed from 2rem to 0 to remove outer gaps */
     font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
     display: flex;
     flex-direction: column;
-    min-height: 100vh; /* Ensures body takes full viewport height */
-    background-color: #e6f0fa; /* Light blue background */
+    min-height: 100vh; /* Changed from height to min-height for full screen */
+    background-color: #e6f0fa; /* Light blue background to match the screenshot */
 }
 
 header {
-    background: linear-gradient(90deg, #6b48ff, #00ddeb); /* Gradient */
+    background: linear-gradient(90deg, #6b48ff, #00ddeb); /* Gradient matching the screenshot */
     padding: 1rem 1.5rem;
     display: flex;
     align-items: center;
     gap: 1rem;
-    /* Removed border-radius to make it flush with iframe */
+    border-radius: 12px 12px 0 0; /* Rounded top corners */
 }
 
 .header-text {
@@ -27,25 +28,35 @@ header {
 
 h1 {
     font-size: 16px;
-    margin: 0;
-    color: #ffffff; /* White text */
+    margin-top: 0;
+    margin-bottom: 0.25rem;
+    color: #ffffff; /* White text to contrast with gradient */
     font-weight: 600;
 }
 
+p {
+    color: rgb(107, 114, 128);
+    font-size: 15px;
+    margin-bottom: 10px;
+    margin-top: 5px;
+}
+
 iframe {
-    flex: 1; /* Allows iframe to expand and fill available space */
+    flex: 1; /* Allows iframe to expand fully */
     width: 100%;
     border: none;
     background-color: #fff;
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
+    border-radius: 0 0 12px 12px; /* Rounded bottom corners */
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
 }
 
 footer {
     padding: 0.5rem;
     font-size: 0.7rem;
     text-align: center;
-    background-color: #2d3748; /* Dark background */
+    background-color: #2d3748; /* Dark background to match the screenshot */
     color: #ffffff;
+    border-radius: 0 0 12px 12px; /* Rounded bottom corners */
 }
 
 .creator {
@@ -60,7 +71,7 @@ footer {
 
 .social-links a {
     margin: 0 0.5rem;
-    color: #00ddeb; /* Cyan color */
+    color: #00ddeb; /* Cyan color to match the screenshot */
     text-decoration: none;
     font-weight: 500;
 }
@@ -75,6 +86,6 @@ footer {
 
 .developers {
     margin-top: 0.25rem;
-    color: #a0aec0; /* Light gray */
+    color: #a0aec0; /* Light gray to match the screenshot */
     font-size: 0.65rem;
 }