:root {
	--text: 22;
}
body {
	box-sizing: border-box;
	min-height: 100vh;
	display: grid;
    place-content: center;
	background: #222;
    color: #fff;
}

.typing-machine {
	font-size: 1rem;
	font-family: monospace;
	width: calc(1ch * var(--text));
	animation: writing 5s steps(var(--text)), pipe 0.5s step-end infinite alternate;
	white-space: nowrap;
	overflow: hidden;
	border-right: 2px solid #fff;
}

@keyframes writing {
	from {
		width: 0;
	}
}

@keyframes pipe {
	50% {
		border-color: transparent;
	}
}