make footer and nav bar look wayyy better on mobile

_includes/base.html

@@ -42,7 +42,7 @@
       <marquee id="footer-scroll" style="font-size: 13vw; width: 50%; box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset; background-color: var(--accent2); border-radius: var(--rounding)">astolfo.org</marquee>
       <!-- idk put astolfo in a train here, learn pixel art someday -->
       <div>
-        <div style="display: flex;" class="horizontal-flex">
+        <div class="horizontal-flex flex hide-mobile">
           <ul>
             <li><a href="/">home</a></li>
             <li><a href="/blog/">blog</a></li>

bundle.css

@@ -22,7 +22,8 @@ body {
   background-image: url("/img/background.jpg");
   background-position: 100% 100%;
   background-size: cover;
-  backdrop-filter: blur(100px);
+  background-repeat: repeat;
+  backdrop-filter: blur(5px);
 }
 
 a {
@@ -261,11 +262,7 @@ footer p,hr,div {
 
 @media (max-width: 1000px) {
   header {
-    margin: none;
-    width: 100%;
     height: auto;
-    border-radius: 0px;
-    margin-top: 0px;
   }
 
   header h1 {
@@ -277,6 +274,27 @@ footer p,hr,div {
     flex-direction: column;
   }
 
+  #main-page {
+    flex-direction: column-reverse;
+    padding-left: 0px;
+  }
+
+  nav {
+    width: 100%;
+    ul {
+      display: flex;
+      justify-content: space-evenly;
+    }
+
+    li {
+      width: fit-content;
+    }
+  }
+
+  .hide-mobile {
+    display: none;
+  }
+
   footer marquee {
     width: auto !important;
   }