:root {
	--bg-color: hsl(49 37% 94%);
	--subtext-color: hsl(0 0% 0% / 0.7);
	--highlight-color: hsl(180 100% 30% / 0.7);
	--typewriterSpeed: 2s;
	--typewriterCharacters: 13;
	--highlight-speed: 0.3s
}

body {
	margin: 0;
	font-family: "Source Sans Pro", sans-serif;
	min-height: 100vh;
	display: grid;
	place-content: center;
	text-align: center;
	background: var(--bg-color);
}

h1 {
	font-size: 4rem;
	position: relative;
	font-family: "Source Code Pro", monospace;
	position: relative;
	width: max-content;
}

li {
	display: inline;
	padding-inline-start: 0;
}

ul {
	margin: 0;
	padding: 0;
	margin-top: 1rem;
	display: inline-block;
	float: none;
}

.download{
	color: var(--subtext-color);
	margin: 0 1rem 0 1rem;
}

li p {
	color: var(--subtext-color);
	font-size: 2rem;
	margin: 0 1rem 0 1rem;
	transition: var(--highlight-speed);
}

a, .download {
	color: var(--subtext-color);
	text-decoration: none;
	transition: var(--highlight-speed);
}

a p:hover, a:hover {
	transform: scale(1.3, 1.3);
	color: var(--highlight-color);
}

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

h1::before {
	background: var(--bg-color);
	animation: typewriter var(--typewriterSpeed) steps(var(--typewriterCharacters)) 1s forwards;
}

h1::after {
	width: 0.125em;
	background: black;
	animation: typewriter var(--typewriterSpeed) steps(var(--typewriterCharacters)) 1s forwards,
		blink 750ms steps(var(--typewriterCharacters)) infinite;
}

.face {
	width: 20rem;
	height: 20rem;
	margin-left: auto;
	margin-right: auto;
	opacity: 0;
	transform: translateY(-3rem) scale(0.8, 0.8);
	animation: fadeInDown 2s ease calc(var(--typewriterSpeed) + 2s) forwards;
}

.email {
	color: var(--subtext-color);
	font-size: 1rem;
	margin: 0;
}

.subtitle {
	color: var(--subtext-color);
	font-size: 2rem;
	font-weight: 400;
	opacity: 0;
	transform: translateY(3rem);
	animation: fadeInUp 2s ease calc(var(--typewriterSpeed) + 2s) forwards;
}

.subtitle2 {
	color: var(--subtext-color);
	font-size: 1.5rem;
	font-weight: 400;
	opacity: 0;
	transform: translateY(3rem);
	animation: fadeInUp 2s ease calc(var(--typewriterSpeed) + 4s) forwards;
}

.subtitle3 {
	color: var(--subtext-color);
	font-size: 1.5rem;
	font-weight: 400;
	opacity: 0;
	transform: translateY(3rem);
	animation: fadeInUp 2s ease calc(var(--typewriterSpeed) + 6s) forwards;
	margin-top: 2rem;
}

.subtitle4 {
	color: var(--subtext-color);
	font-size: 1.5rem;
	font-weight: 400;
	opacity: 0;
	transform: translateY(3rem);
	animation: fadeInUp 2s ease calc(var(--typewriterSpeed) + 8s) forwards;
	margin-top: 2rem;
}

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

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

@keyframes fadeInUp {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeInDown {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}