enhanced the look and feel of the side menu on the landing page and adjusted elements for smaller devices

static/css/style-search.css

@@ -101,6 +101,7 @@ body.menu-open {
     border: 1px solid var(--search-bg-input-border);
     display: flex;
     flex-direction: column;
+    box-sizing: border-box;
 }
 
 .wrapper input {
@@ -112,6 +113,8 @@ body.menu-open {
     background: none;
     border: none;
     outline: none;
+    box-sizing: border-box;
+    height: 100%;
 }
 
 .wrapper input::placeholder {
@@ -241,18 +244,19 @@ body.menu-open {
 /* Menu Button */
 .settings-icon-link-search {
     position: fixed;
-    top: 20px;
+    top: 25px;
     right: 20px;
-    background: none;
+    font-size: 25px;
+    background-color: inherit;
     border: none;
     color: var(--fg);
     cursor: pointer;
-    font-size: 36px;
-    z-index: 999;
+    z-index: 99;
 }
 
 .settings-icon-link-search:hover {
-    color: var(--highlight);
+    color: var(--blue);
+    transition: color 0.3s ease;
 }
 
 /* Style for Close Button in Menu */
@@ -265,6 +269,10 @@ body.menu-open {
     position: absolute;
     top: 20px;
     right: 20px;
+    z-index: 999;
+    width: 50px;
+    height: 50px;
+    font-size: 36px; /* Not working */
 }
 
 .side-nav .closebtn:hover {
@@ -281,9 +289,17 @@ body.menu-open {
     right: 0;
     background-color: var(--html-bg);
     overflow-x: hidden;
-    transition: 0.5s;
+    transition: width 0.4s ease-in-out; /* Does this even change anything? cant really tell */
     z-index: 1000;
     box-shadow: -2px 0 5px rgba(0,0,0,0.5);
+    padding-top: 70px;
+    overflow-x: hidden; /* Prevents horizontal overflow */
+}
+
+.side-nav:hover .closebtn:hover {
+    color: var(--blue);
+    transition: color 0.3s ease;
+    background: none;
 }
 
 /* Menu Content */
@@ -308,6 +324,7 @@ body.menu-open {
     background-color: var(--search-select);
     color: var(--blue);
     cursor: pointer;
+    text-decoration: none;
 }
 
 /* Style for buttons in the menu */
@@ -340,6 +357,12 @@ body.menu-open::before {
 }
 
 /* Responsive Design */
+@media only screen and (max-width: 650px) {
+    .wrapper {
+        max-width: 95%;
+    }
+}
+
 @media only screen and (max-width: 450px) {
     .wrapper {
         width: 90%;
@@ -349,8 +372,20 @@ body.menu-open::before {
         max-width: 90%;
         min-width: 25%;
     }
+    .side-nav {
+        max-width: 90%;
+    }
 }
 
+@media only screen and (max-height: 300px) {
+    .logo-container svg {
+        width: 25%;
+        max-width: 90%;
+        min-width: 25%;
+    }
+}
+
+
 /* Additional Global Styles */
 a {
     text-decoration: none;
@@ -377,6 +412,18 @@ input, button {
     outline: none;
 }
 
+body.menu-open {
+    overflow: hidden;
+}
+
+/* Prevent horizontal scrolling on the page */
+html, body {
+    overflow-x: hidden;  /* Disables horizontal scrollbar */
+    margin: 0;
+    padding: 0;
+    max-width: 100vw;  /* Limits content to viewport width */
+}
+
 /* 
  Remove default focus outline and add custom focus style 
 .wrapper input[type="text"]:focus {
@@ -384,5 +431,3 @@ input, button {
     border: 1px solid var(--blue);
     box-shadow: none;
 } */
-
-

static/css/style.css

@@ -81,7 +81,7 @@
     border: none;
     color: var(--fg);
     position: absolute;
-    top: 7px;
+    top: 9px;
     right: 10px;
     cursor: pointer;
 }