Capitalize categories, show and italicize answer for host

src/display/ClueDisplay.tsx

@@ -15,7 +15,9 @@ const ClueDisplay = ({ activeClue }: Props) => {
   }, []);
   return (
     <>
-      <div className="text-center fs-1">{activeClue.question}</div>
+      <div className="text-center fs-1 text-uppercase">
+        {activeClue.question}
+      </div>
       <Timer startTime={startTime} length={5000} />
     </>
   );

src/host/ActiveClue.tsx

@@ -30,6 +30,7 @@ const ActiveClue = ({ activeClue }: Props) => {
   return (
     <Container>
       <p>{activeClue.question}</p>
+      <p className="fst-italic">{activeClue.answer}</p>
       <Stack gap={3} className="text-center">
         {mode === "reading" && (
           <Button onClick={startTimer}>Start Timer</Button>

src/host/CluesDisplay.tsx

@@ -18,7 +18,7 @@ const CluesDisplay = () => {
       <Stack gap={3} className="text-center">
         {categories.map(({ name }) => (
           <Fragment key={name}>
-            <h2>{name}</h2>
+            <h2 className="text-uppercase">{name}</h2>
             {[200, 400, 600, 800, 1000].map((value) => (
               <Button key={value} onClick={() => activateClue(name, value)}>
                 {value}