css formatting

static/css/style-search.css

@@ -1,5 +1,6 @@
 /* General Styles */
-body, html {
+body,
+html {
     margin: 0;
     padding: 0;
     background-color: var(--html-bg);
@@ -8,7 +9,8 @@ body, html {
     color: var(--text-color);
 }
 
-button, p {
+button,
+p {
     font-family: 'Inter', Arial, Helvetica, sans-serif;
     font-weight: 400;
 }
@@ -101,13 +103,15 @@ body.menu-open {
     text-align: left;
     width: 100%;
     position: absolute;
-    left: -1px; /* this is so curesed */
+    left: -1px;
+    /* this is so curesed */
     top: 100%;
     background-color: var(--search-bg-input);
     border-bottom-left-radius: 22px;
     border-bottom-right-radius: 22px;
     border: 1px solid var(--search-bg-input-border);
-    border-top: none; /* No top border to avoid double borders with the input */
+    border-top: none;
+    /* No top border to avoid double borders with the input */
     z-index: 900;
 }
 
@@ -159,8 +163,10 @@ body.menu-open {
     text-align: center;
     display: flex;
     flex-direction: column;
-    justify-content: center; /* Center vertically */
-    height: 100vh; /* Make it full viewport height */
+    justify-content: center;
+    /* Center vertically */
+    height: 100vh;
+    /* Make it full viewport height */
 }
 
 /* Search Type Icons */
@@ -171,7 +177,8 @@ body.menu-open {
     margin-top: 30px;
     gap: 20px;
     /* Allow transform movement */
-    transition: transform 0.3s ease; /* Smooth movement when suggestions appear */
+    transition: transform 0.3s ease;
+    /* Smooth movement when suggestions appear */
     position: relative;
 }
 
@@ -242,7 +249,8 @@ body.menu-open {
     z-index: 999;
     width: 50px;
     height: 50px;
-    font-size: 36px; /* Not working */
+    font-size: 36px;
+    /* Not working */
 }
 
 .side-nav .closebtn:hover {
@@ -259,11 +267,13 @@ body.menu-open {
     right: 0;
     background-color: var(--html-bg);
     overflow-x: hidden;
-    transition: width 0.4s ease-in-out; /* Does this even change anything? cant really tell */
+    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);
+    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
     padding-top: 70px;
-    overflow-x: hidden; /* Prevents horizontal overflow */
+    overflow-x: hidden;
+    /* Prevents horizontal overflow */
 }
 
 .side-nav:hover .closebtn:hover {
@@ -322,7 +332,7 @@ body.menu-open::before {
     left: 0;
     width: 100%;
     height: 100%;
-    background: rgba(0,0,0,0.5);
+    background: rgba(0, 0, 0, 0.5);
     z-index: 998;
 }
 
@@ -337,11 +347,13 @@ body.menu-open::before {
     .wrapper {
         width: 90%;
     }
+
     .logo-container svg {
         width: 75%;
         max-width: 90%;
         min-width: 25%;
     }
+
     .side-nav {
         max-width: 90%;
     }
@@ -378,7 +390,8 @@ p {
     line-height: 1.58;
 }
 
-input, button {
+input,
+button {
     outline: none;
 }
 
@@ -387,11 +400,14 @@ body.menu-open {
 }
 
 /* Prevent horizontal scrolling on the page */
-html, body {
-    overflow-x: hidden;  /* Disables horizontal scrollbar */
+html,
+body {
+    overflow-x: hidden;
+    /* Disables horizontal scrollbar */
     margin: 0;
     padding: 0;
-    max-width: 100vw;  /* Limits content to viewport width */
+    max-width: 100vw;
+    /* Limits content to viewport width */
 }
 
 /* 
@@ -400,4 +416,4 @@ html, body {
     outline: none;
     border: 1px solid var(--font-fg);
     box-shadow: none;
-} */
+} */