:root{
	--splash-text-font-size: 32px;
	--splash-text-font-size-mobile: 28px;
}

.splash-container{
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1000;
	min-width: 100%;
	min-height: 100%;
	/*background-image: url('../videos/babble-bubbles.gif');
	background-size: cover;*/
}
.splash-container-background{
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
	width: 100%;
  	height: 100vh;
	overflow: hidden;
}
.splash-container-background video{

	min-width: 100%;
	min-height: 100%;
	object-fit: cover;
}
.splash-logo{
	position: absolute;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	width: 30%;
}
.splash-text-container{
	padding: 100px 0 0 10px;
	display: flex;
	flex-direction: column;
}
.splash-text{
	font-weight: bold;
	animation: splash-text-appear 0.1s linear;
}
@keyframes splash-text-appear{
	0%{
		transform: translateY(75%);
	}
	100%{
		transform: translateY(0%);
	}
}
.fade{
	animation: fadeText 0.1s linear;
	animation-fill-mode: forwards;
}
@keyframes fadeText{
	0%{
		opacity: 1;
	}
	100%{
		opacity: 0.5;
	}
}
#splash-1{
	color: #00FF65;
	font-size: var(--splash-text-font-size);
}
#splash-2{
	color: #69EACF;
	font-size: calc(var(--splash-text-font-size) + 4px);
}
#splash-3{
	color: #FFC746;
	font-size: calc(var(--splash-text-font-size) + 8px);
}
#splash-4{
	color: #4DA0B0;
	font-size: calc(var(--splash-text-font-size) + 12px);
}
#splash-5{
	color: #F11687;
	font-size: calc(var(--splash-text-font-size) + 16px);
}
#splash-6{
	color: #00E4FF;
	font-size: calc(var(--splash-text-font-size) + 20px);
}
#splash-7{
	color: #FFC746;
	font-size: calc(var(--splash-text-font-size) + 24px);
}
#splash-8{
	color: #EB00FF;
	font-size: calc(var(--splash-text-font-size) + 28px);
}
#splash-9{
	color: #69EACF;
	font-size: calc(var(--splash-text-font-size) + 32px);
}
#splash-10{
	color: #F11687;
	font-size: calc(var(--splash-text-font-size) + 36px);
}

.skip-splash{
	position: absolute;
	top: 0;
	right: 0;
	margin: 4%;
	/*transform: translate(-50%, -50%);*/
	font-size: 26px;
}

@media screen and (max-width: 1023px){
	.splash-logo{
		transform: none;
		top: 0;
		right: 0;
		left: 0;
		margin: 0 auto;
		width: 15%;
		padding-top: 30px;
	}
}

@media screen and (max-width: 750px){
	.splash-logo{
		width: 100px;
	}
	.skip-splash{
		padding: 5px;
		font-size: 16px;
		top: initial;
		bottom: 30px;
	}
	#splash-1{
		color: #00FF65;
		font-size: var(--splash-text-font-size-mobile);
	}
	#splash-2{
		color: #69EACF;
		font-size: calc(var(--splash-text-font-size-mobile) + 2px);
	}
	#splash-3{
		color: #FFC746;
		font-size: calc(var(--splash-text-font-size-mobile) + 4px);
	}
	#splash-4{
		color: #4DA0B0;
		font-size: calc(var(--splash-text-font-size-mobile) + 6px);
	}
	#splash-5{
		color: #F11687;
		font-size: calc(var(--splash-text-font-size-mobile) + 8px);
	}
	#splash-6{
		color: #00E4FF;
		font-size: calc(var(--splash-text-font-size-mobile) + 10px);
	}
	#splash-7{
		color: #FFC746;
		font-size: calc(var(--splash-text-font-size-mobile) + 12px);
	}
	#splash-8{
		color: #EB00FF;
		font-size: calc(var(--splash-text-font-size-mobile) + 14px);
	}
	#splash-9{
		color: #69EACF;
		font-size: calc(var(--splash-text-font-size-mobile) + 16px);
	}
	#splash-10{
		color: #F11687;
		font-size: calc(var(--splash-text-font-size-mobile) + 18px);
	}
}