Update index.css

index.css

@@ -1,117 +1,39 @@
-/* Custom CSS for black theme */
+/* Resetting basic styles */
 body {
-  background-color: #1c1c1c;
-  color: #fff;
-  margin: 0;
-  padding: 0;
-}
-
-#header {
-  background-color: #000;
-  padding: 20px;
-  text-align: center;
-}
-
-#header h1 {
-  margin: 0;
-  font-size: 24px;
-  font-family: 'Arial', sans-serif;
-  color: #fff;
-  letter-spacing: 2px;
-  text-transform: uppercase;
-}
-
-#header img {
-  width: 20%;
-  height: auto;
+    background-color: #000;
+    color: #fff;
+    margin: 0;
+    padding: 0;
+    font-family: 'Poppins', sans-serif;
 }
 
 #content {
-  text-align: center;
-  padding: 20px;
-  margin-top: -4%;
-}
-
-#content h1 {
-  font-size: 24px;
-  cursor:pointer;
-  text-transform: uppercase;
-  font-family: 'Open Sans', sans-serif;
-  line-height: 1.5;
-  margin-bottom: 20px;
+    text-align: center;
+    padding: 50px; /* Space around content */
 }
 
-#searchbar {
-  text-align: center;
-  margin: 20px auto;
+h1 {
+    font-size: 48px; /* Bigger title font */
+    text-transform: uppercase;
+    margin-bottom: 30px; /* Space below title */
 }
 
 .form__input {
-  padding: 10px;
-  border: none;
-  border-radius: 5px;
-  font-size: 16px;
-  width: 300px;
-  box-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
-  background-color: #222;
-  text-align: center;
-  color: #fff;
-  cursor:cell;
-}
-
-a{
-  text-decoration: none;
-  color:white;
-  width:50px;
-  height:50px;
-  padding-right: 1px;
-  padding-left: 1px;
-  text-align: center;
-  align-self: center;
+    padding: 15px; /* Spacious input */
+    border: none;
+    border-radius: 5px;
+    font-size: 20px; /* Bigger input text size */
+    width: 400px; /* Wider input */
+    background-color: #222; /* Input background */
+    color: #fff; /* Input text color */
 }
 
 .form__input::placeholder {
-  color: #aaa;
-  text-align: center;
-}
-
-.form_input:hover{
-  cursor:cell;
+    color: #aaa; /* Placeholder color */
+    text-align: center; /* Center placeholder text */
 }
 
 .form__input:focus {
-  outline: none;
-  box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
-}
-@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
-#footer {
-  position: fixed;
-  left: 0;
-  bottom: 0;
-  border-top-width: 1px;
-  border-top-style: solid;
-  border-top-color: #99ccff;
-  font-family: 'Open Sans', sans-serif;
-  width: 100%;
-  height:15px;
-  background-color: #000;
-  padding-top: 7.5px;
-  padding-bottom: 10px;
-  text-align: center;
-  color: #fff;
-  font-size: 14px;
-}
-
-#footer p {
-  margin: 0;
-}
-
-.fa {
-  font-size: 24px;
-  margin-right: 10px;
-  color: #fff;
-}
-
-.fa:hover {
-  color: #aaa;
+    outline: none; /* Remove outline */
+    box-shadow: 0 0 5px rgba(255, 255, 255, 0.5); /* Focus effect */
 }