impr(large test stats): better positioning on all screen sizes

frontend/src/html/pages/test.html

@@ -102,7 +102,9 @@
     <div id="layoutfluidTimer">Time left to memorise all words: 0s</div>
     <div id="testModesNotice"></div>
     <div id="liveStatsTextTop" class="timerMain">
-      <div class="timerProgress hidden">1:00</div>
+      <div class="wrapper">
+        <div class="timerProgress hidden">1:00</div>
+      </div>
     </div>
     <div id="liveStatsMini" class="full-width timerMain">
       <div class="time hidden">1:00</div>
@@ -150,9 +152,11 @@
       <i class="fas fa-fw fa-redo-alt"></i>
     </button>
     <div id="liveStatsTextBottom" class="timerMain">
-      <div class="liveSpeed hidden">123</div>
-      <div class="liveAcc hidden">100%%</div>
-      <div class="liveBurst hidden">1</div>
+      <div class="wrapper">
+        <div class="liveSpeed hidden">123</div>
+        <div class="liveAcc hidden">100%%</div>
+        <div class="liveBurst hidden">1</div>
+      </div>
     </div>
     <div id="monkey" class="hidden">
       <div class="up"></div>

frontend/src/styles/media-queries-blue.scss

@@ -23,6 +23,10 @@
     }
   }
   .pageTest {
+    #liveStatsTextTop,
+    #liveStatsTextBottom {
+      font-size: 5rem;
+    }
     #result .wrapper {
       grid-template-columns: 1fr;
       grid-template-areas:

frontend/src/styles/media-queries-green.scss

@@ -36,6 +36,10 @@
       grid-template-columns: 1fr 1fr 1fr;
       grid-template-rows: 1fr 1fr;
     }
+    #liveStatsTextTop,
+    #liveStatsTextBottom {
+      font-size: 7rem;
+    }
   }
   .pageAbout {
     .section {

frontend/src/styles/media-queries-purple.scss

@@ -34,6 +34,10 @@
     }
   }
   .pageTest {
+    #liveStatsTextTop,
+    #liveStatsTextBottom {
+      font-size: 12vw;
+    }
     #testConfig {
       display: none;
     }

frontend/src/styles/media-queries-yellow.scss

@@ -21,6 +21,12 @@
       }
     }
   }
+  .pageTest {
+    #liveStatsTextTop,
+    #liveStatsTextBottom {
+      font-size: 9rem;
+    }
+  }
   #leaderboardsWrapper #leaderboards {
     table thead tr td:nth-child(4),
     table tbody tr td:nth-child(4),

frontend/src/styles/test.scss

@@ -119,45 +119,51 @@
 
   #liveStatsTextTop {
     pointer-events: none;
-    transition: 0.25s;
-    height: 0;
     color: black;
-    line-height: 0;
     z-index: -1;
     text-align: center;
-    left: 0;
     width: 100%;
     position: relative;
-    font-size: clamp(1rem, 12vw, 10rem);
+    display: grid;
+    font-size: 10rem;
 
     opacity: 0;
     width: 0;
     height: 0;
-    margin: 0 auto;
-    display: grid;
-    justify-content: center;
-    bottom: clamp(2rem, 12vw, 6rem);
+    justify-self: center;
 
     transition: none;
+
+    .wrapper {
+      position: absolute;
+      bottom: 1.25rem;
+      display: flex;
+      justify-self: center;
+      gap: 0.5ch;
+      line-height: 1;
+    }
   }
 
   #liveStatsTextBottom {
-    font-size: clamp(1rem, 12vw, 10rem);
+    font-size: 10rem;
     color: black;
     width: 100%;
-    left: 0;
     text-align: center;
     z-index: -1;
     height: 0;
-    line-height: 0;
-    top: clamp(1rem, 10vw, 5rem);
     position: relative;
     display: grid;
-    grid-auto-flow: column;
-    justify-content: center;
-    gap: clamp(1rem, 8vw, 5rem);
-    width: 0;
     margin: 0 auto;
+    pointer-events: none;
+
+    .wrapper {
+      position: absolute;
+      top: 1rem;
+      display: flex;
+      justify-self: center;
+      gap: 0.5ch;
+      line-height: 1;
+    }
   }
 
   #liveStatsTextBottom.timerMain,