.left {
	left: 10px;
}
.right {
	right: 10px;
}

.content-container {
	height: calc(100vh - var(--navHeight));
	width: 100vw;
	position: absolute;
	top: var(--navHeight);
	overflow: hidden;
}

.background-container {
	height: 100%;
	width: 100%;
	position: fixed;
	top: 0;
	overflow: hidden;
}

.background-container video {
	height: 100%;
	width: 100%;
	object-fit: cover;
}

#introLogo {
	visibility: hidden;
	height: 200px;
	width: auto;
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
	animation: 2s slideIn 0.5s none;
}

#introFlash {
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	opacity: 0;
	z-index: 2;
	background-color: white;
	animation: 2.5s flashBang 2.5s forwards;
}

.main-content-container {
	width: 100%;
	height: 100%;
	position: relative;
	z-index: -1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	opacity: 0;
	animation: 1ms revealContent 3s forwards;
	/* animation: 1ms revealContent 1ms forwards; */
}

.main-content-container h1 {
	letter-spacing: 1px;
}

.main-content-container h2 {
	position: absolute;
	font-size: large;
	margin: 0;
	bottom: 10px;
}

.main-logo {
	height: 250px;
	width: auto;
	/*  */
	padding: 10px;
	background-color: #0000006e;
	box-shadow: 0px 6px 10px 4px #1eaab4;
	border-radius: 25px;
}

@keyframes slideIn {
	0% {
		visibility: visible;
		transform: translate(-50%, 100vh);
		opacity: 1;
	}
	80% {
		visibility: visible;
		transform: translate(-50%, -50%);
		opacity: 1;
	}
	100% {
		visibility: visible;
		transform: translate(-50%, -50%);
		opacity: 1;
	}
}

@keyframes flashBang {
	0% {
		opacity: 0;
	}
	20% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		visibility: hidden;
		display: none;
	}
}

@keyframes revealContent {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}