Update style.css

style.css

@@ -22,17 +22,18 @@ body {
   padding: 40px;
   width: 100%;
   max-width: 400px;
-  text-align: center;
 }
 
 header h1 {
   font-size: 24px;
   color: #333;
+  text-align: center;
   margin-bottom: 20px;
 }
 
 label {
   display: block;
+  font-size: 14px;
   font-weight: bold;
   margin-bottom: 5px;
   color: #555;
@@ -40,11 +41,11 @@ label {
 
 input {
   padding: 12px;
-  margin-bottom: 15px;
   width: 100%;
   font-size: 16px;
   border-radius: 8px;
   border: 1px solid #ccc;
+  margin-bottom: 20px;
   text-align: center;
   font-weight: bold;
 }
@@ -53,12 +54,15 @@ input {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 10px;
-  margin-bottom: 15px;
+  margin-bottom: 20px;
 }
 
 .currency-group {
-  width: 45%;
+  flex: 1;
+}
+
+.currency-group:not(:last-child) {
+  margin-right: 10px;
 }
 
 #swapButton {
@@ -68,7 +72,10 @@ input {
   border-radius: 50%;
   padding: 10px;
   cursor: pointer;
-  font-size: 16px;
+  font-size: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 #swapButton:hover {
@@ -91,6 +98,7 @@ button[type="submit"] {
   border-radius: 8px;
   font-size: 16px;
   cursor: pointer;
+  width: 100%;
 }
 
 button[type="submit"]:hover {
@@ -105,6 +113,7 @@ button[type="submit"]:hover {
   background-color: #f8f8f8;
   padding: 15px;
   border-radius: 8px;
+  text-align: center;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }
 
@@ -112,4 +121,5 @@ footer {
   margin-top: 20px;
   font-size: 14px;
   color: #666;
+  text-align: center;
 }