Update style.css

style.css

@@ -1,76 +1,63 @@
-/* General styling */
+/* Basic layout */
 body {
     font-family: Arial, sans-serif;
-    background-color: #121212;
-    color: white;
     margin: 0;
     padding: 0;
+    background-color: #121212;
+    color: white;
     display: flex;
     justify-content: center;
-    align-items: center;
+    align-items: flex-start;
     height: 100vh;
+    overflow-y: auto;  /* Allow scrolling */
 }
 
 .container {
+    width: 100%;
+    max-width: 800px;
     background-color: #1e1e1e;
-    padding: 20px;
     border-radius: 10px;
-    width: 100%;
-    max-width: 600px;
+    padding: 20px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    margin-top: 20px;
+    overflow: hidden;  /* Ensure content does not overflow container */
 }
 
 header {
     display: flex;
+    flex-direction: column;
     align-items: center;
-    justify-content: space-between;
-    padding: 20px 0;
+    padding-bottom: 20px;
     text-align: center;
     border-bottom: 1px solid #ddd;
 }
 
 header .logo img {
-    width: 50px;  /* Ukuran logo */
+    width: 50px;
 }
 
 header h1 {
-    color: white;
     font-size: 24px;
+    color: white;
 }
 
 header p {
     color: #a1a1a1;
+    font-size: 14px;
 }
 
-/* Styling untuk footer */
-footer {
-    text-align: center;
-    margin-top: 20px;
-    font-size: 0.9em;
-    color: #a1a1a1;
-}
-
-footer a {
-    color: #4CAF50;
-    text-decoration: none;
-}
-
-footer a:hover {
-    text-decoration: underline;
-}
-
-/* Adjusting layout for input and swap button */
-.currency-select {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    gap: 10px;
+/* Content section */
+.content {
+    overflow-y: auto;  /* Allow scroll if content overflows */
+    max-height: 500px;
+    padding: 20px;
 }
 
-input, select {
+.converter input,
+.converter select {
     padding: 10px;
-    margin: 10px 0;
     width: 100%;
+    margin-bottom: 10px;
     border-radius: 5px;
     border: 1px solid #ddd;
 }
@@ -89,12 +76,6 @@ button:hover {
     background-color: #45a049;
 }
 
-#result {
-    margin-top: 20px;
-    font-size: 1.2em;
-}
-
-/* Styling swap button */
 button#swap-btn {
     background-color: transparent;
     border: 1px solid #4CAF50;
@@ -107,3 +88,25 @@ button#swap-btn:hover {
     background-color: #4CAF50;
     color: white;
 }
+
+/* Footer styling */
+footer {
+    text-align: center;
+    margin-top: 20px;
+    font-size: 0.9em;
+    color: #a1a1a1;
+}
+
+footer a {
+    color: #4CAF50;
+    text-decoration: none;
+}
+
+footer a:hover {
+    text-decoration: underline;
+}
+
+#result {
+    margin-top: 20px;
+    font-size: 1.2em;
+}