.centerAll {
	position: absolute;
	top: 50%;
	left: 50%;
	width: max-content;
	transform: translate(-50%, -50%);
}

body {
	margin: 0;
}

#mainBG {
	position: relative;
	width: 100%;
	height: 80vh;
	overflow: hidden;
	background-size: cover;
	background-repeat: no-repeat;
	color: #ffffff;
}

#mainBG .wave {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100px;
	background-size: 1000px 100px;
}

#mainBG .wave.wave1 {
	animation: wave-animate 30s linear infinite;
	z-index: 303;
	opacity: 1;
	animation-delay: 0s;
	bottom: 0;
}
#mainBG .wave.wave2 {
	animation: wave-animate2 15s linear infinite;
	z-index: 302;
	opacity: 0.5;
	animation-delay: -5s;
	bottom: 10px;
}
#mainBG .wave.wave3 {
	animation: wave-animate 30s linear infinite;
	z-index: 301;
	opacity: 0.2;
	animation-delay: -2s;
	bottom: 15;
}
#mainBG .wave.wave4 {
	animation: wave-animate2 5s linear infinite;
	z-index: 300;
	opacity: 0.7;
	animation-delay: -5s;
	bottom: 20px;
}

@keyframes wave-animate {
	0% {
		background-position-x: 0;
	}
	100% {
		background-position-x: 1000px;
	}
}

@keyframes wave-animate2 {
	0% {
		background-position-x: 0;
	}
	100% {
		background-position-x: -1000px;
	}
}

.title, .title-text {
	text-shadow: 0 0 7px #999999;
}

.title-deco {
	position: relative;
}

.title-deco::after {
	position: absolute;
	content: "";
	width: 42px;
	height: 4px;
	background: #ee7785;
	left: 0;
	bottom: 0px;
}