.projScreenSwitchOut {
	animation: projScreenSwitchOut 0.3s ease;
}
@keyframes projScreenSwitchOut {
	0% {
		opacity: 1;
		transform: translateX(0);
	}
	40% {
		opacity: 0;
	}
	100% {
		opacity: 0;
		transform: translateX(-100%);
	}
}
.projScreenSwitchIn {
	animation: projScreenSwitchIn 0.3s ease;
}
@keyframes projScreenSwitchIn {
	0% {
		opacity: 0;
		transform: translateX(100%);
	}
	40% {
		opacity: 1;
	}
	70% {
		transform: translateX(-5%);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}
.projScreenChangeName {
	animation: projScreenChangeName 0.3s ease;
}
@keyframes projScreenChangeName {
	0% {
		color: var(--black-07);
	}
	50% {
		color: rgba(0, 0, 0, 0);
	}
	100% {
		color: var(--black-07);
	}
}

.showIn {
	animation: 0.5s showIn ease forwards;
}
@keyframes showIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
.showOut {
	animation: showOut 0.5s ease forwards;
}
@keyframes showOut {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

.listPopIn {
	opacity: 0;
	animation: 0.5s listPopIn ease forwards;
	animation-delay: calc(var(--order) * 50ms);
}
@keyframes listPopIn {
	0% {
		opacity: 0;
		transform: translateY(80%);
	}
	20% {
		opacity: 0;
		transform: translateY(40%);
	}
	70% {
		opacity: 0.2;
		transform: translateY(-10%);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
.listPopOut {
	opacity: 1;
	animation: listPopOut 0.5s ease forwards;
	animation-delay: calc(var(--order) * 50ms);
}
@keyframes listPopOut {
	0% {
		opacity: 1;
		transform: translateY(0%);
	}
	20% {
		opacity: 0.6;
		transform: translateY(0%);
	}
	70% {
		opacity: 0.2;
		transform: translateY(-10%);
	}
	100% {
		opacity: 0;
		transform: translateY(80%);
	}
}

.listElementPopIn {
	opacity: 0;
	animation: listElementPopIn 0.4s ease forwards;
	animation-delay: calc(var(--order) * 40ms);
}
@keyframes listElementPopIn {
	0% {
		opacity: 0;
		transform: translateY(-200%);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.contactPopIn {
	opacity: 0;
	background: var(--theme-purple);
	animation: contactPopIn 0.4s ease forwards;
	animation-delay: calc(var(--order) * 40ms);
}
@keyframes contactPopIn {
	0% {
		opacity: 0;
		transform: scale(0.5);
		background: var(--theme-purple);
	}
	60% {
		transform: scale(1.1);
	}
	100% {
		opacity: 1;
		transform: scale(1);
		background: var(--white-elevated);
	}
}
.contactPopOut {
	opacity: 1;
	background: var(--white-elevated);
	animation: contactPopOut 0.3s ease forwards;
	animation-delay: calc(var(--order) * 30ms);
}
@keyframes contactPopOut {
	0% {
		opacity: 1;
		transform: scale(1);
		background: var(--white-elevated);
	}
	40% {
		transform: scale(1.1);
	}
	100% {
		opacity: 0;
		transform: scale(0.5);
		background: var(--theme-purple);
	}
}

#rocketBody {
	animation: rocketBody 5s ease infinite;
}
@keyframes rocketBody {
	0% {
		transform: rotate(0);
	}
	40% {
		transform: rotate(-1deg);
	}
	80% {
		transform: rotate(1deg);
	}
	100% {
		transform: rotate(0);
	}
}
#moonParticle1 {
	animation: moonParticle1 2s ease infinite;
}
#moonParticle2 {
	animation: moonParticle2 3s ease infinite;
}
#moonParticle3 {
	animation: moonParticle3 4s ease infinite;
}
#moonParticle4 {
	animation: moonParticle1 5s ease infinite;
}
#moonParticle5 {
	animation: moonParticle2 6s ease infinite;
}
#moonParticle6 {
	animation: moonParticle3 7s ease infinite;
}
@keyframes moonParticle1 {
	0% {
		transform: rotate(0);
	}
	50% {
		transform: rotate(2deg);
	}
	100% {
		transform: rotate(0);
	}
}
@keyframes moonParticle2 {
	0% {
		transform: rotate(0);
	}
	50% {
		transform: rotate(-2deg);
	}
	100% {
		transform: rotate(0);
	}
}
@keyframes moonParticle3 {
	0% {
		transform: rotate(0);
	}
	50% {
		transform: rotate(6deg);
	}
	100% {
		transform: rotate(0);
	}
}