Fix layout for mobile

public/css/style.css

@@ -1,28 +1,41 @@
+
 body {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
     display: flex;
     justify-content: center;
     align-items: center;
-    height: 100vh;
+    min-height: 100vh;
     margin: 0;
     background-color: #f4f4f9;
     color: #333;
+    box-sizing: border-box;
 }
 
 .main-container {
     text-align: center;
-    padding: 2rem;
+    padding: 2rem 3rem;
     background-color: white;
     border-radius: 8px;
     box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+    width: 100%;
+    max-width: 600px;
+    margin: 2rem 1rem;
 }
 
-.social-links a {
-    color: #007bff;
-    text-decoration: none;
-    margin: 0 0.5rem;
-}
+@media (max-width: 600px) {
+    body {
+        align-items: flex-start;
+    }
 
-.social-links a:hover {
-    text-decoration: underline;
+    .main-container {
+        padding: 1.5rem 1rem;
+        margin: 0;
+        box-shadow: none;
+        border-radius: 0;
+        min-height: 100vh;
+    }
+
+    h1 {
+        font-size: 1.8rem;
+    }
 }