experimenting with main page redesign

static/css/style.css

@@ -67,13 +67,10 @@
     /* Support for all WebKit browsers. */
     -webkit-font-feature-settings: 'liga';
     -webkit-font-smoothing: antialiased;
-
     /* Support for Safari and Chrome. */
     text-rendering: optimizeLegibility;
-
     /* Support for Firefox. */
     -moz-osx-font-smoothing: grayscale;
-
     /* Support for IE. */
     font-feature-settings: 'liga';
 }
@@ -549,8 +546,9 @@ hr {
     margin: 0 auto;
     background: var(--search-bg-input);
     border-radius: 22px;
-    position: absolute;
-    width: 520px;
+    position: relative;
+    width: 100%;
+    max-width: 600px;
     overflow: hidden;
     margin-left: auto;
     margin-right: auto;
@@ -1891,6 +1889,99 @@ body, h1, p, a, input, button {
         color: var(--link) !important;
     }
 }
+
+/* Center the entire search page content */
+.search-page-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+/* Center the logo */
+.search-page-content h1 {
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+/* Style for the search input */
+#search-input {
+    width: 100%;
+    padding: 12px;
+    font-size: 16px;
+}
+
+/* Style for the search button inside the search bar */
+#search-wrapper-ico {
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 24px;
+    background: none;
+    border: none;
+    cursor: pointer;
+}
+
+/* Styles for the search type icons */
+.search-type-icons {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 30px;
+    margin-top: 30px;
+}
+
+/* Style for each icon button */
+.icon-button {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: none;
+    border: none;
+    cursor: pointer;
+    text-align: center;
+}
+
+/* Style for the icons */
+.icon-button .material-icons-round {
+    font-size: 48px; /* Adjust the size of the icons */
+    color: var(--sub-search-wrapper-ico);
+}
+
+/* Style for the labels under icons */
+.icon-button p {
+    margin-top: 8px;
+    font-size: 14px;
+    color: var(--sub-search-wrapper-ico);
+}
+
+/* Hover effects */
+.icon-button:hover .material-icons-round {
+    color: var(--blue);
+}
+
+.icon-button:hover p {
+    color: var(--blue);
+}
+
+/* Remove button default focus outline */
+.icon-button button:focus {
+    outline: none;
+}
+
+.material-icons-round {
+    font-family: 'Material Icons Round';
+    font-weight: normal;
+    font-style: normal;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+}
+
 /* 
 :root {
     --background-color: #ffffff;