Update style.css

style.css

@@ -48,6 +48,12 @@ body {
     display: flex;
     flex-direction: column;
     align-items: center;
+    max-width: 400px;
+    margin: 0 auto;
+    padding: 20px;
+    border-radius: 12px;
+    border: 2px solid #ccc;
+    background-color: #f8f8f8; /* Light gray background */
 }
 
 .currency-box input {
@@ -55,33 +61,50 @@ body {
     padding: 15px;
     font-size: 16px;
     width: 100%;
-    max-width: 400px;
     border-radius: 8px;
     border: 1px solid #ccc;
+    box-sizing: border-box;
 }
 
 .currency-select {
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: space-between;
+    width: 100%;
+    margin-bottom: 20px;
 }
 
 .currency-select select, .currency-select button {
-    padding: 10px;
+    padding: 12px;
     font-size: 16px;
-    margin: 10px;
     border-radius: 8px;
     border: 1px solid #ccc;
+    width: 45%;
+}
+
+#swap-btn {
+    background-color: #006400;
+    color: white;
+    cursor: pointer;
+    padding: 12px 20px;
+    border-radius: 8px;
+    border: none;
+    margin: 0 10px;
+}
+
+#swap-btn:hover {
+    background-color: #004d00;
 }
 
 #convert-btn {
     background-color: #006400;
     color: white;
     cursor: pointer;
-    padding: 10px 20px;
+    padding: 15px 30px;
     font-size: 16px;
     border: none;
     border-radius: 8px;
+    width: 100%;
     margin-top: 10px;
 }
 
@@ -89,16 +112,9 @@ body {
     background-color: #004d00;
 }
 
-#swap-btn {
-    background-color: #cccccc;
-    color: black;
-    cursor: pointer;
-    padding: 10px 20px;
-    border-radius: 8px;
-}
-
-#swap-btn:hover {
-    background-color: #b3b3b3;
+#result {
+    font-size: 18px;
+    margin-top: 20px;
 }
 
 .how-to-use {
@@ -139,6 +155,7 @@ body {
     padding: 20px 0;
     text-align: center;
     margin-top: 40px;
+    border-top: 1px solid #fff; /* Subtle white border to separate footer */
 }
 
 .footer-content p {
@@ -152,23 +169,24 @@ body {
 
     .currency-select {
         flex-direction: column;
+        align-items: center;
     }
 
-    .currency-box input {
-        max-width: 300px;
+    .currency-box input,
+    .currency-select select,
+    .currency-select button {
+        width: 100%;
     }
 
-    .currency-select select, .currency-select button {
-        width: 100%;
+    .currency-select button {
+        margin: 10px 0;
     }
 }
 
 @media screen and (max-width: 480px) {
-    .currency-box input {
-        max-width: 100%;
-    }
-
-    .currency-select select, .currency-select button {
+    .currency-box input,
+    .currency-select select,
+    .currency-select button {
         width: 100%;
     }
 }