make footer and nav bar look wayyy better on mobile

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;
   }