header heavy refactor

style.css

@@ -127,7 +127,7 @@ a:hover {
 /* Banner */
 header {
   position: relative;
-  margin: 18px 0 40px 0;
+  margin-top: 24px;
 }
 #header-img-group-banner img {
   width: 100%;
@@ -144,22 +144,23 @@ header {
   right: 0;
   margin: auto;
 
-  height: 160px;
-  width: 180px;
+  height: 140px;
+  width: 160px;
 
   -o-object-fit: contain;
   object-fit: contain;
 
   background-color: var(--background);
+
+  z-index: 0;
 }
 
 /* NavList */
-header nav {
-  position: absolute;
+#navigation {
   width: 100%;
-  bottom: -5px;
+  margin: -25px auto 25px auto;
 }
-header nav ul {
+#navigation ul {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -174,44 +175,42 @@ header nav ul {
 
   font-size: 22px;
 }
-header nav ul li {
+#navigation ul li {
   position: relative;
   padding: 2px 0;
 
-  -webkit-box-flex: 1;
-  -ms-flex-positive: 1;
+  flex-wrap: wrap;
+  width: calc(100% / 5);
   flex-grow: 1;
 
   text-align: center;
   list-style: none;
 }
-header nav #whitespace {
-  -webkit-box-flex: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
+#navigation #whitespace {
+  width: calc(100% / 5);
 }
-header nav li#here a {
+#navigation li#here a {
   cursor: not-allowed;
   background-color: var(--accent-2);
   color: var(--background);
   text-decoration: line-through;
 }
-header nav li#parent a {
+#navigation li#parent a {
   background-color: var(--accent-2);
   color: var(--background);
 }
-header nav li#parent a::after {
+#navigation li#parent a::after {
   content: "*";
 }
-header nav li#parent a:hover {
+#navigation li#parent a:hover {
   background-color: var(--max-1) !important;
 }
-header nav li a {
+#navigation li a {
   padding: 2px 10px;
   color: var(--accent-2);
   background-color: var(--max-0);
 }
-header nav li:not(#here) a:hover {
+#navigation li:not(#here) a:hover {
   color: var(--background);
   background-color: var(--accent-2);
 }
@@ -227,6 +226,8 @@ header nav li:not(#here) a:hover {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
+  flex-wrap: wrap;
+
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
   -ms-flex-direction: row;
@@ -234,10 +235,10 @@ header nav li:not(#here) a:hover {
   -webkit-box-pack: space-evenly;
   -ms-flex-pack: space-evenly;
   justify-content: space-evenly;
-  margin: 25px 0;
 }
 #socials img {
   width: 40px;
+  margin: auto 20px;
 }
 #socials a {
   -webkit-transition: ease-in-out 100ms;
@@ -265,26 +266,27 @@ header nav li:not(#here) a:hover {
 
 @media only screen and (max-width: 790px) {
   header {
-    margin: 18px 0 80px 0;
+    margin-top: 18px;
   }
-  header nav {
-    position: absolute;
-    bottom: -50px;
+  #navigation {
+    margin: 5px auto;
   }
-  header nav ul li a img {
-    display: block;
+  #navigation ul li {
+    min-width: 91px;
+    margin: 10px auto;
+    flex-grow: 1;
+    flex-wrap: wrap;
   }
   #header-img-group-banner img {
     height: 50px;
   }
   #header-img-group-logo img {
-    height: 100px;
-    width: 120px;
+    height: 80px;
+    width: 100px;
   }
 
   #whitespace,
-  #arrow,
-  #here {
+  #arrow {
     display: none;
   }
   li#music:not(#here) a {
@@ -442,7 +444,7 @@ footer#free {
 
 /* asset layouts */
 .ly-sect {
-  margin: 40px 0;
+  margin: 20px auto;
 }
 .ly-sect > h1 {
   position: relative;
@@ -457,7 +459,7 @@ footer#free {
   display: -ms-flexbox;
   display: flex;
   width: min(95%, 2000px);
-  margin: 10px auto;
+  margin: auto;
 
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
@@ -497,9 +499,6 @@ footer#free {
   -o-transition: ease-in-out 100ms;
   transition: ease-in-out 100ms;
 }
-.ly-sect.ly-square {
-  margin: 40px 0;
-}
 .ly-sect.ly-square > h1 {
   display: inline-block;
   margin: 20px 20% 0 20%;