Massive style changes

wwwroot/css/nav.css

@@ -1,28 +1,40 @@
 #nav {
-  padding: var(--s3) calc(var(--s4) * 1.5);
   border-bottom: var(--border-width) solid var(--f2-border);
+  flex-shrink: 0;
+  display: flex;
+  justify-content: center;
+}
+
+.nav-content {
   display: flex;
   align-items: center;
-  gap: calc(var(--s4) * 2);
-  flex-shrink: 0;
+  gap: var(--page-spacing);
+  width: var(--page-width);
+  max-width: 100%;
+  padding: var(--box-padding);
+}
+
+.nav-brand,
+.nav-link {
+  padding: var(--badge-padding);
+  color: var(--text);
+  border-bottom: 2px solid transparent;
 }
 
 .nav-links {
   display: flex;
-  gap: var(--s4);
+  gap: var(--box-spacing);
 }
 
 .nav-link {
   text-decoration: none;
-  padding: var(--s1) var(--s2);
-  color: var(--text);
 }
 
 .nav-link:hover {
-  color: var(--text);
+  color: var(--text-accent);
 }
 
 .nav-link.active {
-  color: var(--text);
-  border-bottom: 2px solid var(--primary);
+  color: var(--text-accent);
+  border-bottom-color: var(--primary);
 }