increased font size for reader page

Author: Ciphrox

src/assets/styles/reader.css

@@ -1,12 +1,13 @@
-/* following :root block added by css color collector */
 :root {
   --main__txt--2: #ff61d5;
   --mute-button__bg--3: hsla(255, 100%, 50%, 0.281);
 }
 
 #container__reader {
-  font-size: min(28rem, 35vw);
+  font-size: min(40rem, 45vw);
   display: grid;
+  place-items: center;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
   place-content: center;
   color: var(--main__txt--2);
   height: 100vh;
@@ -19,13 +20,7 @@
   min-height: 60vh;
   line-height: 1;
   padding: 1rem;
-
-  & span:hover,
-  span:active,
-  span.active {
-    background-color: aliceblue;
-    color: #6767d3;
-  }
+  gap: 0.5rem;
 }
 
 .hide {
@@ -81,16 +76,16 @@
 
 @media screen and (max-width: 768px) {
   #container__reader {
-    font-size: min(20rem, 45vw);
+    font-size: min(30rem, 55vw);
   }
 }
 
 @media screen and (max-width: 480px) {
   #container__reader {
-    font-size: min(16rem, 55vw);
+    font-size: min(200rem, 70vw);
   }
-  
+
   .mute-button {
-    font-size: min(2rem, 6vw);
+    font-size: min(2.5rem, 8vw);
   }
 }

src/pages/reader.astro

@@ -19,7 +19,10 @@ import BaseLayout from "@/layouts/Base";
       description="Press any letter key (A-Z) to display it with a related emoji. Toggle the speaker buttons to change voices, and use the audio button to mute/unmute sounds."
     />
   </Fragment>
-  <article id="container__reader">a🍎</article>
+  <article id="container__reader">
+    <span class="letter" id="letter">a</span>
+    <span class="emoji" id="emoji" role="img" aria-label="apple"> 🍎 </span>
+  </article>
   <section class="section--audio hide">
     <audio id="audioPlayer" controlslist="nodownload" controls autoplay></audio>
   </section>