make teh design responsive

style.css

@@ -38,14 +38,21 @@ body {
     transition: background-color 0.3s, color 0.3s;
 }
 .container { 
-    max-width: 800px; 
+    max-width: 100%; 
     margin: auto; 
     background: var(--container-bg); 
-    padding: 20px; 
+    padding: 15px; 
     border-radius: 8px; 
     box-shadow: 0 2px 10px var(--shadow-color); 
     transition: background-color 0.3s, color 0.3s;
 }
+
+@media screen and (max-width: 768px) {
+    .container { 
+        padding: 10px; 
+        margin: 10px; 
+    }
+}
 h2 { 
     color: var(--header-color); 
     text-align: center; 
@@ -57,6 +64,12 @@ h2 {
     gap: 20px; 
     margin-bottom: 20px; 
 }
+
+@media screen and (max-width: 768px) {
+    .input-grid { 
+        grid-template-columns: 1fr; 
+    }
+}
 .input-group { 
     display: flex; 
     flex-direction: column; 
@@ -117,6 +130,15 @@ th {
 .header {
   display: flex;
   flex-direction: column-reverse;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+@media screen and (min-width: 768px) {
+  .header {
+    flex-direction: row;
+    align-items: center;
+  }
 }
 
 .description {
@@ -124,10 +146,9 @@ th {
 }
 
 .button-toggle {
-    top: 20px;
     cursor: pointer;
-    width: 15px;
-    height: 15px;
+    width: 30px;
+    height: 30px;
     border-radius: 4px;
     transition: transform 0.3s ease;
     background: var(--container-bg);
@@ -138,12 +159,10 @@ th {
     margin-bottom: 10px;
 }
 
-.button-toggle:hover {
-    transform: scale(1.1);
-}
-
-.button-toggle svg {
-    width: 100%;
-    height: 100%;
-    fill: var(--text-color);
+@media screen and (max-width: 768px) {
+    .button-toggle {
+        width: 25px;
+        height: 25px;
+        padding: 8px 12px;
+    }
 }