Update styles.css

styles.css

@@ -1,4 +1,4 @@
-/* styles.css */
+/* Default light theme */
 body {
     display: flex;
     flex-direction: column;
@@ -8,6 +8,34 @@ body {
     background-color: #000000;
     font-family: Arial, sans-serif;
     color: #fff;
+
+}
+
+/* Dark theme */
+body.dark-mode {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+    background-color: #fff;
+    font-family: Arial, sans-serif;
+    color: #000000;
+}
+
+/* Styles for the toggle button */
+.toggle-mode {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    cursor: pointer;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 40px;
+    background-color: #f0f0f0;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+    font-size: 16px;
+    transition: background-color 0.3s, color 0.3s;
 }
 
 .search-container {
@@ -19,7 +47,6 @@ body {
 }
 
 h1 {
-    color: white;
     margin-bottom: 30px;
     font-size: 55px;
     text-align: center;
@@ -44,7 +71,6 @@ button {
     padding: 15px 20px;
     border: #ffffff 5px solid;
     background-color: black;
-    color: rgb(255, 255, 255);
     font-size: 16px;
     cursor: pointer;
     border-radius: 0 40px 40px 0;
@@ -105,4 +131,22 @@ button:hover {
 
 .download-btn:hover {
     background-color: #272829;
-}
+}
+
+/* Styles for the info box */
+.info-box {
+    margin: 20px;
+    padding: 15px;
+    border-left: 5px solid #2a9d8f; /* A distinct color for the border */
+    background-color: #e9f5f3; /* A light background for readability */
+    color: #102a43; /* A darker color for text for contrast */
+    font-size: 16px;
+    line-height: 1.6;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Soft shadow for depth */
+}
+
+/* Enhancing the readability */
+.info-box a {
+    color: #e76f51; /* Color for links to make them stand out */
+    text-decoration: underline; /* Underline to indicate they are clickable */
+}