@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+Display:wght@100;200;300;400;500;600;700;800;900&family=Source+Sans+Pro:wght@300;400;600;700;900&display=swap");

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	min-height: 100vh;
	font-family: "Courier New", Courier, monospace;

	display: grid;
	place-content: center;
	text-align: center;

	background: #ffe4b5;
}

h1 {
	font-size: clamp(1rem, 3vw + 1rem, 4rem);
	font-weight: 800;

	word-spacing: 5px;

	position: relative;

	width: max-content;
	height: fit-content;

	margin-bottom: 30px;
}

h1::before,
h1::after {
	content: "";
	position: absolute;
	top: 7px;
	left: 0;
	bottom: 0;
	right: 0;

	height: 100%;
}

h1::before {
	background: #ffe4b5;

	animation: type 12s steps(29) 1s forwards;
}

h1::after {
	width: 0.12em;
	background: #333;

	animation: type 12s steps(29) 1s forwards, write 650ms steps(29) infinite;
}

p {
	font-size: 20px;
	font-weight: 400px;

	word-spacing: 2.5px;

	opacity: 0;

	animation: fade 3s ease 13s forwards;
}

@keyframes type {
	to {
		left: 100%;
	}
}

@keyframes write {
	to {
		background: transparent;
	}
}

@keyframes fade {
	to {
		opacity: 1;
	}
}