body,
html {
	margin: 0;
	padding: 0;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.outer-wrap {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #000;
}

.page-title {
	display: flex;
	position: relative;
	margin: 0;
	font-size: 8rem;
	color: #fff;
	font-family: 'Oswald', sans-serif;
	font-weight: normal;
}

.letter:nth-of-type(1),
.letter:nth-of-type(2),
.letter:nth-of-type(3) {
	position: relative;
	display: inline-block;
	top: 0;
}

.letter:nth-of-type(1) {
	-webkit-animation: drop 0.6s cubic-bezier(1, 0, 1, 0.7) 1;
	        animation: drop 0.6s cubic-bezier(1, 0, 1, 0.7) 1;
}

.letter:nth-of-type(2) {
	-webkit-animation: dropSecond 1.5s cubic-bezier(1, 0, 1, 0.7) 1;
	        animation: dropSecond 1.5s cubic-bezier(1, 0, 1, 0.7) 1;
}

.letter:nth-of-type(3) {
	-webkit-animation: dropThird 2.5s cubic-bezier(1, 0, 1, 0.7) 1;
	        animation: dropThird 2.5s cubic-bezier(1, 0, 1, 0.7) 1;
}

.last-name {
	margin-left: 0.125em;
	transform: scale(1) translateY(0);
	-webkit-animation: prepareName 3s linear 1,
		blowUp 0.3s 3s cubic-bezier(0.5, 0.2, 0.9, 0.8) 1;
	        animation: prepareName 3s linear 1,
		blowUp 0.3s 3s cubic-bezier(0.5, 0.2, 0.9, 0.8) 1;
}

@-webkit-keyframes drop {
	from {
		top: -5em;
	}
	to {
		top: 0;
	}
}

@keyframes drop {
	from {
		top: -5em;
	}
	to {
		top: 0;
	}
}

@-webkit-keyframes dropSecond {
	0% {
		top: -5em;
	}
	33.3% {
		top: -5em;
	}
	100% {
		top: 0;
	}
}

@keyframes dropSecond {
	0% {
		top: -5em;
	}
	33.3% {
		top: -5em;
	}
	100% {
		top: 0;
	}
}

@-webkit-keyframes dropThird {
	0% {
		top: -5em;
	}
	66.6% {
		top: -5em;
	}
	100% {
		top: 0;
	}
}

@keyframes dropThird {
	0% {
		top: -5em;
	}
	66.6% {
		top: -5em;
	}
	100% {
		top: 0;
	}
}

@-webkit-keyframes prepareName {
	from {
		transform: scale(0);
	}
	to {
		transform: scale(0);
	}
}

@keyframes prepareName {
	from {
		transform: scale(0);
	}
	to {
		transform: scale(0);
	}
}

@-webkit-keyframes blowUp {
	0% {
		transform: scale(0);
	}
	90% {
		transform: scale(1.08);
	}
	100% {
		transform: scale(1);
	}
}

@keyframes blowUp {
	0% {
		transform: scale(0);
	}
	90% {
		transform: scale(1.08);
	}
	100% {
		transform: scale(1);
	}
}

@media screen and (max-width: 500px) {
	.page-title {
		font-size: 2em;
	}
}