looks quite nice

6 files changed, 23 insertions, 21 deletions

diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index fc1afd9..339ad3b 100644
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -4,7 +4,6 @@ html, body {
   padding: 0;
   background-color: black;
   color: var(--text-primary);
-  font-size: 0;
 }
 
 
@@ -24,10 +23,10 @@ html, body {
 }
 
 @media screen and (max-width: 500px) {
-  #nav, #space {
+  .nav, .space {
     display: none;
   }
-  #mobile-nav {
+  .mobile-nav {
     display: grid;
     height: 70px;
     grid-template-columns: 20% 20% 20% 20% 20%;
@@ -49,15 +48,15 @@ html, body {
   .body_decoration {
     display: none;
   }
-  #nav {
+  .nav {
     display: flex;
     flex-flow: column nowrap;
     width: 50px;
   }
-  #space {
+  .space {
     display: none;
   }
-  #mobile-nav {
+  .mobile-nav {
     display: none;
   }
   #nav-pin {
@@ -74,14 +73,14 @@ html, body {
   .nav-button > :nth-child(2) {
     display: flex;
   }
-  #nav {
+  .nav {
     display: flex;
     flex-flow: column nowrap;
   }
-  #space {
+  .space {
     display: unset;
   }
-  #mobile-nav {
+  .mobile-nav {
     display: none;
   }
   #nav-pin {
@@ -96,52 +95,56 @@ body {
   display: flex;
   flex-flow: row nowrap;
   max-width: 100vw;
-  width: 100vw;
   min-height: 100vh;
 }
 
 /* TESTING */
 #content {
   background-color: rgba(var(--primary), 0.7);
-  word-break: break-all;
 }
-#mobile-nav {
+.mobile-nav {
   background-color: rgb(var(--primary));
 }
 /* END TESTING */
 
 
-#body-wrapper {
+.body-wrapper {
   display: flex;
   flex-flow: row nowrap;
   flex-grow: 1;
-  background-image: url("/assets/image/background.jpg");
+  background-image: url("/assets/image/background.avif");
   background-size: cover;
 }
 
 
-#body {
+main {
   display: flex;
   flex-flow: column nowrap;
   flex-grow: 7;
+  flex-basis: min-content;
+  text-align: justify;
+  text-justify: inter-word;
+  word-spacing: 2px;
+  line-height: 22px;
 }
 .body_decoration {
   background-color: rgba(var(--primary), 0.7);
-  mask-image: url(/assets/image/footer.png);
+  mask-image: url(/assets/image/decoration.png);
   mask-size: 50px;
   mask-repeat: repeat-y;
   width: 50px;
-  -webkit-mask-image: url(/assets/image/footer.png);
+  -webkit-mask-image: url(/assets/image/decoration.png);
   -webkit-mask-size: 50px;
   -webkit-mask-repeat: repeat-y;
 }
-#space {
+.space {
   flex-grow: 2;
 }
 
 #content {
   flex-grow: 1;
-  padding: 5px;
+  padding-left: 10px;
+  padding-right: 10px;
 }
 
 .noaa {
@@ -173,7 +176,7 @@ body {
   margin: auto;
 }
 
-#mobile-nav {
+.mobile-nav {
   position: sticky;
   bottom: 0;
 }
@@ -184,7 +187,6 @@ body {
 .nav-button {
   display: block;
   height: 35px;
-  font-size: initial;
 }
 .nav-button > a {
   display: flex;
diff --git a/src/assets/image/background.avif b/src/assets/image/background.avif
new file mode 100644
index 0000000..6b8cdd8
--- /dev/null
+++ b/src/assets/image/background.avif
diff --git a/src/assets/image/background.jpg b/src/assets/image/background.jpg
deleted file mode 100644
index 6bb5f1e..0000000
--- a/src/assets/image/background.jpg
+++ /dev/null
diff --git a/src/assets/image/decoration.png b/src/assets/image/decoration.png
new file mode 100644
index 0000000..dfba703
--- /dev/null
+++ b/src/assets/image/decoration.png
diff --git a/src/assets/image/footer.png b/src/assets/image/footer.png
deleted file mode 100644
index 98383d3..0000000
--- a/src/assets/image/footer.png
+++ /dev/null
diff --git a/src/assets/image/header.png b/src/assets/image/header.png
index 85c482d..61e82b0 100644
--- a/src/assets/image/header.png
+++ b/src/assets/image/header.png