visual novel style: Shoko: "..." intro

index.html

@@ -11,12 +11,12 @@
     <section class="hero">
       <img src="shoko.jpg" alt="Shoko" class="avatar">
       <div class="typing">
-        <span class="typed-text"></span><span class="cursor">|</span>
+        <span class="name">Shoko:</span> <span class="typed-text"></span><span class="cursor">|</span>
       </div>
     </section>
 
     <script>
-      const text = "I solve problems. Don't ask me about my feelings.";
+      const text = "\"I solve problems. Don't ask me about my feelings.\"";
       const typed = document.querySelector('.typed-text');
       let i = 0;
       function type() {
@@ -26,7 +26,7 @@
           setTimeout(type, 50);
         }
       }
-      type();
+      setTimeout(type, 500);
     </script>
 
     <section class="what">

style.css

@@ -48,7 +48,11 @@ main {
 .typing {
   font-size: 1rem;
   color: var(--dim);
-  font-style: italic;
+}
+
+.typing .name {
+  color: var(--accent);
+  font-weight: 600;
 }
 
 .typing .cursor {