further visual improvements

out/res/style.css

@@ -6,8 +6,8 @@
   --button-accent-color: #3d3d3d;
   --selected-bg-color: #2e2e2e;
   --hover-bg-color: #4d4d4d;
-  --card-border-radius: 0.5rem;
-  --button-border-radius: 0.5rem;
+  --card-border-radius: 14px;
+  --button-border-radius: 12px;
   --main-font-weight: 500;
   --cards-length: 675px;
 
@@ -16,12 +16,8 @@
 
 body {
   background-color: var(--body-bg-color);
-  background-image: url(wave.svg);
-  background-size: 100% auto;
-  background-repeat: no-repeat;
   font-family: var(--fonts-regular);
   font-weight: var(--main-font-weight);
-  
   color: #000000;
 }
 
@@ -39,10 +35,9 @@ body {
 }
 
 .Card.Card-layout {
-  margin: 36px auto;
-  padding: 26px;
+  margin: 28px auto;
+  padding: 24px;
   width: clamp(200px, 100%, var(--cards-length));
-  box-shadow: 0 0 28px 3px rgba(0, 0, 0, 0.40);
 }
 
 .Card.Card-inner {
@@ -53,24 +48,24 @@ body {
 
 /* Navigation */
 
+.Navigation {
+  display: flex;
+  flex-direction: row;
+}
+
 .Navigation-branding {
   display: inline-block;
   user-select: none;
   padding: 8px;
-  font-size: 18px;
   white-space: nowrap;
-  margin-left: 10px;
-  margin-right: 10px;
 }
 
-.Navigation-buttons {
-  display: flex;
-  flex-direction: row;
-  float: right;
+.Navigation .Button {
+  margin-left: 14px;
 }
 
-.Navigation-buttons .Button {
-  margin-left: 12px;
+.Navigation .Button:first-of-type {
+  margin-left: auto;
 }
 
 /* Button */
@@ -81,7 +76,7 @@ body {
   border: none;
   background-color: var(--accent-bg-color);
   border-radius: var(--button-border-radius);
-  padding: 8px;
+  padding: 10px;
   color: var(--button-accent-color);
   cursor: pointer;
   text-align: center;

src/index.js

@@ -45,11 +45,9 @@ const linkButton = ({ link, text, selected=false }) => `
 `;
 
 const navigation = ({currentName}) => `
-    <nav class="Card Card-layout">
+    <nav class="Navigation Card Card-layout">
         <b class="Navigation-branding">${data.navigationBrandingText}</b>
-        <div class="Navigation-buttons">
-            ${data.navigationLinks.map(e => linkButton({ ...e, selected: currentName === e.name })).join("")}
-        </div>
+        ${data.navigationLinks.map(e => linkButton({ ...e, selected: currentName === e.name })).join("")}
     </nav>
 `;