Update style.css

style.css

@@ -3,192 +3,141 @@ body {
     font-family: Arial, sans-serif;
     margin: 0;
     padding: 0;
-    background-color: #f7f7f7;
+    background-color: #f5f5f5;
+    box-sizing: border-box;
 }
 
 /* Navbar */
 .navbar {
     background-color: #004d00; /* Dark Green */
-    padding: 10px;
-    position: fixed;
-    top: 0;
-    width: 100%;
-    z-index: 100;
-}
-
-.navbar .logo {
+    padding: 10px 20px;
     display: flex;
     justify-content: flex-start;
     align-items: center;
+    position: fixed;
+    width: 100%;
+    top: 0;
+    left: 0;
 }
 
-.navbar .logo img {
-    width: 120px;
-    height: auto;
+.logo img {
+    height: 40px;
 }
 
 /* Headline */
 .headline {
+    margin-top: 70px;
     text-align: center;
     background-color: #004d00; /* Dark Green */
     color: white;
-    padding: 60px 20px 20px;
+    padding: 20px;
 }
 
 .headline h1 {
+    margin: 0;
     font-size: 36px;
-    margin-bottom: 10px;
 }
 
 .headline p {
     font-size: 18px;
 }
 
-/* Content */
+/* Main Content */
 .content {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-top: 80px;
-    padding: 30px;
-}
-
-.converter-container {
+    margin: 40px auto;
+    max-width: 600px;
     background-color: white;
-    padding: 30px;
+    padding: 20px;
     border-radius: 10px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    width: 100%;
-    max-width: 500px;
 }
 
-/* Currency Input Box */
-.currency-box, .currency-group {
-    display: flex;
-    flex-direction: column;
+.currency-box,
+.currency-group,
+.steps {
     margin-bottom: 15px;
 }
 
-.currency-box label, .currency-group label {
-    font-size: 14px;
+.currency-box label,
+.currency-group label,
+.steps h3 {
     font-weight: bold;
+    display: block;
     margin-bottom: 5px;
 }
 
-.currency-box input, .currency-group select {
-    padding: 10px;
-    font-size: 16px;
+.currency-box input,
+.currency-group select,
+.currency-box button {
     width: 100%;
-    border-radius: 5px;
+    padding: 10px;
+    margin: 5px 0;
     border: 1px solid #ccc;
+    border-radius: 5px;
+    box-sizing: border-box;
+}
+
+.currency-group select,
+.currency-box input {
+    width: 100%;
 }
 
-/* Swap Button */
 .swap-btn {
-    background-color: #004d00; /* Dark Green */
-    color: white;
-    font-size: 18px;
+    font-size: 24px;
+    cursor: pointer;
     padding: 10px;
+    background-color: #004d00;
+    border: none;
     border-radius: 50%;
-    cursor: pointer;
-    margin: 0 10px;
+    color: white;
     display: flex;
     justify-content: center;
     align-items: center;
 }
 
-.swap-btn:hover {
-    background-color: #003d00;
-}
-
-.swap-btn i {
-    font-size: 20px;
-}
-
-/* Convert Button */
-#convert-btn {
-    background-color: #004d00; /* Dark Green */
+.converter-container button {
+    background-color: #004d00;
     color: white;
-    padding: 12px 20px;
-    font-size: 18px;
-    width: 100%;
-    border-radius: 5px;
     border: none;
+    padding: 15px;
+    border-radius: 5px;
+    width: 100%;
     cursor: pointer;
 }
 
-#convert-btn:hover {
-    background-color: #003d00;
-}
-
-/* Result Display */
-#result {
-    font-size: 18px;
-    margin-top: 20px;
-    text-align: center;
-}
-
-/* How to Use */
-.how-to-use {
-    background-color: #f1f1f1;
-    padding: 50px 20px;
-    text-align: center;
-}
-
-.how-to-use h2 {
-    font-size: 28px;
-    margin-bottom: 20px;
-}
-
 .steps {
     display: flex;
-    justify-content: center;
+    justify-content: space-between;
     flex-wrap: wrap;
 }
 
 .step {
-    background-color: #fff;
-    padding: 20px;
+    background-color: #f0f0f0;
+    padding: 15px;
     margin: 10px;
-    width: 250px;
     border-radius: 5px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-}
-
-.step h3 {
-    font-size: 18px;
-    margin-bottom: 10px;
+    width: 30%;
+    text-align: center;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 }
 
 /* Footer */
 .footer {
     background-color: #333;
     color: white;
-    padding: 20px;
     text-align: center;
-}
-
-.footer p {
-    margin: 5px;
+    padding: 20px;
+    margin-top: 40px;
 }
 
 /* Responsive Design */
 @media (max-width: 768px) {
-    .currency-select {
-        display: flex;
-        flex-direction: column;
-    }
-
-    .currency-group, .currency-box {
-        width: 100%;
-    }
-
     .steps {
         flex-direction: column;
     }
 
-    .converter-container {
-        padding: 20px;
+    .step {
+        width: 100%;
     }
 }