Update client/css/message.css

client/css/message.css

@@ -1,65 +1,28 @@
-.message {
-	width: 100%;
-	overflow-wrap: break-word;
-	display: flex;
-	gap: var(--section-gap);
-	padding: var(--section-gap);
-	padding-bottom: 0;
+.wrapper {
+  height: 100vh;
+  /*This part is important for centering*/
+  display: grid;
+  place-items: center;
 }
 
-.message:last-child {
-	animation: 0.6s show_message;
+.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;
 }
 
-@keyframes show_message {
-	from {
-		transform: translateY(10px);
-		opacity: 0;
-	}
-}
-
-.message .avatar-container img {
-	max-width: 48px;
-	max-height: 48px;
-	box-shadow: 0.4px 0.5px 0.7px -2px rgba(0, 0, 0, 0.08), 1.1px 1.3px 2px -2px rgba(0, 0, 0, 0.041),
-		2.7px 3px 4.8px -2px rgba(0, 0, 0, 0.029), 9px 10px 16px -2px rgba(0, 0, 0, 0.022);
-}
-
-.message .content {
-	display: flex;
-	flex-direction: column;
-	width: 90%;
-	gap: 18px;
-}
-
-.message .content p,
-.message .content li,
-.message .content code {
-	font-size: 1rem;
-	line-height: 1.3;
-}
-
-@media screen and (max-height: 720px) {
-	.message {
-		padding: 12px;
-		gap: 0;
-	}
-
-	.message .content {
-		margin-left: 8px;
-		width: 80%;
-	}
-
-	.message .avatar-container img {
-		max-width: 32px;
-		max-height: 32px;
-	}
-
-	.message .content,
-	.message .content p,
-	.message .content li,
-	.message .content code {
-		font-size: 0.875rem;
-		line-height: 1.3;
-	}
+@keyframes typing {
+  from {
+    width: 0
+  }
 }
+    
+@keyframes blink {
+  50% {
+    border-color: transparent
+  }
+}