:root {
	--color-pink-light: rgba(255, 210, 247, 1);
	--color-blue-light-1: rgba(163, 209, 255, 1);
	--color-blue-light-2: rgba(189, 246, 255, 1);
	--color-red-light: rgba(255, 180, 180, 1);
	--color-white-transparent: rgb(255 255 255 / 25%);
	--color-white-transparent-holder: rgba(255, 255, 255, 0.3);

	--spacing-small: 15px;

	--gradient-animation-duration: 20s;
	--wave-animation-duration-1: 10s;
	--wave-animation-duration-2: 18s;
	--wave-animation-duration-3: 20s;
	--wave-animation-delay-1: -3s;
	--wave-animation-delay-3: -1s;
}

body {
	margin: auto;
	font-family: -apple-system, BlinkMacSystemFont, sans-serif;
	overflow: auto;
	background: linear-gradient(315deg, var(--color-pink-light) 3%, var(--color-blue-light-1) 38%, var(--color-blue-light-2) 68%, var(--color-red-light) 98%);
	animation: gradient var(--gradient-animation-duration) ease infinite;
	background-size: 300% 300%;
	background-attachment: fixed;
}

@keyframes gradient {
	0% { background-position: 0% 0%; }
	50% { background-position: 100% 100%; }
	100% { background-position: 0% 0%; }
}

.background-waves {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 12em; 
	z-index: -1;
}

.wave {
	background: var(--color-white-transparent);
	border-radius: 1000% 1000% 0 0;
	position: absolute;
	width: 200%;
	height: 12em;
	animation: wave var(--wave-animation-duration-1) var(--wave-animation-delay-1) linear infinite;
	transform: translate3d(0, 0, 0);
	opacity: 0.8;
	bottom: 0;
	left: 0;
}

.wave:nth-of-type(2) {
	bottom: -1.25em;
	animation: wave var(--wave-animation-duration-2) linear reverse infinite;
	opacity: 0.8;
}

.wave:nth-of-type(3) {
	bottom: -2.5em;
	animation: wave var(--wave-animation-duration-3) var(--wave-animation-delay-3) reverse infinite;
	opacity: 0.9;
}

@keyframes wave {
	0% { transform: translateX(0); }
	25% { transform: translateX(-25%); }
	55% { transform: translateX(-50%); }
	75% { transform: translateX(-25%); }
	100% { transform: translateX(0);}
}

.holder {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background: var(--color-white-transparent-holder);
	border-radius: 3px;
	padding: var(--spacing-small);
	text-align: center;
}

.unauth {
	font-weight: bold;
	line-height: 2.5;
}