Update style.css

Author: SuRu190

task03-multiple-heading/style.css

@@ -1,31 +1,67 @@
 body {
-    font-family: cursive;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    padding: 100px 20px;
     text-align: center;
-    padding: 100px;
-    background: linear-gradient(to right, #438993, #987654);
+    background: linear-gradient(to right, lightgreen, lightblue);
+    box-sizing: border-box;
+    margin: 0;
 }
 
 .container {
-    background-color: white;
-    padding: 30px 20px 50px 20px;
+    width: 90%;
+    max-width: 400px;
     border: none;
     border-radius: 50px;
-    box-shadow: 0 0 30px rgba(0, 0, 0, 0.9);
-    width: 30%;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
+    background-color: white;
+    padding: 30px 20px 50px;
     margin: auto;
+    box-sizing: border-box;
+}
+
+.heading {
+    font-size: 2rem;
+    margin: 10px 0;
 }
 
 button {
-    font-size: 25px;
-    padding: 8px 40px;
-    background-color: darkslateblue;
+    font-size: 1.8rem;
+    padding: 10px 40px;
     border: none;
     border-radius: 50px;
+    background-color: cornflowerblue;
+    color: white;
     cursor: pointer;
-    transition: 0.3s ease-in;
+    transition: transform 0.1s ease-in;
+    box-sizing: border-box;
 }
 
-button:hover {
-    background-color: rgb(25, 12, 105);
-    color: white;
-}
+button:active {
+    transform: scale(1.3);
+}
+
+@media (max-width: 430px) {
+    body {
+        padding: 50px 10px;
+    }
+
+    button {
+        font-size: 1.4rem;
+        padding: 8px 25px;
+    }
+
+    .heading {
+        font-size: 1.5rem;
+    }
+}
+
+@media (max-width: 360px) {
+    button {
+        font-size: 1.1rem;
+        padding: 6px 20px;
+    }
+
+    .heading {
+        font-size: 1.2rem;
+    }
+}