/* Nome */
.type {
	overflow: hidden;
	animation:
		typing 1s steps(20, end) forwards,
		blinking 0.6s infinite alternate;
}

.delete {
	overflow: hidden;
	animation:
		deleting 1s steps(20, end) forwards,
		blinking 0.6s infinite alternate;
}

#name > h1 {
	animation: blinking 0.6s infinite alternate;
}

@keyframes blinking {
	from {
		border-color: transparent;
	}
	to {
		border-color: --caret-color;
	}
}

@keyframes typing {
	from {
		width: 0;
	}
	to {
		width: 100%;
	}
}

@keyframes deleting {
	from {
		width: 100%;
	}
	to {
		width: 0;
	}
}

/* Entradas */
#enzoFace {
	animation: appearFromRightShort 0.6s forwards;
	opacity: 0;
	animation-delay: 0.2s;
}

#shortDescription {
	animation: appearFromLeftShort 0.6s forwards;
	opacity: 0;
	animation-delay: 0.2s;
}

#mainButtons div:nth-child(1) {
	animation: appearFromLeftIntense 0.6s forwards;
	opacity: 0;
	animation-delay: 0.3s;
}

#mainButtons div:nth-child(2) {
	animation: appearFromLeftIntense 0.6s forwards;
	opacity: 0;
	animation-delay: 0.4s;
}

@keyframes appearFromLeftShort {
	from {
		opacity: 0;
		transform: translateX(15%);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes appearFromLeftIntense {
	from {
		opacity: 0;
		transform: translateX(35%);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes appearFromRightShort {
	from {
		opacity: 0;
		transform: translateX(-15%);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}