client/css/message.css

.message {
	width: 100%;
	overflow-wrap: break-word;
	display: flex;
	gap: var(--section-gap);
	padding: var(--section-gap);
	padding-bottom: 0;
    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;
}

.message:last-child {
	animation: 5.5s show_message;
}

@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;
	}
}






.wrapper {
  height: 100vh;
  /*This part is important for centering*/
  display: grid;
  place-items: center;
}