updated .css file to make it responsive

Author: nirajxdev

style.css

@@ -1,8 +1,13 @@
 body {
     display: flex;
+    flex-direction: column;
+    align-items: center;
     justify-content: center;
-    margin-top: 5rem;
+    min-height: 100vh;
+    margin-top: 2rem;
     overflow: hidden;
+    padding: 0 1rem;         
+    box-sizing: border-box; 
 }
 h1 {
     font-size: 2.5rem;
@@ -23,28 +28,59 @@ h1 {
     display: block;
     margin: 0 auto;
     text-align: center;
-    font-size: 20px; 
-    height: 2rem;
+    font-size: 1.25rem;      
+    height: 2.5rem;
+    width: 80%;              
+    max-width: 400px;        
 }
-#submit {    
+#submit {
     display: block;
-    margin: 0 auto;
-    height: 2rem;
-    width: 7rem;
+    margin: 1rem auto;
+    height: 2.5rem;
+    width: 8rem;
     border-radius: 10px;
     text-align: center;
-    font-size: 20px;
+    font-size: 1.25rem;
     font-weight: bold;
     background-color: rgb(216, 131, 20);
+    cursor: pointer;
 }
-
 #result_box {
     margin-top: 2rem;
     text-align: center;
-    align-items: center;
     font-size: 1.5rem;
 }
 #hint {
     font-size: 2rem;
     font-weight: 500;
 }
+
+@media (max-width: 768px) {
+    body {
+        margin-top: 2rem;
+    }
+    h1 {
+        font-size: 1.8rem;     
+    }
+    #guide {
+        font-size: 1.2rem;     
+    }
+    #guess {
+        font-size: 1.5rem;     
+        margin-top: 1rem;      
+    }
+    #guessInput {
+        font-size: 1rem;       
+        height: 2.5rem;
+        width: 90%;            
+    }
+    #submit {
+        height: 3rem;           
+        width: 90%;           
+        max-width: 300px;      
+    }
+    #result_box, #hint {
+        font-size: 1.2rem;     
+    }
+}
+