Mobile header and other styling fixes

views/assets/css/styles-1644738239.css

@@ -239,6 +239,7 @@ details[open] summary {
   animation: fadeInAnimation ease-in-out 0.6s;
   animation-iteration-count: 1;
   animation-fill-mode: forwards;
+  overflow-x: clip;
 }
 
 /* to change the top padding on the footer, change the 3 vw values here to the same thing */
@@ -1138,6 +1139,10 @@ iner
     margin-right: auto;
   }
 
+  #header {
+    padding: 15px 30px;
+  }
+
   .logo {
     width: 25px;
     height: 25px;
@@ -1151,6 +1156,11 @@ iner
     font-size: 11px;
   }
 
+  .new::after {
+    padding: 18.2px 20px;
+    margin-left: 6.5px;
+  }
+
   .mnave {
     width: 25px;
     height: 25px;
@@ -1229,6 +1239,16 @@ iner
   }
 }
 
+@media (max-width: 400px) {
+  #header {
+    padding: 15px 20px;
+  }
+
+  .navbar-1 {
+    justify-content: space-evenly;
+  }
+}
+
 .image-container-hero > p {
   color: var(--nord4);
 }

views/index.html

@@ -111,10 +111,9 @@
         </div>
       </div>
       <div class="hero-grid-container home-text text-center">
-        <div id="pr-form">
+        <div class="pr-form">
           <input
             type="text"
-            id="pr-url"
             spellcheck="false"
             autocomplete="off"
             placeholder="Search (Ctrl+K)"/>