@import url('https://fonts.googleapis.com/css?family=Titan+One&display=swap');

body {
	background-color: #000;
	font-family: 'Titan One', cursive;
}

.container {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	transform-style: preserve-3d;
	transform: rotatex(-5deg) rotateY(-45deg);
	animation: movewave 30s ease-in-out infinite;
}

.wave {
	position: absolute;
	font-size: 10rem;
	transform-style: preserve-3d;
	letter-spacing: 2rem;
	font-weight: 900;
}

.wave:nth-child(1) {
	transform: translatez(-20px) translateY(-40px) rotateX(15deg);
	animation: move-1 ease-in-out 2s infinite;
	animation-delay: 0.1s;
	color: #07beb8;
	text-shadow: 0px 0px #330b00;
}

.wave:nth-child(2) {
	transform: translatez(-40px) translateY(-40px) rotateX(15deg);
	animation: move-2 ease-in-out 2s infinite;
	animation-delay: 0.2s;
	color: #3dccc7;
	text-shadow: 0px 0px #331700;
}

.wave:nth-child(3) {
	transform: translatez(-60px) translateY(-40px) rotateX(15deg);
	animation: move-3 ease-in-out 2s infinite;
	animation-delay: 0.3s;
	color: #68d8d6;
	text-shadow: 0px 0px #320;
}

.wave:nth-child(4) {
	transform: translatez(-80px) translateY(-40px) rotateX(15deg);
	animation: move-4 ease-in-out 2s infinite;
	animation-delay: 0.4s;
	color: #9ceaef;
	text-shadow: 0px 0px #332e00;
}

.wave:nth-child(5) {
	transform: translatez(-100px) translateY(-40px) rotateX(15deg);
	animation: move-5 ease-in-out 2s infinite;
	animation-delay: 0.5s;
	color: #c4fff9;
	text-shadow: 0px 0px #2d3300;
}

.wave:nth-child(6) {
	transform: translatez(-120px) translateY(-40px) rotateX(15deg);
	animation: move-6 ease-in-out 2s infinite;
	animation-delay: 0.6s;
	color: #2c7da0;
	text-shadow: 0px 0px #213300;
}

.wave:nth-child(7) {
	transform: translatez(-140px) translateY(-40px) rotateX(15deg);
	animation: move-7 ease-in-out 2s infinite;
	animation-delay: 0.7s;
	color: #468faf;
	text-shadow: 0px 0px #163300;
}

.wave:nth-child(8) {
	transform: translatez(-160px) translateY(-40px) rotateX(15deg);
	animation: move-8 ease-in-out 2s infinite;
	animation-delay: 0.8s;
	color: #61a5c2;
	text-shadow: 0px 0px #0a3300;
}

.wave:nth-child(9) {
	transform: translatez(-180px) translateY(-40px) rotateX(15deg);
	animation: move-9 ease-in-out 2s infinite;
	animation-delay: 0.9s;
	color: #89c2d9;
	text-shadow: 0px 0px #003301;
}

.wave:nth-child(10) {
	transform: translatez(-200px) translateY(-40px) rotateX(15deg);
	animation: move-10 ease-in-out 2s infinite;
	animation-delay: 1s;
	color: #a9d6e5;
	text-shadow: 0px 0px #00330d;
}

.wave:nth-child(11) {
	transform: translatez(-220px) translateY(-40px) rotateX(15deg);
	animation: move-11 ease-in-out 2s infinite;
	animation-delay: 1.1s;
	color: #abc4ff;
	text-shadow: 0px 0px #003318;
}

.wave:nth-child(12) {
	transform: translatez(-240px) translateY(-40px) rotateX(15deg);
	animation: move-12 ease-in-out 2s infinite;
	animation-delay: 1.2s;
	color: #b6ccfe;
	text-shadow: 0px 0px #003324;
}

.wave:nth-child(13) {
	transform: translatez(-260px) translateY(-40px) rotateX(15deg);
	animation: move-13 ease-in-out 2s infinite;
	animation-delay: 1.3s;
	color: #c1d3fe;
	text-shadow: 0px 0px #00332f;
}

.wave:nth-child(14) {
	transform: translatez(-280px) translateY(-40px) rotateX(15deg);
	animation: move-14 ease-in-out 2s infinite;
	animation-delay: 1.4s;
	color: #ccdbfd;
	text-shadow: 0px 0px #002b33;
}

.wave:nth-child(15) {
	transform: translatez(-300px) translateY(-40px) rotateX(15deg);
	animation: move-15 ease-in-out 2s infinite;
	animation-delay: 1.5s;
	color: #99c1de;
	text-shadow: 0px 0px #002033;
}

.wave:nth-child(16) {
	transform: translatez(-320px) translateY(-40px) rotateX(15deg);
	animation: move-16 ease-in-out 2s infinite;
	animation-delay: 1.6s;
	color: #bcd4e6;
	text-shadow: 0px 0px #001433;
}

.wave:nth-child(17) {
	transform: translatez(-340px) translateY(-40px) rotateX(15deg);
	animation: move-17 ease-in-out 2s infinite;
	animation-delay: 1.7s;
	color: #d6e2e9;
	text-shadow: 0px 0px #000933;
}

.wave:nth-child(18) {
	transform: translatez(-360px) translateY(-40px) rotateX(15deg);
	animation: move-18 ease-in-out 2s infinite;
	animation-delay: 1.8s;
	color: #d6e2e9;
	text-shadow: 0px 0px #030033;
}

.wave:nth-child(19) {
	transform: translatez(-380px) translateY(-40px) rotateX(15deg);
	animation: move-19 ease-in-out 2s infinite;
	animation-delay: 1.9s;
	color: #dbe7e4;
	text-shadow: 0px 0px #0e0033;
}

.wave:nth-child(20) {
	transform: translatez(-400px) translateY(-40px) rotateX(15deg);
	animation: move-20 ease-in-out 2s infinite;
	animation-delay: 2s;
	color: #c5dedd;
	text-shadow: 0px 0px #1a0033;
}

@keyframes move-1 {

	0%,
	100% {
		transform: translatez(-20px) translateY(-40px) rotateX(15deg);
	}

	50% {
		transform: translatez(-20px) translateY(40px) rotateX(-15deg);
	}
}

@keyframes move-2 {

	0%,
	100% {
		transform: translatez(-40px) translateY(-40px) rotateX(15deg);
	}

	50% {
		transform: translatez(-40px) translateY(40px) rotateX(-15deg);
	}
}

@keyframes move-3 {

	0%,
	100% {
		transform: translatez(-60px) translateY(-40px) rotateX(15deg);
	}

	50% {
		transform: translatez(-60px) translateY(40px) rotateX(-15deg);
	}
}

@keyframes move-4 {

	0%,
	100% {
		transform: translatez(-80px) translateY(-40px) rotateX(15deg);
	}

	50% {
		transform: translatez(-80px) translateY(40px) rotateX(-15deg);
	}
}

@keyframes move-5 {

	0%,
	100% {
		transform: translatez(-100px) translateY(-40px) rotateX(15deg);
	}

	50% {
		transform: translatez(-100px) translateY(40px) rotateX(-15deg);
	}
}

@keyframes move-6 {

	0%,
	100% {
		transform: translatez(-120px) translateY(-40px) rotateX(15deg);
	}

	50% {
		transform: translatez(-120px) translateY(40px) rotateX(-15deg);
	}
}

@keyframes move-7 {

	0%,
	100% {
		transform: translatez(-140px) translateY(-40px) rotateX(15deg);
	}

	50% {
		transform: translatez(-140px) translateY(40px) rotateX(-15deg);
	}
}

@keyframes move-8 {

	0%,
	100% {
		transform: translatez(-160px) translateY(-40px) rotateX(15deg);
	}

	50% {
		transform: translatez(-160px) translateY(40px) rotateX(-15deg);
	}
}

@keyframes move-9 {

	0%,
	100% {
		transform: translatez(-180px) translateY(-40px) rotateX(15deg);
	}

	50% {
		transform: translatez(-180px) translateY(40px) rotateX(-15deg);
	}
}

@keyframes move-10 {

	0%,
	100% {
		transform: translatez(-200px) translateY(-40px) rotateX(15deg);
	}

	50% {
		transform: translatez(-200px) translateY(40px) rotateX(-15deg);
	}
}

@keyframes move-11 {

	0%,
	100% {
		transform: translatez(-220px) translateY(-40px) rotateX(15deg);
	}

	50% {
		transform: translatez(-220px) translateY(40px) rotateX(-15deg);
	}
}

@keyframes move-12 {

	0%,
	100% {
		transform: translatez(-240px) translateY(-40px) rotateX(15deg);
	}

	50% {
		transform: translatez(-240px) translateY(40px) rotateX(-15deg);
	}
}

@keyframes move-13 {

	0%,
	100% {
		transform: translatez(-260px) translateY(-40px) rotateX(15deg);
	}

	50% {
		transform: translatez(-260px) translateY(40px) rotateX(-15deg);
	}
}

@keyframes move-14 {

	0%,
	100% {
		transform: translatez(-280px) translateY(-40px) rotateX(15deg);
	}

	50% {
		transform: translatez(-280px) translateY(40px) rotateX(-15deg);
	}
}

@keyframes move-15 {

	0%,
	100% {
		transform: translatez(-300px) translateY(-40px) rotateX(15deg);
	}

	50% {
		transform: translatez(-300px) translateY(40px) rotateX(-15deg);
	}
}

@keyframes move-16 {

	0%,
	100% {
		transform: translatez(-320px) translateY(-40px) rotateX(15deg);
	}

	50% {
		transform: translatez(-320px) translateY(40px) rotateX(-15deg);
	}
}

@keyframes move-17 {

	0%,
	100% {
		transform: translatez(-340px) translateY(-40px) rotateX(15deg);
	}

	50% {
		transform: translatez(-340px) translateY(40px) rotateX(-15deg);
	}
}

@keyframes move-18 {

	0%,
	100% {
		transform: translatez(-360px) translateY(-40px) rotateX(15deg);
	}

	50% {
		transform: translatez(-360px) translateY(40px) rotateX(-15deg);
	}
}

@keyframes move-19 {

	0%,
	100% {
		transform: translatez(-380px) translateY(-40px) rotateX(15deg);
	}

	50% {
		transform: translatez(-380px) translateY(40px) rotateX(-15deg);
	}
}

@keyframes move-20 {

	0%,
	100% {
		transform: translatez(-400px) translateY(-40px) rotateX(15deg);
	}

	50% {
		transform: translatez(-400px) translateY(40px) rotateX(-15deg);
	}
}

@keyframes movewave {

	0%,
	100% {
		left: 25%;
		transform: rotatex(5deg) rotateY(0deg) rotate(0deg);
	}

	50% {
		left: -20%;
		transform: rotatex(-10deg) rotateY(55deg) rotateY(-360deg) rotate(10deg);
	}
}