Update client/css/typing.css

client/css/typing.css

@@ -1,15 +1,28 @@
-.typing {
-	position: absolute;
-	top: -25px;
-	left: 0;
-	font-size: 14px;
-	animation: show_popup 0.4s;
+.wrapper {
+  height: 100vh;
+  /*This part is important for centering*/
+  display: grid;
+  place-items: center;
 }
 
-.typing-hiding {
-	animation: hide_popup 0.4s;
+.typing-demo {
+  width: 22ch;
+  animation: typing 2s steps(22), blink .5s step-end infinite alternate;
+  white-space: nowrap;
+  overflow: hidden;
+  border-right: 3px solid;
+  font-family: monospace;
+  font-size: 2em;
 }
 
-.typing-hidden {
-	display: none;
+@keyframes typing {
+  from {
+    width: 0
+  }
 }
+    
+@keyframes blink {
+  50% {
+    border-color: transparent
+  }
+}