From 724403d361133a67705ec5dd58f7ba7403c66b75 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Tue, 19 Sep 2023 23:53:13 +0100
Subject: [PATCH] refactor: use nav instead of a div

---
 frontend/src/styles/nav.scss                  |  4 +-
 frontend/src/styles/z_media-queries.scss      | 10 +--
 .../src/ts/commandline/lists/navigation.ts    |  4 +-
 .../src/ts/controllers/account-controller.ts  |  8 +-
 frontend/src/ts/elements/account-button.ts    | 74 +++++++++----------
 frontend/src/ts/elements/alerts.ts            |  6 +-
 frontend/src/ts/elements/leaderboards.ts      |  2 +-
 .../src/ts/popups/google-sign-up-popup.ts     |  2 +-
 frontend/src/ts/popups/simple-popups.ts       |  2 +-
 frontend/src/ts/test/test-logic.ts            |  2 +-
 frontend/static/funbox/crt.css                |  4 +-
 frontend/static/html/header.html              | 11 +--
 frontend/static/themes/9009.css               |  6 +-
 frontend/static/themes/aether.css             | 12 +--
 frontend/static/themes/aurora.css             |  2 +-
 frontend/static/themes/beach.css              | 12 +--
 frontend/static/themes/bingsu.css             |  2 +-
 frontend/static/themes/chaos_theory.css       | 44 +++++------
 frontend/static/themes/desert_oasis.css       | 12 +--
 frontend/static/themes/dmg.css                | 16 ++--
 frontend/static/themes/dots.css               | 52 ++++++-------
 frontend/static/themes/dracula.css            | 12 +--
 frontend/static/themes/dualshot.css           | 12 +--
 frontend/static/themes/fire.css               |  2 +-
 frontend/static/themes/fleuriste.css          |  4 +-
 frontend/static/themes/froyo.css              | 12 +--
 frontend/static/themes/fruit_chew.css         | 12 +--
 frontend/static/themes/future_funk.css        | 12 +--
 frontend/static/themes/graen.css              | 12 +--
 frontend/static/themes/grape.css              |  2 +-
 frontend/static/themes/horizon.css            | 12 +--
 frontend/static/themes/lavender.css           |  6 +-
 frontend/static/themes/lil_dragon.css         |  4 +-
 frontend/static/themes/metropolis.css         | 10 +--
 frontend/static/themes/milkshake.css          | 12 +--
 frontend/static/themes/modern_ink.css         |  4 +-
 frontend/static/themes/moonlight.css          | 52 ++++++-------
 frontend/static/themes/mr_sleeves.css         | 10 +--
 frontend/static/themes/oblivion.css           | 12 +--
 frontend/static/themes/purpurite.css          |  2 +-
 frontend/static/themes/retrocast.css          | 12 +--
 frontend/static/themes/rgb.css                |  2 +-
 frontend/static/themes/sewing_tin.css         |  4 +-
 frontend/static/themes/sewing_tin_light.css   |  4 +-
 frontend/static/themes/shadow.css             |  2 +-
 frontend/static/themes/snes.css               | 46 ++++++------
 frontend/static/themes/stealth.css            |  2 +-
 frontend/static/themes/taro.css               |  8 +-
 frontend/static/themes/trackday.css           |  6 +-
 frontend/static/themes/trance.css             |  2 +-
 50 files changed, 285 insertions(+), 294 deletions(-)

diff --git a/frontend/src/styles/nav.scss b/frontend/src/styles/nav.scss
index b96221d0d..167471821 100644
--- a/frontend/src/styles/nav.scss
+++ b/frontend/src/styles/nav.scss
@@ -1,4 +1,4 @@
-#menu {
+nav {
   font-size: 1rem;
   line-height: 1rem;
   color: var(--sub-color);
@@ -282,7 +282,7 @@ header {
       opacity: 0 !important;
     }
 
-    #menu {
+    nav {
       color: transparent;
 
       .textButton,
diff --git a/frontend/src/styles/z_media-queries.scss b/frontend/src/styles/z_media-queries.scss
index 42a283e58..dc738f47d 100644
--- a/frontend/src/styles/z_media-queries.scss
+++ b/frontend/src/styles/z_media-queries.scss
@@ -351,7 +351,7 @@
     line-height: 1.5rem;
     margin-top: -0.1em;
   }
-  #menu {
+  nav {
     gap: 0;
   }
   #testConfig {
@@ -510,7 +510,7 @@
 //650px
 @media only screen and (max-width: 40.625rem) {
   header {
-    #menu {
+    nav {
       .textButton.account {
         .text {
           display: none;
@@ -745,7 +745,7 @@
         display: none;
       }
     }
-    // #menu {
+    // nav {
     //   .textButton.account {
     //     .text {
     //       display: none;
@@ -895,7 +895,7 @@
   }
 
   header {
-    #menu {
+    nav {
       font-size: 1rem;
     }
   }
@@ -980,7 +980,7 @@
     }
   }
 
-  header #menu {
+  header nav {
     font-size: 0.75rem;
   }
 
diff --git a/frontend/src/ts/commandline/lists/navigation.ts b/frontend/src/ts/commandline/lists/navigation.ts
index 58409dab0..12dc438a9 100644
--- a/frontend/src/ts/commandline/lists/navigation.ts
+++ b/frontend/src/ts/commandline/lists/navigation.ts
@@ -16,7 +16,7 @@ const commands: MonkeyTypes.Command[] = [
     display: "View Leaderboards",
     icon: "fa-crown",
     exec: (): void => {
-      $("header #menu .textButton.view-leaderboards").trigger("click");
+      $("header nav .textButton.view-leaderboards").trigger("click");
     },
   },
   {
@@ -42,7 +42,7 @@ const commands: MonkeyTypes.Command[] = [
     icon: "fa-user",
     alias: "stats",
     exec: (): void => {
-      $("header #menu .textButton.view-account").hasClass("hidden")
+      $("header nav .textButton.view-account").hasClass("hidden")
         ? navigate("/login")
         : navigate("/account");
     },
diff --git a/frontend/src/ts/controllers/account-controller.ts b/frontend/src/ts/controllers/account-controller.ts
index 73e6cb5ce..73c04648d 100644
--- a/frontend/src/ts/controllers/account-controller.ts
+++ b/frontend/src/ts/controllers/account-controller.ts
@@ -100,7 +100,7 @@ async function getDataAndInit(): Promise<boolean> {
     const msg = e.message || e;
     Notifications.add("Failed to get user data: " + msg, -1);
 
-    $("header #menu .account").css("opacity", 1);
+    $("header nav .account").css("opacity", 1);
     return false;
   }
   if (ActivePage.get() === "loading") {
@@ -110,7 +110,7 @@ async function getDataAndInit(): Promise<boolean> {
   }
   LoadingPage.updateText("Applying settings...");
   const snapshot = DB.getSnapshot() as MonkeyTypes.Snapshot;
-  $("#menu .textButton.account > .text").text(snapshot.name);
+  $("nav .textButton.account > .text").text(snapshot.name);
   showFavoriteQuoteLength();
 
   ResultFilters.loadTags(snapshot.tags);
@@ -264,7 +264,7 @@ if (Auth && ConnectionState.get()) {
     }
   });
 } else {
-  $("#menu .signInOut").addClass("hidden");
+  $("nav .signInOut").addClass("hidden");
 
   $("document").ready(async () => {
     // await UpdateConfig.loadPromise;
@@ -557,7 +557,7 @@ async function signUp(): Promise<void> {
     await updateProfile(createdAuthUser.user, { displayName: nname });
     await sendVerificationEmail();
     AllTimeStats.clear();
-    $("#menu .textButton.account .text").text(nname);
+    $("nav .textButton.account .text").text(nname);
     LoginPage.hidePreloader();
     await loadUser(createdAuthUser.user);
     if (TestLogic.notSignedInLastResult !== null) {
diff --git a/frontend/src/ts/elements/account-button.ts b/frontend/src/ts/elements/account-button.ts
index d62155d36..0f4d4d95a 100644
--- a/frontend/src/ts/elements/account-button.ts
+++ b/frontend/src/ts/elements/account-button.ts
@@ -13,13 +13,11 @@ export function skipXpBreakdown(): void {
 
 export function loading(state: boolean): void {
   if (state) {
-    $("header #menu .account").css("opacity", 1).css("pointer-events", "none");
+    $("header nav .account").css("opacity", 1).css("pointer-events", "none");
 
     if (usingAvatar) {
-      $("header #menu .account .loading")
-        .css("opacity", 1)
-        .removeClass("hidden");
-      $("header #menu .account .avatar")
+      $("header nav .account .loading").css("opacity", 1).removeClass("hidden");
+      $("header nav .account .avatar")
         .stop(true, true)
         .css({ opacity: 1 })
         .animate(
@@ -28,11 +26,11 @@ export function loading(state: boolean): void {
           },
           100,
           () => {
-            $("header #menu .account .avatar").addClass("hidden");
+            $("header nav .account .avatar").addClass("hidden");
           }
         );
     } else {
-      $("header #menu .account .loading")
+      $("header nav .account .loading")
         .stop(true, true)
         .removeClass("hidden")
         .css({ opacity: 0 })
@@ -42,7 +40,7 @@ export function loading(state: boolean): void {
           },
           100
         );
-      $("header #menu .account .user")
+      $("header nav .account .user")
         .stop(true, true)
         .css({ opacity: 1 })
         .animate(
@@ -51,16 +49,16 @@ export function loading(state: boolean): void {
           },
           100,
           () => {
-            $("header #menu .account .user").addClass("hidden");
+            $("header nav .account .user").addClass("hidden");
           }
         );
     }
   } else {
-    $("header #menu .account").css("opacity", 1).css("pointer-events", "auto");
+    $("header nav .account").css("opacity", 1).css("pointer-events", "auto");
 
     if (usingAvatar) {
-      $("header #menu .account .loading").css("opacity", 1).addClass("hidden");
-      $("header #menu .account .avatar")
+      $("header nav .account .loading").css("opacity", 1).addClass("hidden");
+      $("header nav .account .avatar")
         .stop(true, true)
         .removeClass("hidden")
         .css({ opacity: 0 })
@@ -71,7 +69,7 @@ export function loading(state: boolean): void {
           100
         );
     } else {
-      $("header #menu .account .loading")
+      $("header nav .account .loading")
         .stop(true, true)
         .css({ opacity: 1 })
         .animate(
@@ -80,10 +78,10 @@ export function loading(state: boolean): void {
           },
           100,
           () => {
-            $("header #menu .account .loading").addClass("hidden");
+            $("header nav .account .loading").addClass("hidden");
           }
         );
-      $("header #menu .account .user")
+      $("header nav .account .user")
         .stop(true, true)
         .removeClass("hidden")
         .css({ opacity: 0 })
@@ -104,8 +102,8 @@ export async function update(
 ): Promise<void> {
   if (Auth?.currentUser) {
     if (xp !== undefined) {
-      $("header #menu .level").text(Math.floor(Misc.getLevel(xp)));
-      $("header #menu .bar").css({
+      $("header nav .level").text(Math.floor(Misc.getLevel(xp)));
+      $("header nav .bar").css({
         width: (Misc.getLevel(xp) % 1) * 100 + "%",
       });
     }
@@ -113,22 +111,22 @@ export async function update(
       Misc.getDiscordAvatarUrl(discordId, discordAvatar).then(
         (discordAvatarUrl) => {
           if (discordAvatarUrl) {
-            $("header #menu .account .avatar").css(
+            $("header nav .account .avatar").css(
               "background-image",
               `url(${discordAvatarUrl})`
             );
             usingAvatar = true;
 
-            $("header #menu .account .user").addClass("hidden");
-            $("header #menu .account .avatar").removeClass("hidden");
+            $("header nav .account .user").addClass("hidden");
+            $("header nav .account .avatar").removeClass("hidden");
           }
         }
       );
     } else {
-      $("header #menu .account .avatar").addClass("hidden");
-      $("header #menu .account .user").removeClass("hidden");
+      $("header nav .account .avatar").addClass("hidden");
+      $("header nav .account .user").removeClass("hidden");
     }
-    $("#menu .textButton.account")
+    $("nav .textButton.account")
       .removeClass("hidden")
       .css({ opacity: 0 })
       .animate(
@@ -138,7 +136,7 @@ export async function update(
         125
       );
   } else {
-    $("#menu .textButton.account")
+    $("nav .textButton.account")
       .css({ opacity: 1 })
       .animate(
         {
@@ -146,7 +144,7 @@ export async function update(
         },
         125,
         () => {
-          $("#menu .textButton.account").addClass("hidden");
+          $("nav .textButton.account").addClass("hidden");
         }
       );
   }
@@ -165,12 +163,12 @@ export async function updateXpBar(
   if (!snapshot) return;
 
   if (skipBreakdown) {
-    $("#menu .level").text(Math.floor(Misc.getLevel(snapshot.xp)));
-    $("#menu .xpBar")
+    $("nav .level").text(Math.floor(Misc.getLevel(snapshot.xp)));
+    $("nav .xpBar")
       .stop(true, true)
       .css("opacity", 1)
       .animate({ opacity: 0 }, SlowTimer.get() ? 0 : 250, () => {
-        $("#menu .xpBar .xpGain").text(``);
+        $("nav .xpBar .xpGain").text(``);
       });
     return;
   }
@@ -180,12 +178,12 @@ export async function updateXpBar(
 
   await Promise.all([xpBarPromise, xpBreakdownPromise]);
   await Misc.sleep(2000);
-  $("#menu .level").text(Math.floor(Misc.getLevel(snapshot.xp)));
-  $("#menu .xpBar")
+  $("nav .level").text(Math.floor(Misc.getLevel(snapshot.xp)));
+  $("nav .xpBar")
     .stop(true, true)
     .css("opacity", 1)
     .animate({ opacity: 0 }, SlowTimer.get() ? 0 : 250, () => {
-      $("#menu .xpBar .xpGain").text(``);
+      $("nav .xpBar .xpGain").text(``);
     });
 }
 
@@ -194,13 +192,13 @@ async function animateXpBreakdown(
   breakdown?: Record<string, number>
 ): Promise<void> {
   if (!breakdown) {
-    $("#menu .xpBar .xpGain").text(`+${addedXp}`);
+    $("nav .xpBar .xpGain").text(`+${addedXp}`);
     return;
   }
   const delay = 1000;
   let total = 0;
-  const xpGain = $("#menu .xpBar .xpGain");
-  const xpBreakdown = $("#menu .xpBar .xpBreakdown");
+  const xpGain = $("nav .xpBar .xpGain");
+  const xpBreakdown = $("nav .xpBar .xpBreakdown");
   xpBreakdown.empty();
 
   async function append(string: string): Promise<void> {
@@ -355,10 +353,10 @@ async function animateXpBar(
 ): Promise<void> {
   const difference = endingLevel - startingLevel;
 
-  $("#menu .xpBar").stop(true, true).css("opacity", 0);
+  $("nav .xpBar").stop(true, true).css("opacity", 0);
 
   await Misc.promiseAnimation(
-    $("#menu .xpBar"),
+    $("nav .xpBar"),
     {
       opacity: "1",
     },
@@ -366,7 +364,7 @@ async function animateXpBar(
     "linear"
   );
 
-  const barEl = $("#menu .xpBar .bar");
+  const barEl = $("nav .xpBar .bar");
 
   barEl.css("width", `${(startingLevel % 1) * 100}%`);
 
@@ -444,7 +442,7 @@ async function animateXpBar(
 
 async function flashLevel(): Promise<void> {
   const themecolors = await getAll();
-  const barEl = $("#menu .level");
+  const barEl = $("nav .level");
 
   barEl.text(parseInt(barEl.text()) + 1);
 
diff --git a/frontend/src/ts/elements/alerts.ts b/frontend/src/ts/elements/alerts.ts
index 51f3ad614..1508b4074 100644
--- a/frontend/src/ts/elements/alerts.ts
+++ b/frontend/src/ts/elements/alerts.ts
@@ -337,9 +337,9 @@ function fillNotifications(): void {
 
 export function setNotificationBubbleVisible(tf: boolean): void {
   if (tf) {
-    $("header #menu .showAlerts .notificationBubble").removeClass("hidden");
+    $("header nav .showAlerts .notificationBubble").removeClass("hidden");
   } else {
-    $("header #menu .showAlerts .notificationBubble").addClass("hidden");
+    $("header nav .showAlerts .notificationBubble").addClass("hidden");
   }
 }
 
@@ -430,7 +430,7 @@ $("#alertsPopupWrapper .accountAlerts").on("click", ".deleteAll", () => {
   }
 });
 
-$("header #menu .showAlerts").on("click", () => {
+$("header nav .showAlerts").on("click", () => {
   show();
 });
 
diff --git a/frontend/src/ts/elements/leaderboards.ts b/frontend/src/ts/elements/leaderboards.ts
index c0f09c5e4..d5ee07cc5 100644
--- a/frontend/src/ts/elements/leaderboards.ts
+++ b/frontend/src/ts/elements/leaderboards.ts
@@ -881,7 +881,7 @@ $(document).on("keydown", (event) => {
   }
 });
 
-$("header #menu").on("click", ".textButton", (e) => {
+$("header nav").on("click", ".textButton", (e) => {
   if ($(e.currentTarget).hasClass("leaderboards")) {
     show();
   }
diff --git a/frontend/src/ts/popups/google-sign-up-popup.ts b/frontend/src/ts/popups/google-sign-up-popup.ts
index 43f7d3a89..2aa272691 100644
--- a/frontend/src/ts/popups/google-sign-up-popup.ts
+++ b/frontend/src/ts/popups/google-sign-up-popup.ts
@@ -108,7 +108,7 @@ async function apply(): Promise<void> {
       await sendEmailVerification(signedInUser.user);
       AllTimeStats.clear();
       Notifications.add("Account created", 1);
-      $("#menu .textButton.account .text").text(name);
+      $("nav .textButton.account .text").text(name);
       LoginPage.enableInputs();
       LoginPage.hidePreloader();
       await AccountController.loadUser(signedInUser.user);
diff --git a/frontend/src/ts/popups/simple-popups.ts b/frontend/src/ts/popups/simple-popups.ts
index a15d47baf..2356c1206 100644
--- a/frontend/src/ts/popups/simple-popups.ts
+++ b/frontend/src/ts/popups/simple-popups.ts
@@ -579,7 +579,7 @@ list["updateName"] = new SimplePopup(
         reloadAfter(2);
       }
     }
-    $("#menu .textButton.account .text").text(newName);
+    $("nav .textButton.account .text").text(newName);
 
     return {
       status: 1,
diff --git a/frontend/src/ts/test/test-logic.ts b/frontend/src/ts/test/test-logic.ts
index 171531cfd..cd0586c4f 100644
--- a/frontend/src/ts/test/test-logic.ts
+++ b/frontend/src/ts/test/test-logic.ts
@@ -1578,7 +1578,7 @@ $("#popups").on(
   }
 );
 
-$("header").on("click", "#menu #startTestButton, .logo", () => {
+$("header").on("click", "nav #startTestButton, .logo", () => {
   if (ActivePage.get() === "test") restart();
 });
 
diff --git a/frontend/static/funbox/crt.css b/frontend/static/funbox/crt.css
index 30003bbf2..844a8290d 100644
--- a/frontend/static/funbox/crt.css
+++ b/frontend/static/funbox/crt.css
@@ -100,8 +100,8 @@ body.crtmode .logo .icon {
     drop-shadow(-3px 0px 0px var(--crt-main-color-glow));
 }
 body.crtmode .avatars,
-body.crtmode #menu .account .avatar,
-body.crtmode #menu .account .levelAndBar,
+body.crtmode nav .account .avatar,
+body.crtmode nav .account .levelAndBar,
 body.crtmode header.focus .logo .icon {
   filter: drop-shadow(3px 0px 1px var(--crt-sub-color-glow))
     drop-shadow(-3px 0px 0px var(--crt-sub-color-glow));
diff --git a/frontend/static/html/header.html b/frontend/static/html/header.html
index 3b0cb3b26..c9987b52a 100644
--- a/frontend/static/html/header.html
+++ b/frontend/static/html/header.html
@@ -43,7 +43,7 @@
       monkeytype
     </h1>
   </a>
-  <div id="menu">
+  <nav>
     <a
       id="startTestButton"
       class="textButton view-start"
@@ -133,12 +133,5 @@
         <i class="fas fa-fw fa-sign-in-alt"></i>
       </div>
     </button>
-  </div>
-  <!-- <div
-    class="signOut hidden"
-    style="grid-column: 3/4; grid-row: 1/2"
-  >
-    <i class="fas fa-sign-out-alt"></i>
-    sign out
-  </div> -->
+  </nav>
 </header>
diff --git a/frontend/static/themes/9009.css b/frontend/static/themes/9009.css
index 80d10b1a7..3080ae056 100644
--- a/frontend/static/themes/9009.css
+++ b/frontend/static/themes/9009.css
@@ -28,14 +28,14 @@ key {
   background-color: var(--main-color);
 }
 
-#menu .textButton {
+nav .textButton {
   color: var(--main-color);
 }
 
-#menu .textButton:nth-child(1) {
+nav .textButton:nth-child(1) {
   color: var(--error-color);
 }
 
-#menu .textButton:nth-child(4) {
+nav .textButton:nth-child(4) {
   color: var(--caret-color);
 }
diff --git a/frontend/static/themes/aether.css b/frontend/static/themes/aether.css
index 783bcf09b..5e2c6ccf3 100644
--- a/frontend/static/themes/aether.css
+++ b/frontend/static/themes/aether.css
@@ -11,23 +11,23 @@
   --colorful-error-extra-color: #e3002b;
 }
 
-#menu .textButton:nth-child(1) {
+nav .textButton:nth-child(1) {
   color: #e4002b;
 }
 
-#menu .textButton:nth-child(2) {
+nav .textButton:nth-child(2) {
   color: #c53562;
 }
 
-#menu .textButton:nth-child(3) {
+nav .textButton:nth-child(3) {
   color: #95549e;
 }
 
-#menu .textButton:nth-child(4) {
+nav .textButton:nth-child(4) {
   color: #6744a1;
 }
 
-#menu .textButton:nth-child(5),
-#menu .textButton:nth-child(6) {
+nav .textButton:nth-child(5),
+nav .textButton:nth-child(6) {
   color: #393c73;
 }
diff --git a/frontend/static/themes/aurora.css b/frontend/static/themes/aurora.css
index e05bc8268..bb49417b6 100644
--- a/frontend/static/themes/aurora.css
+++ b/frontend/static/themes/aurora.css
@@ -63,7 +63,7 @@ header .button.discord.dotHidden::after {
 .logo .bottom,
 header .config .group .buttons .textButton.active,
 #result .stats .group .bottom,
-#menu .textButton:hover,
+nav .textButton:hover,
 header .config .group .buttons .textButton:hover,
 a:hover,
 #words.flipped .word {
diff --git a/frontend/static/themes/beach.css b/frontend/static/themes/beach.css
index f5eb13b44..44587d42a 100644
--- a/frontend/static/themes/beach.css
+++ b/frontend/static/themes/beach.css
@@ -11,11 +11,11 @@
   --colorful-error-extra-color: #ff6f69;
 }
 
-#menu .textButton:nth-child(1),
-#menu .textButton:nth-child(2),
-#menu .textButton:nth-child(3),
-#menu .textButton:nth-child(4),
-#menu .textButton:nth-child(5),
-#menu .textButton:nth-child(6) {
+nav .textButton:nth-child(1),
+nav .textButton:nth-child(2),
+nav .textButton:nth-child(3),
+nav .textButton:nth-child(4),
+nav .textButton:nth-child(5),
+nav .textButton:nth-child(6) {
   color: #ff6f69;
 }
diff --git a/frontend/static/themes/bingsu.css b/frontend/static/themes/bingsu.css
index 8a85d7af7..9cbd6d133 100644
--- a/frontend/static/themes/bingsu.css
+++ b/frontend/static/themes/bingsu.css
@@ -16,6 +16,6 @@
   border-bottom: double 4px var(--error-color);
 } */
 
-#menu .textButton:nth-child(1) {
+nav .textButton:nth-child(1) {
   color: var(--caret-color);
 }
diff --git a/frontend/static/themes/chaos_theory.css b/frontend/static/themes/chaos_theory.css
index 6d3f11703..f7b9b3469 100644
--- a/frontend/static/themes/chaos_theory.css
+++ b/frontend/static/themes/chaos_theory.css
@@ -73,9 +73,9 @@ footer .leftright .right .current-theme .text {
   align-content: right;
 }
 
-header.focus #menu .textButton,
-header.focus #menu:before,
-header.focus #menu:after {
+header.focus nav .textButton,
+header.focus nav:before,
+header.focus nav:after {
   background: var(--sub-color);
   -webkit-transform: rotateY(180deg) !important;
 }
@@ -98,85 +98,85 @@ footer .leftright .right .current-theme:hover .fas.fa-fw.fa-palette {
   -webkit-transform: rotateY(180deg);
   transition: 0.5s;
 }
-#menu {
+nav {
   gap: 0.5rem;
 }
 
-#menu .textButton {
+nav .textButton {
   border-radius: 10rem i !important;
   color: var(--bg-color);
   transition: 0.5s;
 }
 
-#menu .textButton:nth-child(1) {
+nav .textButton:nth-child(1) {
   background: #ab92e1;
 }
 
-#menu .textButton:nth-child(2) {
+nav .textButton:nth-child(2) {
   background: #f3ea5d;
 }
 
-#menu .textButton:nth-child(3) {
+nav .textButton:nth-child(3) {
   background: #7ae1bf;
 }
 
-#menu .textButton:nth-child(4) {
+nav .textButton:nth-child(4) {
   background: #ff5869;
 }
 
-#menu .textButton:nth-child(5) {
+nav .textButton:nth-child(5) {
   background: #fc76d9;
 }
 
-#menu .textButton:nth-child(6) {
+nav .textButton:nth-child(6) {
   background: #fc76d9;
 }
 
-#menu .textButton:nth-child(7) {
+nav .textButton:nth-child(7) {
   background: #ab92e1;
 }
 
-#menu .textButton:nth-child(8) {
+nav .textButton:nth-child(8) {
   background: #f3ea5d;
 }
 
 body.crtmode {
-  #menu .textButton:nth-child(1) {
+  nav .textButton:nth-child(1) {
     box-shadow: 3px 0 1px color-mix(in srgb, #ab92e1 20%, transparent),
       -3px 0 color-mix(in srgb, #ab92e1 30%, transparent), 0 0 3px;
   }
 
-  #menu .textButton:nth-child(2) {
+  nav .textButton:nth-child(2) {
     box-shadow: 3px 0 1px color-mix(in srgb, #f3ea5d 20%, transparent),
       -3px 0 color-mix(in srgb, #f3ea5d 30%, transparent), 0 0 3px;
   }
 
-  #menu .textButton:nth-child(3) {
+  nav .textButton:nth-child(3) {
     box-shadow: 3px 0 1px color-mix(in srgb, #7ae1bf 20%, transparent),
       -3px 0 color-mix(in srgb, #7ae1bf 30%, transparent), 0 0 3px;
   }
 
-  #menu .textButton:nth-child(4) {
+  nav .textButton:nth-child(4) {
     box-shadow: 3px 0 1px color-mix(in srgb, #ff5869 20%, transparent),
       -3px 0 color-mix(in srgb, #ff5869 30%, transparent), 0 0 3px;
   }
 
-  #menu .textButton:nth-child(5) {
+  nav .textButton:nth-child(5) {
     box-shadow: 3px 0 1px color-mix(in srgb, #fc76d9 20%, transparent),
       -3px 0 color-mix(in srgb, #fc76d9 30%, transparent), 0 0 3px;
   }
 
-  #menu .textButton:nth-child(6) {
+  nav .textButton:nth-child(6) {
     box-shadow: 3px 0 1px color-mix(in srgb, #fc76d9 20%, transparent),
       -3px 0 color-mix(in srgb, #fc76d9 30%, transparent), 0 0 3px;
   }
 
-  #menu .textButton:nth-child(7) {
+  nav .textButton:nth-child(7) {
     box-shadow: 3px 0 1px color-mix(in srgb, #ab92e1 20%, transparent),
       -3px 0 color-mix(in srgb, #ab92e1 30%, transparent), 0 0 3px;
   }
 
-  #menu .textButton:nth-child(8) {
+  nav .textButton:nth-child(8) {
     box-shadow: 3px 0 1px color-mix(in srgb, #f3ea5d 20%, transparent),
       -3px 0 color-mix(in srgb, #f3ea5d 30%, transparent), 0 0 3px;
   }
@@ -187,7 +187,7 @@ body.crtmode {
       drop-shadow(-3px 0px 0px var(--crt-main-color-glow));
   }
 
-  header.focus #menu .textButton {
+  header.focus nav .textButton {
     box-shadow: 3px 0 1px var(--crt-sub-color-glow),
       -3px 0 var(--crt-sub-color-glow);
   }
diff --git a/frontend/static/themes/desert_oasis.css b/frontend/static/themes/desert_oasis.css
index 1418e4400..a72b68957 100644
--- a/frontend/static/themes/desert_oasis.css
+++ b/frontend/static/themes/desert_oasis.css
@@ -11,23 +11,23 @@
   --colorful-error-extra-color: #4e7a27;
 }
 
-#menu .textButton:nth-child(1) {
+nav .textButton:nth-child(1) {
   color: #76bb40;
 }
 
-#menu .textButton:nth-child(2) {
+nav .textButton:nth-child(2) {
   color: #76bb40;
 }
 
-#menu .textButton:nth-child(3) {
+nav .textButton:nth-child(3) {
   color: #76bb40;
 }
 
-#menu .textButton:nth-child(4) {
+nav .textButton:nth-child(4) {
   color: #76bb40;
 }
 
-#menu .textButton:nth-child(5),
-#menu .textButton:nth-child(6) {
+nav .textButton:nth-child(5),
+nav .textButton:nth-child(6) {
   color: #76bb40;
 }
diff --git a/frontend/static/themes/dmg.css b/frontend/static/themes/dmg.css
index d94d8af55..9b3d6e672 100644
--- a/frontend/static/themes/dmg.css
+++ b/frontend/static/themes/dmg.css
@@ -11,35 +11,35 @@
   --colorful-error-extra-color: #306230;
 }
 
-#menu {
+nav {
   gap: 0.5rem;
 }
 
-header.focus #menu .textButton {
+header.focus nav .textButton {
   background: var(--bg-color);
   size: 1rem;
 }
-header.focus #menu .textButton:nth-child(1) {
+header.focus nav .textButton:nth-child(1) {
   background: #e34c6c;
 }
-header.focus #menu:before,
-header.focus #menu:after {
+header.focus nav:before,
+header.focus nav:after {
   background: var(--sub-color);
 }
 
-#menu .textButton {
+nav .textButton {
   border-radius: 10rem !important;
   color: var(--bg-color);
   background: var(--main-color);
 }
 
 body.crtmode {
-  #menu .textButton {
+  nav .textButton {
     box-shadow: 3px 0 1px var(--crt-main-color-glow),
       -3px 0 var(--crt-main-color-glow), 0 0 3px;
   }
 
-  header.focus #menu .textButton {
+  header.focus nav .textButton {
     box-shadow: none;
     &:nth-child(1) {
       box-shadow: 3px 0 1px color-mix(in srgb, #e34c6c 20%, transparent),
diff --git a/frontend/static/themes/dots.css b/frontend/static/themes/dots.css
index d8b3f4faa..518faf989 100644
--- a/frontend/static/themes/dots.css
+++ b/frontend/static/themes/dots.css
@@ -11,22 +11,22 @@
   --colorful-error-extra-color: #791717;
 }
 
-#menu {
+nav {
   gap: 0.5rem;
 }
 
-header.focus #menu .textButton,
-header.focus #menu:before,
-header.focus #menu:after {
+header.focus nav .textButton,
+header.focus nav:before,
+header.focus nav:after {
   background: var(--sub-color);
 }
 
-#menu .textButton {
+nav .textButton {
   border-radius: 10rem !important;
   color: #121520;
 }
 
-/* #menu:before{
+/* nav:before{
     content: "";
     background: #f94348;
     width: 1.25rem;
@@ -35,47 +35,47 @@ header.focus #menu:after {
     border-radius: 10rem;
 } */
 
-#menu .textButton:nth-child(1) {
+nav .textButton:nth-child(1) {
   background: #f94348;
 }
 
-#menu .textButton:nth-child(2) {
+nav .textButton:nth-child(2) {
   background: #9261ff;
 }
 
-#menu .textButton:nth-child(3) {
+nav .textButton:nth-child(3) {
   background: #3cc5f8;
 }
 
-#menu .textButton:nth-child(4) {
+nav .textButton:nth-child(4) {
   background: #4acb8a;
 }
 
-header.focus #menu .textButton:nth-child(6) {
+header.focus nav .textButton:nth-child(6) {
   background: transparent !important;
 }
 
-#menu .textButton:nth-child(6) {
+nav .textButton:nth-child(6) {
   color: var(--sub-color);
 }
 
-#menu .textButton:nth-child(6):hover {
+nav .textButton:nth-child(6):hover {
   color: var(--text-color);
 }
 
-#menu .textButton:nth-child(7) {
+nav .textButton:nth-child(7) {
   background: #ffd543;
 }
 
-#menu .textButton:nth-child(8) {
+nav .textButton:nth-child(8) {
   background: #ff9349;
 }
 
-/* #menu .textButton:nth-child(8) {
+/* nav .textButton:nth-child(8) {
   background: #f94348;
 } */
 
-/* #menu:after{
+/* nav:after{
     content: "";
     background: #ff9349;
     width: 1.25rem;
@@ -84,46 +84,46 @@ header.focus #menu .textButton:nth-child(6) {
     border-radius: 10rem;
 } */
 
-header.focus #menu .textButton.discord::after {
+header.focus nav .textButton.discord::after {
   border-color: transparent;
 }
 
-#menu .textButton.account .xpBar {
+nav .textButton.account .xpBar {
   bottom: -0.75rem !important;
 }
 
 body.crtmode {
-  #menu .textButton:nth-child(1) {
+  nav .textButton:nth-child(1) {
     box-shadow: 3px 0 1px color-mix(in srgb, #f94348 20%, transparent),
       -3px 0 color-mix(in srgb, #f94348 30%, transparent), 0 0 3px;
   }
 
-  #menu .textButton:nth-child(2) {
+  nav .textButton:nth-child(2) {
     box-shadow: 3px 0 1px color-mix(in srgb, #9261ff 20%, transparent),
       -3px 0 color-mix(in srgb, #9261ff 30%, transparent), 0 0 3px;
   }
 
-  #menu .textButton:nth-child(3) {
+  nav .textButton:nth-child(3) {
     box-shadow: 3px 0 1px color-mix(in srgb, #3cc5f8 20%, transparent),
       -3px 0 color-mix(in srgb, #3cc5f8 30%, transparent), 0 0 3px;
   }
 
-  #menu .textButton:nth-child(4) {
+  nav .textButton:nth-child(4) {
     box-shadow: 3px 0 1px color-mix(in srgb, #4acb8a 20%, transparent),
       -3px 0 color-mix(in srgb, #4acb8a 30%, transparent), 0 0 3px;
   }
 
-  #menu .textButton:nth-child(7) {
+  nav .textButton:nth-child(7) {
     box-shadow: 3px 0 1px color-mix(in srgb, #ffd543 20%, transparent),
       -3px 0 color-mix(in srgb, #ffd543 30%, transparent), 0 0 3px;
   }
 
-  #menu .textButton:nth-child(8) {
+  nav .textButton:nth-child(8) {
     box-shadow: 3px 0 1px color-mix(in srgb, #ff9349 20%, transparent),
       -3px 0 color-mix(in srgb, #ff9349 30%, transparent), 0 0 3px;
   }
 
-  header.focus #menu .textButton {
+  header.focus nav .textButton {
     box-shadow: 3px 0 1px var(--crt-sub-color-glow),
       -3px 0 var(--crt-sub-color-glow);
 
diff --git a/frontend/static/themes/dracula.css b/frontend/static/themes/dracula.css
index b17f38db5..fb7f73f17 100644
--- a/frontend/static/themes/dracula.css
+++ b/frontend/static/themes/dracula.css
@@ -11,26 +11,26 @@
   --colorful-error-extra-color: #f1fa8c;
 }
 
-#menu .textButton:nth-child(1) {
+nav .textButton:nth-child(1) {
   color: #ec75c4;
 }
 
-#menu .textButton:nth-child(2) {
+nav .textButton:nth-child(2) {
   color: #8be9fd;
 }
 
-#menu .textButton:nth-child(3) {
+nav .textButton:nth-child(3) {
   color: #50fa7b;
 }
 
-#menu .textButton:nth-child(4) {
+nav .textButton:nth-child(4) {
   color: #f1fa8c;
 }
 
-#menu .textButton:nth-child(5) {
+nav .textButton:nth-child(5) {
   color: #ffb86c;
 }
 
-#menu .textButton:nth-child(6) {
+nav .textButton:nth-child(6) {
   color: #ffb86c;
 }
diff --git a/frontend/static/themes/dualshot.css b/frontend/static/themes/dualshot.css
index e73871e66..a0d7878be 100644
--- a/frontend/static/themes/dualshot.css
+++ b/frontend/static/themes/dualshot.css
@@ -11,26 +11,26 @@
   --colorful-error-extra-color: #ac1823;
 }
 
-#menu .textButton:nth-child(1) {
+nav .textButton:nth-child(1) {
   color: #2884bb;
 }
 
-#menu .textButton:nth-child(2) {
+nav .textButton:nth-child(2) {
   color: #25a5a9;
 }
 
-#menu .textButton:nth-child(3) {
+nav .textButton:nth-child(3) {
   color: #de9c24;
 }
 
-#menu .textButton:nth-child(4) {
+nav .textButton:nth-child(4) {
   color: #d82231;
 }
 
-#menu .textButton:nth-child(5) {
+nav .textButton:nth-child(5) {
   color: #212222;
 }
 
-#menu .textButton:nth-child(6) {
+nav .textButton:nth-child(6) {
   color: #212222;
 }
diff --git a/frontend/static/themes/fire.css b/frontend/static/themes/fire.css
index 676518ec2..aa0319481 100644
--- a/frontend/static/themes/fire.css
+++ b/frontend/static/themes/fire.css
@@ -63,7 +63,7 @@ header .button.discord.dotHidden::after {
 .logo .bottom,
 header .config .group .buttons .textButton.active,
 #result .stats .group .bottom,
-#menu .textButton:hover,
+nav .textButton:hover,
 header .config .group .buttons .textButton:hover,
 a:hover,
 #words.flipped .word {
diff --git a/frontend/static/themes/fleuriste.css b/frontend/static/themes/fleuriste.css
index ed7be0003..259db5bc4 100644
--- a/frontend/static/themes/fleuriste.css
+++ b/frontend/static/themes/fleuriste.css
@@ -11,9 +11,9 @@
   --colorful-error-extra-color: #bd4c4c;
 }
 
-/* #menu .textButton:nth-child(1, 3, 5) {
+/* nav .textButton:nth-child(1, 3, 5) {
   background: #405a52;
 }
-#menu .textButton:nth-child(2, 4) {
+nav .textButton:nth-child(2, 4) {
   background: #64374d;
 } */
diff --git a/frontend/static/themes/froyo.css b/frontend/static/themes/froyo.css
index 6bf4cc0b1..5002faf14 100644
--- a/frontend/static/themes/froyo.css
+++ b/frontend/static/themes/froyo.css
@@ -11,23 +11,23 @@
   --colorful-error-extra-color: #d56558;
 }
 
-#menu .textButton:nth-child(1) {
+nav .textButton:nth-child(1) {
   color: #ff7e73;
 }
 
-#menu .textButton:nth-child(2) {
+nav .textButton:nth-child(2) {
   color: #f5c370;
 }
 
-#menu .textButton:nth-child(3) {
+nav .textButton:nth-child(3) {
   color: #08d9a3;
 }
 
-#menu .textButton:nth-child(4) {
+nav .textButton:nth-child(4) {
   color: #0ca5e2;
 }
 
-#menu .textButton:nth-child(5),
-#menu .textButton:nth-child(6) {
+nav .textButton:nth-child(5),
+nav .textButton:nth-child(6) {
   color: #875ac6;
 }
diff --git a/frontend/static/themes/fruit_chew.css b/frontend/static/themes/fruit_chew.css
index e535da9b9..b9e38ca42 100644
--- a/frontend/static/themes/fruit_chew.css
+++ b/frontend/static/themes/fruit_chew.css
@@ -11,23 +11,23 @@
   --colorful-error-extra-color: #a62626;
 }
 
-#menu .textButton:nth-child(1) {
+nav .textButton:nth-child(1) {
   color: #a6bf50;
 }
 
-#menu .textButton:nth-child(2) {
+nav .textButton:nth-child(2) {
   color: #c3921a;
 }
 
-#menu .textButton:nth-child(3) {
+nav .textButton:nth-child(3) {
   color: #b92221;
 }
 
-#menu .textButton:nth-child(4) {
+nav .textButton:nth-child(4) {
   color: #88b6ce;
 }
 
-#menu .textButton:nth-child(5),
-#menu .textButton:nth-child(6) {
+nav .textButton:nth-child(5),
+nav .textButton:nth-child(6) {
   color: #661968;
 }
diff --git a/frontend/static/themes/future_funk.css b/frontend/static/themes/future_funk.css
index 7b609107e..4e55c6628 100644
--- a/frontend/static/themes/future_funk.css
+++ b/frontend/static/themes/future_funk.css
@@ -11,23 +11,23 @@
   --colorful-error-extra-color: #bd1c66;
 }
 
-#menu .textButton:nth-child(1) {
+nav .textButton:nth-child(1) {
   color: #f04e98;
 }
 
-#menu .textButton:nth-child(2) {
+nav .textButton:nth-child(2) {
   color: #f8bed6;
 }
 
-#menu .textButton:nth-child(3) {
+nav .textButton:nth-child(3) {
   color: #f6eb61;
 }
 
-#menu .textButton:nth-child(4) {
+nav .textButton:nth-child(4) {
   color: #a4dbe8;
 }
 
-#menu .textButton:nth-child(5),
-#menu .textButton:nth-child(6) {
+nav .textButton:nth-child(5),
+nav .textButton:nth-child(6) {
   color: #a266ed;
 }
diff --git a/frontend/static/themes/graen.css b/frontend/static/themes/graen.css
index 00e26af71..20f140200 100644
--- a/frontend/static/themes/graen.css
+++ b/frontend/static/themes/graen.css
@@ -11,11 +11,11 @@
   --colorful-error-extra-color: #5f0715;
 }
 
-#menu .textButton:nth-child(1),
-#menu .textButton:nth-child(2),
-#menu .textButton:nth-child(3),
-#menu .textButton:nth-child(4),
-#menu .textButton:nth-child(5),
-#menu .textButton:nth-child(6) {
+nav .textButton:nth-child(1),
+nav .textButton:nth-child(2),
+nav .textButton:nth-child(3),
+nav .textButton:nth-child(4),
+nav .textButton:nth-child(5),
+nav .textButton:nth-child(6) {
   color: #601420;
 }
diff --git a/frontend/static/themes/grape.css b/frontend/static/themes/grape.css
index 99cd1500b..9c1759745 100644
--- a/frontend/static/themes/grape.css
+++ b/frontend/static/themes/grape.css
@@ -63,7 +63,7 @@ header .button.discord.dotHidden::after {
 .logo .bottom,
 header .config .group .buttons .textButton.active,
 #result .stats .group .bottom,
-#menu .textButton:hover,
+nav .textButton:hover,
 header .config .group .buttons .textButton:hover,
 a:hover,
 #words.flipped .word {
diff --git a/frontend/static/themes/horizon.css b/frontend/static/themes/horizon.css
index 1c746a0d8..59bd035b5 100644
--- a/frontend/static/themes/horizon.css
+++ b/frontend/static/themes/horizon.css
@@ -11,23 +11,23 @@
   --colorful-error-extra-color: #d55170;
 }
 
-#menu .textButton:nth-child(1) {
+nav .textButton:nth-child(1) {
   color: #d55170;
 }
 
-#menu .textButton:nth-child(2) {
+nav .textButton:nth-child(2) {
   color: #e4a88a;
 }
 
-#menu .textButton:nth-child(3) {
+nav .textButton:nth-child(3) {
   color: #db886f;
 }
 
-#menu .textButton:nth-child(4) {
+nav .textButton:nth-child(4) {
   color: #db887a;
 }
 
-#menu .textButton:nth-child(5),
-#menu .textButton:nth-child(6) {
+nav .textButton:nth-child(5),
+nav .textButton:nth-child(6) {
   color: #ffc819;
 }
diff --git a/frontend/static/themes/lavender.css b/frontend/static/themes/lavender.css
index 54d9e7dd6..8f7667fdc 100644
--- a/frontend/static/themes/lavender.css
+++ b/frontend/static/themes/lavender.css
@@ -11,18 +11,18 @@
   --colorful-error-extra-color: #7e2a33;
 }
 
-#menu .textButton {
+nav .textButton {
   border-radius: 10rem !important;
   background: var(--text-color);
   color: var(--main-color);
 }
 
-#menu .textButton:hover {
+nav .textButton:hover {
   color: var(--bg-color);
 }
 
 body.crtmode {
-  #menu .textButton {
+  nav .textButton {
     box-shadow: 3px 0 1px var(--crt-text-color-glow),
       -3px 0 var(--crt-text-color-glow), 0 0 3px;
   }
diff --git a/frontend/static/themes/lil_dragon.css b/frontend/static/themes/lil_dragon.css
index 25f7c3e53..d5f8fa0e7 100644
--- a/frontend/static/themes/lil_dragon.css
+++ b/frontend/static/themes/lil_dragon.css
@@ -11,10 +11,10 @@
   --colorful-error-extra-color: #f279c2;
 }
 
-#menu .textButton {
+nav .textButton {
   color: #ba96db;
 }
 
-#menu .textButton:hover {
+nav .textButton:hover {
   color: #212b43;
 }
diff --git a/frontend/static/themes/metropolis.css b/frontend/static/themes/metropolis.css
index 422527fdd..eb5c771e0 100644
--- a/frontend/static/themes/metropolis.css
+++ b/frontend/static/themes/metropolis.css
@@ -15,22 +15,22 @@ header .logo .bottom {
   color: #f4bc46;
 }
 
-#menu .textButton:nth-child(1) {
+nav .textButton:nth-child(1) {
   color: #d44729;
 }
 
-#menu .textButton:nth-child(2) {
+nav .textButton:nth-child(2) {
   color: #d44729;
 }
 
-#menu .textButton:nth-child(3) {
+nav .textButton:nth-child(3) {
   color: #d44729;
 }
 
-#menu .textButton:nth-child(4) {
+nav .textButton:nth-child(4) {
   color: #d44729;
 }
 
-#menu .textButton:nth-child(5) {
+nav .textButton:nth-child(5) {
   color: #d44729;
 }
diff --git a/frontend/static/themes/milkshake.css b/frontend/static/themes/milkshake.css
index dd26c84a9..436172c36 100644
--- a/frontend/static/themes/milkshake.css
+++ b/frontend/static/themes/milkshake.css
@@ -11,26 +11,26 @@
   --colorful-error-extra-color: #e58c9d;
 }
 
-#menu .textButton:nth-child(1) {
+nav .textButton:nth-child(1) {
   color: #f19dac;
 }
 
-#menu .textButton:nth-child(2) {
+nav .textButton:nth-child(2) {
   color: #f6f4a0;
 }
 
-#menu .textButton:nth-child(3) {
+nav .textButton:nth-child(3) {
   color: #73e4d0;
 }
 
-#menu .textButton:nth-child(4) {
+nav .textButton:nth-child(4) {
   color: #61cfe6;
 }
 
-#menu .textButton:nth-child(5) {
+nav .textButton:nth-child(5) {
   color: #ba96db;
 }
 
-#menu .textButton:nth-child(6) {
+nav .textButton:nth-child(6) {
   color: #ba96db;
 }
diff --git a/frontend/static/themes/modern_ink.css b/frontend/static/themes/modern_ink.css
index 1ca55faee..e1bfa2c51 100644
--- a/frontend/static/themes/modern_ink.css
+++ b/frontend/static/themes/modern_ink.css
@@ -11,11 +11,11 @@
   --colorful-error-extra-color: #000000;
 }
 
-#menu .textButton:nth-child(1) {
+nav .textButton:nth-child(1) {
   color: #ff0000;
 }
 
-#menu .textButton:nth-child(5) {
+nav .textButton:nth-child(5) {
   color: #ff0000;
 }
 
diff --git a/frontend/static/themes/moonlight.css b/frontend/static/themes/moonlight.css
index 5c41bec47..710550033 100644
--- a/frontend/static/themes/moonlight.css
+++ b/frontend/static/themes/moonlight.css
@@ -11,66 +11,66 @@
   --colorful-error-color: #b81b2c;
   --colorful-error-extra-color: #84131f;
 }
-#menu {
+nav {
   gap: 0.5rem;
 }
-header.focus #menu .textButton,
-header.focus #menu:before,
-header.focus #menu:after {
+header.focus nav .textButton,
+header.focus nav:before,
+header.focus nav:after {
   background: var(--bg-color);
 }
-#menu .textButton:nth-child(1),
-#menu .textButton:nth-child(2),
-#menu .textButton:nth-child(3),
-#menu .textButton:nth-child(4) {
+nav .textButton:nth-child(1),
+nav .textButton:nth-child(2),
+nav .textButton:nth-child(3),
+nav .textButton:nth-child(4) {
   border-radius: rem !important;
   color: #191f28 !important;
   background: #c69f68;
 }
-#menu .textButton:nth-child(1):hover,
-#menu
+nav .textButton:nth-child(1):hover,
+nav
   .textButton:nth-child(2):hover
-  #menu
+  nav
   .textButton:nth-child(3):hover
-  #menu
+  nav
   .textButton:nth-child(4):hover {
   border-radius: rem !important;
   color: #4b5975 !important;
   transition: 0.25s;
 }
-/* #menu .textButton:nth-child(1) {
+/* nav .textButton:nth-child(1) {
   background: #c69f68;
 }
-#menu .textButton:nth-child(2) {
+nav .textButton:nth-child(2) {
   background: #c69f68;
 }
-#menu .textButton:nth-child(3) {
+nav .textButton:nth-child(3) {
   background: #c69f68;
 }
-#menu .textButton:nth-child(4) {
+nav .textButton:nth-child(4) {
   background: #c69f68;
 }
-#menu .textButton:nth-child(5) {
+nav .textButton:nth-child(5) {
   background: #c69f68;
 }
-#menu .textButton:nth-child(6),
-#menu .textButton:nth-child(7),
-#menu .textButton:nth-child(8) {
+nav .textButton:nth-child(6),
+nav .textButton:nth-child(7),
+nav .textButton:nth-child(8) {
   background: #c69f68;
 } */
-header.focus #menu .textButton.discord::after {
+header.focus nav .textButton.discord::after {
   border-color: transparent;
 }
 
 body.crtmode {
-  #menu .textButton:nth-child(1),
-  #menu .textButton:nth-child(2),
-  #menu .textButton:nth-child(3),
-  #menu .textButton:nth-child(4) {
+  nav .textButton:nth-child(1),
+  nav .textButton:nth-child(2),
+  nav .textButton:nth-child(3),
+  nav .textButton:nth-child(4) {
     box-shadow: 3px 0 1px color-mix(in srgb, #c69f68 20%, transparent),
       -3px 0 color-mix(in srgb, #c69f68 30%, transparent), 0 0 3px;
   }
-  header.focus #menu .textButton {
+  header.focus nav .textButton {
     box-shadow: none;
   }
 }
diff --git a/frontend/static/themes/mr_sleeves.css b/frontend/static/themes/mr_sleeves.css
index 59debea3a..4438c27b1 100644
--- a/frontend/static/themes/mr_sleeves.css
+++ b/frontend/static/themes/mr_sleeves.css
@@ -19,19 +19,19 @@ header .config .group .buttons .textButton.active {
   color: #daa99b;
 }
 
-/* #menu .textButton:nth-child(1){
+/* nav .textButton:nth-child(1){
     color: #daa99b;
 }
 
-#menu .textButton:nth-child(2){
+nav .textButton:nth-child(2){
     color: #daa99b;
 }
 
-#menu .textButton:nth-child(3){
+nav .textButton:nth-child(3){
     color: #8fadc9;
 }
 
-#menu .textButton:nth-child(4),
-#menu .textButton:nth-child(5){
+nav .textButton:nth-child(4),
+nav .textButton:nth-child(5){
     color: #8fadc9;
 } */
diff --git a/frontend/static/themes/oblivion.css b/frontend/static/themes/oblivion.css
index 164213670..1b7a8951a 100644
--- a/frontend/static/themes/oblivion.css
+++ b/frontend/static/themes/oblivion.css
@@ -11,23 +11,23 @@
   --colorful-error-extra-color: #9e3423;
 }
 
-#menu .textButton:nth-child(1) {
+nav .textButton:nth-child(1) {
   color: #9a90b4;
 }
 
-#menu .textButton:nth-child(2) {
+nav .textButton:nth-child(2) {
   color: #8db14b;
 }
 
-#menu .textButton:nth-child(3) {
+nav .textButton:nth-child(3) {
   color: #fca321;
 }
 
-#menu .textButton:nth-child(4) {
+nav .textButton:nth-child(4) {
   color: #2984a5;
 }
 
-#menu .textButton:nth-child(5),
-#menu .textButton:nth-child(6) {
+nav .textButton:nth-child(5),
+nav .textButton:nth-child(6) {
   color: #dd452e;
 }
diff --git a/frontend/static/themes/purpurite.css b/frontend/static/themes/purpurite.css
index cd788ab6a..5ac8782f3 100644
--- a/frontend/static/themes/purpurite.css
+++ b/frontend/static/themes/purpurite.css
@@ -11,7 +11,7 @@
   --colorful-error-extra-color: #ff6666;
 }
 
-#menu .textButton {
+nav .textButton {
   color: #99ffdd;
 }
 
diff --git a/frontend/static/themes/retrocast.css b/frontend/static/themes/retrocast.css
index d59c694c4..104fe6ea6 100644
--- a/frontend/static/themes/retrocast.css
+++ b/frontend/static/themes/retrocast.css
@@ -11,23 +11,23 @@
   --colorful-error-extra-color: #c04455;
 }
 
-#menu .textButton:nth-child(1) {
+nav .textButton:nth-child(1) {
   color: #88dbdf;
 }
 
-#menu .textButton:nth-child(2) {
+nav .textButton:nth-child(2) {
   color: #88dbdf;
 }
 
-#menu .textButton:nth-child(3) {
+nav .textButton:nth-child(3) {
   color: #88dbdf;
 }
 
-#menu .textButton:nth-child(4) {
+nav .textButton:nth-child(4) {
   color: #ff585d;
 }
 
-#menu .textButton:nth-child(5),
-#menu .textButton:nth-child(6) {
+nav .textButton:nth-child(5),
+nav .textButton:nth-child(6) {
   color: #f3e03b;
 }
diff --git a/frontend/static/themes/rgb.css b/frontend/static/themes/rgb.css
index 4766c85ef..ddffd28b0 100644
--- a/frontend/static/themes/rgb.css
+++ b/frontend/static/themes/rgb.css
@@ -93,7 +93,7 @@ header .button.discord.dotHidden::after {
 .logo .bottom,
 header .config .group .buttons .textButton.active,
 #result .stats .group .bottom,
-#menu .textButton:hover,
+nav .textButton:hover,
 header .config .group .buttons .textButton:hover,
 a:hover,
 #words.flipped .word {
diff --git a/frontend/static/themes/sewing_tin.css b/frontend/static/themes/sewing_tin.css
index 0467cc3e5..1a035ca62 100644
--- a/frontend/static/themes/sewing_tin.css
+++ b/frontend/static/themes/sewing_tin.css
@@ -11,10 +11,10 @@
   --colorful-error-extra-color: #c6915e;
 }
 
-#menu .textButton {
+nav .textButton {
   color: #f2ce83;
 }
 
-#menu .textButton:hover {
+nav .textButton:hover {
   color: #c6915e;
 }
diff --git a/frontend/static/themes/sewing_tin_light.css b/frontend/static/themes/sewing_tin_light.css
index 93bc91541..fd61ec5b3 100644
--- a/frontend/static/themes/sewing_tin_light.css
+++ b/frontend/static/themes/sewing_tin_light.css
@@ -11,11 +11,11 @@
   --colorful-error-extra-color: #f2ce83;
 }
 
-#menu .textButton {
+nav .textButton {
   color: #f2ce83;
 }
 
-#menu .textButton:hover {
+nav .textButton:hover {
   color: #c6915e;
 }
 
diff --git a/frontend/static/themes/shadow.css b/frontend/static/themes/shadow.css
index 715ec517f..0bcac9c73 100644
--- a/frontend/static/themes/shadow.css
+++ b/frontend/static/themes/shadow.css
@@ -41,7 +41,7 @@ header .logo .text {
 
 header .config .group .buttons .textButton.active,
 #result .stats .group,
-#menu .textButton:hover,
+nav .textButton:hover,
 header .config .group .buttons .textButton:hover,
 a:hover {
   animation: shadow-repeat 3s linear infinite forwards;
diff --git a/frontend/static/themes/snes.css b/frontend/static/themes/snes.css
index 34f6253c4..9e24cfec8 100644
--- a/frontend/static/themes/snes.css
+++ b/frontend/static/themes/snes.css
@@ -11,82 +11,82 @@
   --colorful-error-extra-color: #7e2a33;
 }
 
-#menu {
+nav {
   gap: 0.5rem;
 }
 
-header.focus #menu .textButton,
-header.focus #menu:before,
-header.focus #menu:after {
+header.focus nav .textButton,
+header.focus nav:before,
+header.focus nav:after {
   background: #99989f;
 }
 
-#menu .textButton {
+nav .textButton {
   border-radius: 10rem !important;
   color: var(--bg-color);
 }
 
-#menu .textButton:nth-child(1) {
+nav .textButton:nth-child(1) {
   background: #553d94;
 }
-#menu .textButton:nth-child(2) {
+nav .textButton:nth-child(2) {
   background: #6851a4;
 }
-#menu .textButton:nth-child(3) {
+nav .textButton:nth-child(3) {
   background: #7962b3;
 }
-#menu .textButton:nth-child(4) {
+nav .textButton:nth-child(4) {
   background: #8c76c3;
 }
-#menu .textButton:nth-child(5) {
+nav .textButton:nth-child(5) {
   background: #9f8ad4;
 }
-#menu .textButton:nth-child(6),
-#menu .textButton:nth-child(7) {
+nav .textButton:nth-child(6),
+nav .textButton:nth-child(7) {
   background: #9f8ad4;
 }
 
-#menu .textButton:nth-child(8) {
+nav .textButton:nth-child(8) {
   background: #a692d7;
 }
 
-header.focus #menu .textButton.discord::after {
+header.focus nav .textButton.discord::after {
   border-color: transparent;
 }
 
 body.crtmode {
-  #menu .textButton:nth-child(1) {
+  nav .textButton:nth-child(1) {
     box-shadow: 3px 0 1px color-mix(in srgb, #553d94 20%, transparent),
       -3px 0 color-mix(in srgb, #553d94 30%, transparent), 0 0 3px;
   }
-  #menu .textButton:nth-child(2) {
+  nav .textButton:nth-child(2) {
     box-shadow: 3px 0 1px color-mix(in srgb, #6851a4 20%, transparent),
       -3px 0 color-mix(in srgb, #6851a4 30%, transparent), 0 0 3px;
   }
-  #menu .textButton:nth-child(3) {
+  nav .textButton:nth-child(3) {
     box-shadow: 3px 0 1px color-mix(in srgb, #7962b3 20%, transparent),
       -3px 0 color-mix(in srgb, #7962b3 30%, transparent), 0 0 3px;
   }
-  #menu .textButton:nth-child(4) {
+  nav .textButton:nth-child(4) {
     box-shadow: 3px 0 1px color-mix(in srgb, #8c76c3 20%, transparent),
       -3px 0 color-mix(in srgb, #8c76c3 30%, transparent), 0 0 3px;
   }
-  #menu .textButton:nth-child(5) {
+  nav .textButton:nth-child(5) {
     box-shadow: 3px 0 1px color-mix(in srgb, #9f8ad4 20%, transparent),
       -3px 0 color-mix(in srgb, #9f8ad4 30%, transparent), 0 0 3px;
   }
-  #menu .textButton:nth-child(6),
-  #menu .textButton:nth-child(7) {
+  nav .textButton:nth-child(6),
+  nav .textButton:nth-child(7) {
     box-shadow: 3px 0 1px color-mix(in srgb, #9f8ad4 20%, transparent),
       -3px 0 color-mix(in srgb, #9f8ad4 30%, transparent), 0 0 3px;
   }
 
-  #menu .textButton:nth-child(8) {
+  nav .textButton:nth-child(8) {
     box-shadow: 3px 0 1px color-mix(in srgb, #a692d7 20%, transparent),
       -3px 0 color-mix(in srgb, #a692d7 30%, transparent), 0 0 3px;
   }
 
-  header.focus #menu .textButton {
+  header.focus nav .textButton {
     box-shadow: 3px 0 1px color-mix(in srgb, #99989f 20%, transparent),
       -3px 0 color-mix(in srgb, #99989f 30%, transparent), 0 0 3px;
   }
diff --git a/frontend/static/themes/stealth.css b/frontend/static/themes/stealth.css
index fe519e237..1b5903a11 100644
--- a/frontend/static/themes/stealth.css
+++ b/frontend/static/themes/stealth.css
@@ -10,7 +10,7 @@
   --colorful-error-color: #e25303;
   --colorful-error-extra-color: #73280c;
 }
-#menu .textButton:nth-child(4) {
+nav .textButton:nth-child(4) {
   color: #e25303;
 }
 #timerNumber {
diff --git a/frontend/static/themes/taro.css b/frontend/static/themes/taro.css
index c835cf8e1..2dba09ec3 100644
--- a/frontend/static/themes/taro.css
+++ b/frontend/static/themes/taro.css
@@ -16,23 +16,23 @@
   border-bottom: dotted 2px var(--text-color);
 }
 
-#menu .textButton:nth-child(1) {
+nav .textButton:nth-child(1) {
   background: var(--caret-color);
   border-radius: 50%;
 }
 
-#menu .textButton:nth-child(2) {
+nav .textButton:nth-child(2) {
   background: var(--error-color);
   border-radius: 50%;
 }
 
 body.crtmode {
-  #menu .textButton:nth-child(1) {
+  nav .textButton:nth-child(1) {
     box-shadow: 3px 0 1px var(--crt-caret-color-glow),
       -3px 0 var(--crt-caret-color-glow);
   }
 
-  #menu .textButton:nth-child(2) {
+  nav .textButton:nth-child(2) {
     box-shadow: 3px 0 1px var(--crt-error-color-glow),
       -3px 0 var(--crt-error-color-glow);
   }
diff --git a/frontend/static/themes/trackday.css b/frontend/static/themes/trackday.css
index f7aa5a346..4d01f19c0 100644
--- a/frontend/static/themes/trackday.css
+++ b/frontend/static/themes/trackday.css
@@ -11,14 +11,14 @@
   --colorful-error-extra-color: #bb2525;
 }
 
-#menu .textButton:nth-child(1) {
+nav .textButton:nth-child(1) {
   color: #e0513e;
 }
 
-#menu .textButton:nth-child(3) {
+nav .textButton:nth-child(3) {
   color: #cfcfcf;
 }
 
-#menu .textButton:nth-child(2) {
+nav .textButton:nth-child(2) {
   color: #ccc500;
 }
diff --git a/frontend/static/themes/trance.css b/frontend/static/themes/trance.css
index 5a59d51aa..3b8353fe7 100644
--- a/frontend/static/themes/trance.css
+++ b/frontend/static/themes/trance.css
@@ -51,7 +51,7 @@ header .button.discord.dotHidden::after {
 .logo .bottom,
 header .config .group .buttons .textButton.active,
 #result .stats .group .bottom,
-#menu .textButton:hover,
+nav .textButton:hover,
 header .config .group .buttons .textButton:hover,
 a:hover,
 #words.flipped .word {