proper typing effect

www/anim.css

@@ -0,0 +1,50 @@
+body {
+  background-color: #0e0d14;
+}
+
+.heading {
+  font-family: monospace;
+  font-size: 2em;
+  font-weight: bold;
+  color: #ac4aed;
+}
+
+.centered {
+  margin-top: 25%; /* terrible solution... */
+}
+
+/* =========================================================== *
+ *                      Type Writer Effect                     *
+/* =========================================================== */
+
+.typing-wrapper {
+  display: flex;
+  text-align: center;
+  justify-content: center;
+}
+
+.typing-prompt {
+  display: inline-block;
+  text-align: center;
+}
+
+.typing {
+  display: inline-block;
+  width: 36ch;
+  animation: typing 3s steps(36), blink 1s step-end infinite alternate;
+  white-space: nowrap;
+  overflow: hidden;
+  border-right: 1ch solid;
+}
+
+@keyframes typing {
+  from {
+    width: 0
+  }
+}
+    
+@keyframes blink {
+  50% {
+    border-color: transparent
+  }
+}