iframe {
	width: 100%;
	aspect-ratio: 53/30;
	filter: saturate(1.5);
}
h2 {
    opacity: 0.85;
    font-weight: 600;
    font-size: 6vh;
	transition: 0.4s;
	pointer-events: none;
}
h3 {
    opacity: 0.85;
    font-weight: 600;
    font-size: 4vh;
	transition: 0.4s;
	pointer-events: none;
	color:#8C0000;
}
.back span {
	position: fixed;
	transform: rotate(135deg);
    left: 10vh;
    top: 10vh;
    padding: 2vh;
}
.back span:hover {
	color: #8C0000;
}
#wrapper {
	overflow: auto;
	height: 100vh;
	box-sizing: border-box;
	padding-bottom: 10vh;
}
#wrapper h1 {
	margin: 0 9vh 9vh 9vh;
	font-size: 15vh;
}
#wrapper h1::after {
	content: '';
	display: block;
	margin: 5vh 40%;
	width: 20%;
	height: 0.3vh;
	background: #8C0000;
}
#modules {
	width: 75%;
	margin: auto;
}
.paintSat img {
	filter: none;
}

/* Modules */
.side-by-side {
	display: flex;
	padding-bottom: 3vh;
	align-items: center;
}
.side-by-side > * {
	width: 50%;
	box-sizing: border-box;
}
.side-by-side > *:first-child {
	float: left;
	padding-right: 4.5vh;
	text-align: left;
}
.side-by-side > *:last-child {
	float: right;
	padding-left: 4.5vh;
	text-align: right;
}
.side-by-side img {
	padding-bottom: 3vh;
}
.cover {
	font-size: 10vh;
	font-weight: 600;
}
.cover p {
	font-size: 2.3vh;
}
.italic {
	font-style: italic;
}
.orange {
	color: #8C0000;
	font-weight: 500;
	font-size: 3vh;
	margin-top: 5vh;
	margin-bottom: 5vh;
	text-align: center;
}
.caption {
	margin-bottom: 2vh;
}
.caption > * {
	text-align: left;
	margin: 0;
}
#progress {
	display: none;
}

/*Phone prog bar animation */



/* Crack nav bar fix ugh
	Basically, the iframes fuck up the nav bar, unless it render once the iframe has already entered the DOM.
	So by forcing the nav bar to render 0.1s late in an animation, the problem is fixed.
	Stupid solution, but at least for now it is what it is */
nav {
	animation: nav-fix 0.1s;
}
@keyframes nav-fix {
	0% {
		display: none;
		}
	100% {
		display: block;
		}
}

/* Phone */
@media only screen and (max-width: 600px) {
	body {
		overflow: revert;
	}
	body::after {
		content:'';
		display: block;
		height: 1vh;
		background: #8C0000;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		transform-origin: 0 50%;
		animation: scaleProgress auto linear;
		animation-timeline: scroll(root);
	}
	nav {
		display: none;
	}
	p, .orange {
		margin: 1.5vh;
	}
	#wrapper {
		overflow: revert;
	}
	#wrapper h1 {
		margin: 0 1vh;
		font-size: 5vh;
		padding: 10vh 0;
	}
	#modules {
		width: 100%;
	}
	.cover {
		font-size: 5vh;
		padding: 3vh 1.5vh;
	}
	.back span {
		display: none;
	}
	.side-by-side {
		display: revert;
		padding: 0;
	}
	.side-by-side > *:first-child, .side-by-side > *:last-child {
		width: 100%;
		padding: 0;
	}
	@keyframes scaleProgress {
		0% {
			transform: scaleX(0);
		}
		100% {
			transform: scaleX(1);
		}
	}
}