added help to typing and updated css

Author: Ciphrox

src/assets/styles/typing.css

@@ -2,12 +2,10 @@
 :root {
   --letter__txt--2: blueviolet;
   --spelling__txt--3: palevioletred;
-}
-:root {
   --steps: 10;
 }
 
-article.main {
+.container__typing {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: 40% auto;
@@ -18,38 +16,38 @@ article.main {
   font-size: 1rem;
   place-items: center;
   will-change: contents;
-}
 
-.letter {
-  grid-area: letter;
-  font-size: 18em;
-  color: var(--letter__txt--2);
-  transition: color 0.5s ease-in;
-}
+  & .letter {
+    grid-area: letter;
+    font-size: 18em;
+    color: var(--letter__txt--2);
+    transition: color 0.5s ease-in;
+  }
 
-.emoji {
-  grid-area: emoji;
-  font-size: 10em;
-}
+  & .emoji {
+    grid-area: emoji;
+    font-size: 10em;
+  }
 
-.animation {
-  animation:
-    typing 1s steps(var(--steps, 10)),
-    blink 0.5s step-end infinite alternate;
-}
+  & .animation {
+    animation:
+      typing 1s steps(var(--steps, 10)),
+      blink 0.5s step-end infinite alternate;
+  }
 
-.spelling {
-  grid-area: spelling;
-  grid-column: 1/3;
-  grid-row: 2/3;
-  width: 6ch;
-  white-space: nowrap;
-  overflow: hidden;
-  border-right: 3px solid;
-  font-family: monospace;
-  font-size: 8em;
-  transition: all 0.5s ease-in-out;
-  color: var(--spelling__txt--3);
+  & .spelling {
+    grid-area: spelling;
+    grid-column: 1/3;
+    grid-row: 2/3;
+    width: 6ch;
+    white-space: nowrap;
+    overflow: hidden;
+    border-right: 3px solid;
+    font-family: monospace;
+    font-size: 8em;
+    transition: all 0.5s ease-in-out;
+    color: var(--spelling__txt--3);
+  }
 }
 
 @keyframes typing {
@@ -62,4 +60,4 @@ article.main {
   50% {
     border-color: transparent;
   }
-}
+}

src/pages/typing.astro

@@ -1,10 +1,17 @@
 ---
 import "@/assets/styles/typing.css";
+import Help from "@/components/Help.astro";
 import BaseLayout from "@/layouts/Base";
 ---
 
 <BaseLayout meta={{ title: "Typing" }}>
-  <article class="main">
+  <Fragment slot="header-right">
+    <Help
+      title="Typing"
+      description="Press any letter key (A-Z) to see the letter, related emoji, and spelling word animation."
+    />
+  </Fragment>
+  <article class="tv container__typing">
     <div class="letter">A</div>
     <div class="emoji">🎸</div>
     <div class="spelling animation" id="spelling">Apple</div>