Update style.css

style.css

@@ -50,11 +50,27 @@ body {
     align-items: center;
 }
 
-.converter-container input, .converter-container select, .converter-container button {
+.currency-box input {
     margin: 10px;
+    padding: 15px;
+    font-size: 16px;
+    width: 100%;
+    max-width: 400px;
+    border-radius: 8px;
+    border: 1px solid #ccc;
+}
+
+.currency-select {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.currency-select select, .currency-select button {
     padding: 10px;
     font-size: 16px;
-    width: 200px;
+    margin: 10px;
+    border-radius: 8px;
     border: 1px solid #ccc;
 }
 
@@ -62,6 +78,11 @@ body {
     background-color: #006400;
     color: white;
     cursor: pointer;
+    padding: 10px 20px;
+    font-size: 16px;
+    border: none;
+    border-radius: 8px;
+    margin-top: 10px;
 }
 
 #convert-btn:hover {
@@ -72,7 +93,8 @@ body {
     background-color: #cccccc;
     color: black;
     cursor: pointer;
-    margin-top: 10px;
+    padding: 10px 20px;
+    border-radius: 8px;
 }
 
 #swap-btn:hover {
@@ -127,14 +149,26 @@ body {
     .steps {
         flex-direction: column;
     }
+
+    .currency-select {
+        flex-direction: column;
+    }
+
+    .currency-box input {
+        max-width: 300px;
+    }
+
+    .currency-select select, .currency-select button {
+        width: 100%;
+    }
 }
 
 @media screen and (max-width: 480px) {
-    .converter-container {
-        width: 100%;
+    .currency-box input {
+        max-width: 100%;
     }
 
-    .footer-content p {
-        font-size: 14px;
+    .currency-select select, .currency-select button {
+        width: 100%;
     }
 }