Update style.css

Author: SuRu190

task11-delete-list-items-dynamically/style.css

@@ -1,24 +1,35 @@
+* {
+  box-sizing: border-box;
+}
+
 body {
-  padding: 100px;
+  padding: 100px 20px;
   text-align: center;
-  background: linear-gradient(to right, #2624ac, #64db46);
+  background-color: blueviolet;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 
 .container {
   background-color: white;
   padding: 30px;
-  width: 30%;
+  width: 90%;
+  max-width: 500px;
   margin: auto;
   border: none;
-  border-radius: 50px;
+  border-radius: 25px;
+}
+
+h1 {
+  font-size: 22px;
+  margin-bottom: 20px;
 }
 
 .input-section {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
+  flex-wrap: wrap;
 }
 
 input {
@@ -27,6 +38,7 @@ input {
   border: 3px solid grey;
   border-radius: 10px;
   width: 60%;
+  min-width: 200px;
 }
 
 button {
@@ -39,22 +51,75 @@ button {
   border-radius: 10px;
 }
 
+ul {
+  padding: 0;
+  margin-top: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
 li {
   padding: 8px 12px;
-  border: none;
   border-radius: 10px;
-  background-color: burlywood;
+  background-color: rgb(241, 223, 200);
   list-style: none;
   margin-bottom: 10px;
-  width: 85%;
-  text-align: left;
+  width: 100%;
+  max-width: 90%;
   display: flex;
   justify-content: space-between;
   align-items: center;
+  box-sizing: border-box;
 }
 
 li button {
   background-color: cornflowerblue;
-  padding: 8px 10px;
+  color: white;
+  font-weight: bold;
   border: none;
-}
+  border-radius: 6px;
+  padding: 6px 12px;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+@media (max-width: 340px) {
+  .container {
+    width: 90%;
+    padding: 20px;
+    border-radius: 30px;
+  }
+
+  .input-section {
+    flex-direction: column;
+    gap: 10px;
+    width: 100%;
+  }
+
+  input {
+    width: 100%;
+    font-size: 14px;
+    box-sizing: border-box;
+  }
+
+  button {
+    width: 100%;
+    font-size: 14px;
+    box-sizing: border-box;
+  }
+
+  li {
+    width: 100%;
+    font-size: 14px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
+  }
+
+  li button {
+    align-self: flex-end;
+    font-size: 13px;
+    padding: 6px 10px;
+  }
+}