Magic & padding

Author: Rupesh-Rathore

src/assets/styles/varnmala/reader.css

@@ -18,11 +18,21 @@
   gap: 0.5rem;
   height: max-content;
 }
+.info {
+    font-size: 1rem;
+    color: #6b7280;
+    font-weight: 500;
+    margin: 0 auto;
+    text-align: center;
+    padding: 0.5rem;
+  }
 .container__reader > .letter{
   width: 100%;
     box-sizing: border-box;
     margin-left: 4rem;
-    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
 }
 .hide {
   display: none;
@@ -174,6 +184,7 @@
     font-size: min(200rem, 70vw);
   }
 .container__reader > .letter{
+  justify-content: center;
   margin-left: auto;
 }
   .mute-button {

src/pages/varnmala/listen.astro

@@ -32,8 +32,10 @@ import KeyboardTrigger from "@/components/KeyboardTrigger.astro";
       />
     </Fragment>
 
+    <div class="info">Press a key to see the magic</div>
     <article id="container__reader" class="container__reader">
-      <div class="letter">a🍎</div></article>
+      <div class="letter">a🍎</div>
+    </article>
     <section class="section--audio hide">
       <audio id="audioPlayer" controlslist="nodownload" controls autoplay></audio>
     </section>