wave canvas styling fix + links righthand bar

src/nav/nav.scss

@@ -1,16 +1,16 @@
 $padding: 15px;
 $menu: #282c34;
 
-.menu-btn:hover {
+.menu-btn>button:hover {
   opacity: 90%;
 }
 
-.menu-btn:active {
+.menu-btn>button:active {
   opacity: 80%;
 }
 
 .menu-btn {
-  justify-self: center;
+  align-self: center;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -19,29 +19,35 @@ $menu: #282c34;
   }
 }
 
-.name {
-  position: absolute;
-  font-weight: bold;
-  left: 50%;
-  transform: translateX(-50%);
-
-}
-
-.header {
+nav {
   background-color: $menu;
   padding: $padding;
   display: flex;
-  font-size: calc(10px + 2vmin);
-  color: white;
-  min-height: 3 * $padding;
+  justify-content: center;
+}
+
+nav>a{
+  text-align: center;
+}
+
+.name>h1 {
+  margin: 0;
+  font-size: 40px;
 }
 
 .name {
-  align-self: center;
-  flex-grow: 1;
+  margin: auto;
+  position: relative;
 }
+
 .wave {
   user-select: none;
   pointer-events: none;
   position: absolute;
+}
+
+.links {
+  display: flex;
+  flex-grow: 1;
+  gap: 15px;
 }