#intro {
	position: fixed;
	top: 0; left: 0;
	width: 100vw; height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--background-dark);
	z-index: 99999999;
	transition: opacity 1s ease;
	color: #bcb3a9;
	font-size: 45px;
	font-family: ubuntu;
	letter-spacing: -3px;
}

#intro span {
	opacity: 0;
	display: inline-block;
}

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

@keyframes slideFadeIn {
	from { transform: translateX(20px); opacity: 0; }
	to { transform: translateX(0); opacity: 1; }
}

@keyframes slideFadeIn2 {
	from { transform: translateY(20px); opacity: 0; }
	to { transform: translateX(0); opacity: 1; }
}

#firstName {
	animation: fadeIn 1s forwards;
	animation-delay: 0.5s;
}

#lastName {
	animation: slideFadeIn2 1s forwards;
	animation-delay: 1.5s;
	color: rgb(245,225,160);
}

#designs {
	animation: slideFadeIn 1s forwards;
	animation-delay: 2.5s;

}

.fade-out {
	opacity: 0;
	pointer-events: none;
}