2 files changed, 46 insertions, 26 deletions

diff --git a/src/assets/css/background.css b/src/assets/css/background.css
new file mode 100644
index 0000000..3b8f64b
--- /dev/null
+++ b/src/assets/css/background.css
@@ -0,0 +1,10 @@
+.background {
+    position: fixed;
+    top: 0;
+    background-image: url("/assets/image/background.avif");
+    background-size: cover;
+    height: 100vh;
+    z-index: -1;
+    width: -moz-available;
+    width: -webkit-fill-available;
+  }
\ No newline at end of file
diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index 339ad3b..17798cc 100644
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -8,7 +8,7 @@ html, body {
 
 
 :root {
-  --primary: 244, 238, 238;
+  --primary: 238, 238, 238;
   --secondary: 187, 187, 187;
   --tertiary: 153, 153, 153;
   --text-primary: #222;
@@ -40,18 +40,26 @@ html, body {
     display: none;
   }
   .header-image > :nth-child(2) {
-    display: flex;
+    display: inline-block;
   }
-  .nav-button > :nth-child(2) {
+  .nav-button > a > :nth-child(2) {
     display: none;
   }
+  .nav-button > a > :nth-child(1) {
+    margin-left: auto;
+    margin-right: auto;
+  }
+  .nav-button > a {
+    padding-left: 2px;
+    padding-right: 2px;
+  }
   .body_decoration {
     display: none;
   }
   .nav {
     display: flex;
     flex-flow: column nowrap;
-    width: 50px;
+    max-width: 50px;
   }
   .space {
     display: none;
@@ -62,6 +70,14 @@ html, body {
   #nav-pin {
     display: none;
   }
+
+  .nav-button, .header-image {
+    max-width: 50px;
+  }
+
+  .floatwrapper > div {
+    max-width: 50px;
+  }
 }
 @media screen and (min-width: 1100px) {
   .header-image > :nth-child(1) {
@@ -70,7 +86,7 @@ html, body {
   .header-image > :nth-child(2) {
     display: none;
   }
-  .nav-button > :nth-child(2) {
+  .nav-button > div > :nth-child(2) {
     display: flex;
   }
   .nav {
@@ -86,34 +102,24 @@ html, body {
   #nav-pin {
     display: block;
   }
+  .nav-button > a {
+    padding-left: 5px;
+    padding-right: 5px;
+  }
 }
 
 
-
-
 body {
   display: flex;
   flex-flow: row nowrap;
   max-width: 100vw;
   min-height: 100vh;
 }
-
-/* TESTING */
-#content {
-  background-color: rgba(var(--primary), 0.7);
-}
-.mobile-nav {
-  background-color: rgb(var(--primary));
-}
-/* END TESTING */
-
-
 .body-wrapper {
   display: flex;
   flex-flow: row nowrap;
   flex-grow: 1;
-  background-image: url("/assets/image/background.avif");
-  background-size: cover;
+  z-index: 1;
 }
 
 
@@ -145,6 +151,7 @@ main {
   flex-grow: 1;
   padding-left: 10px;
   padding-right: 10px;
+  background-color: rgba(var(--primary), 0.7);
 }
 
 .noaa {
@@ -159,16 +166,15 @@ main {
   align-content: space-between;
   display: grid;
   height: 100vh;
-}
-.floatwrapper > div > div {
-  padding-left: 5px;
-  padding-right: 5px;
+  overflow: auto;
 }
 
 .header-image {
   display: flex;
   justify-content: center;
   padding-top: 5px;
+  padding-left: 5px;
+  padding-right: 5px;
 }
 
 .mobile-nav-button {
@@ -179,6 +185,7 @@ main {
 .mobile-nav {
   position: sticky;
   bottom: 0;
+  background-color: rgb(var(--primary));
 }
 
 #nav-pin > a > span {
@@ -191,8 +198,11 @@ main {
 .nav-button > a {
   display: flex;
   height: inherit;
-  flex-flow: column nowrap;
-  justify-content: center;
+  flex-flow: row nowrap;
+}
+.nav-button > a > span {
+  margin-top: auto;
+  margin-bottom: auto;
   padding-left: 5px;
 }
 .nav-button:hover, .header-image:hover {