Update style.css

Author: SuRu190

task08-live-character-counter/style.css

@@ -1,27 +1,75 @@
 body {
-    padding: 200px;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    padding: 100px;
     text-align: center;
-    background: linear-gradient(to right, #485678, #098765);
+    background: linear-gradient(to right, lightblue, lightgreen);
 }
 
 .container {
+    padding: 40px 30px 20px 30px;
     background-color: white;
-    padding: 50px 80px;
-    border: none;
-    border-radius: 50px;
-    width: 20%;
+    width: 90%;
+    max-width: 400px;
     margin: auto;
+    border-radius: 50px;
 }
 
 input {
-    width: 90%;
-    padding: 10px;
     font-size: 15px;
+    width: 80%;
+    padding: 15px;
     border: 3px solid grey;
-    border-radius: 8px;
+    border-radius: 15px;
+}
+
+h2 {
+    margin: 20px 0 0 0;
+}
+
+@media (max-width: 600px) {
+  body {
+    padding: 50px 20px;
+  }
+
+  input {
+    font-size: 14px;
+    padding: 12px;
+  }
+
+  h2 {
+    font-size: 16px;
+  }
+}
+
+@media (max-width: 500px) {
+  body {
+    padding: 40px 20px;
+  }
+
+  .container {
+    width: 90%;
+    padding: 30px 15px 20px 15px;
+  }
+
+  input {
+    width: 80%;
+    font-size: 14px;
+    padding: 12px;
+  }
+
+  h2 {
+    font-size: 16px;
+  }
 }
 
-p {
-    margin-top: 20px;
-    margin-bottom: -20px;
-}
+@media (max-width: 300px) {
+  input {
+    width: 80%;
+    font-size: 13px;
+    padding: 10px;
+  }
+
+  h2 {
+    font-size: 14px;
+  }
+}