Update style.css

style.css

@@ -1,11 +1,13 @@
+/* Body style */
 body {
     font-family: Arial, sans-serif;
     margin: 0;
     padding: 0;
-    box-sizing: border-box;
+    background-color: #f4f4f4;
     overflow-x: hidden; /* Prevent horizontal scroll */
 }
 
+/* Navbar style */
 .navbar {
     position: fixed;
     top: 0;
@@ -16,12 +18,14 @@ body {
     display: flex;
     justify-content: flex-start;
     align-items: center;
+    z-index: 100;
 }
 
 .navbar .logo img {
     height: 40px;
 }
 
+/* Headline Section */
 .headline {
     text-align: center;
     background-color: #004d00;
@@ -39,6 +43,7 @@ body {
     font-size: 18px;
 }
 
+/* Main content section */
 .content {
     background-color: white;
     padding: 40px 20px;
@@ -59,25 +64,24 @@ body {
     border-radius: 12px;
     border: 2px solid #ccc;
     background-color: #f8f8f8;
-    box-sizing: border-box;
 }
 
-.currency-box {
-    margin: 10px 0;
+/* Currency Input Boxes */
+.currency-box, .currency-select {
     width: 100%;
+    margin: 15px 0;
     display: flex;
     flex-direction: column;
-    align-items: flex-start;
 }
 
-.currency-box label {
+.currency-box label, .currency-group label {
     font-weight: bold;
     font-size: 16px;
     margin-bottom: 5px;
 }
 
-.currency-box input {
-    padding: 15px;
+.currency-box input, .currency-group select {
+    padding: 12px;
     font-size: 16px;
     width: 100%;
     max-width: 400px;
@@ -86,38 +90,7 @@ body {
     box-sizing: border-box;
 }
 
-.currency-select {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    margin: 20px 0;
-    flex-wrap: wrap;
-}
-
-.currency-group {
-    display: flex;
-    flex-direction: column;
-    margin: 10px;
-    flex-grow: 1;
-    width: 100%;
-    max-width: 180px;
-}
-
-.currency-group label {
-    font-weight: bold;
-    font-size: 16px;
-}
-
-.currency-group select {
-    padding: 10px;
-    font-size: 16px;
-    width: 100%;
-    border-radius: 8px;
-    border: 1px solid #ccc;
-    box-sizing: border-box;
-}
-
+/* Swap Button */
 #swap-btn {
     background-color: #006400;
     color: white;
@@ -134,14 +107,11 @@ body {
     align-items: center;
 }
 
-#swap-btn i {
-    font-size: 24px;
-}
-
 #swap-btn:hover {
     background-color: #004d00;
 }
 
+/* Convert Button */
 #convert-btn {
     background-color: #006400;
     color: white;
@@ -158,11 +128,13 @@ body {
     background-color: #004d00;
 }
 
+/* Result display */
 #result {
     font-size: 18px;
     margin-top: 20px;
 }
 
+/* How to Use Section */
 .how-to-use {
     background-color: #004d00;
     color: white;
@@ -179,6 +151,7 @@ body {
     margin-bottom: 20px;
 }
 
+/* Steps */
 .steps {
     display: flex;
     justify-content: center;
@@ -200,6 +173,7 @@ body {
     font-weight: bold;
 }
 
+/* Footer */
 .footer {
     background-color: #666666;
     color: white;
@@ -213,6 +187,7 @@ body {
     margin: 5px 0;
 }
 
+/* Media Queries for responsiveness */
 @media screen and (max-width: 768px) {
     .currency-select {
         flex-direction: column;
@@ -226,16 +201,6 @@ body {
     .steps {
         flex-direction: column;
     }
-
-    .currency-box input,
-    .currency-select select,
-    .currency-select button {
-        width: 100%;
-    }
-
-    .currency-select button {
-        margin: 10px 0;
-    }
 }
 
 @media screen and (max-width: 480px) {