h3 {
	font-size: 3vh;
    color: var(--theme);
    margin: 3vh 0;
}
section:not(#tool-collab) p a {
	text-decoration: revert;
}
iframe {
	width: 100%;
	aspect-ratio: 53/30;
	filter: saturate(1.5);
	margin-bottom: -1vh;
}
.invisible {
	height: 0;
}
#wrapper {
	overflow: auto;
	height: 100dvh;
	box-sizing: border-box;
	width: 66.666%;
	float: left;
	padding-bottom: 5.3vh;
}
#wrapper h1::after {
	content: '';
	display: block;
	margin: 5vh 40%;
	width: 20%;
	height: 0.3vh;
	background: var(--theme);
}
#contNav {
	height: 100dvh;
    float: right;
    width: 33.333%;
    background: var(--theme);
	display: flex;
	color: white;
	font-family: "Chakra Petch", sans-serif;
    font-weight: lighter;
}
#cNavWrap {
    margin: auto;
	max-height: 100%;
	overflow: auto;
}
#cNavWrap::before, #cNavWrap::after {
	content: '';
	display: block;
	width: 1vh;
	height: 1vh;
	background: white;
	border-radius: 50%;
	margin: 3vh auto;
}
#cNavWrap span {
	display: block;
	margin: 1vh 0;
	cursor: pointer;
	text-transform: uppercase;
	transition: font-size .5s;
	&:hover {
		font-weight: bold;
	}
}
.active {
	font-weight: bold;
	font-size: 2.5vh;
}
#modules {
	width: 90%;
	margin: auto;
}
.paintSat img {
	filter: none;
}

/* Modules */
section {
	padding-bottom: 3vh;
}
.side-by-side {
	display: flex;
}
.side-by-side > * {
	width: 50%;
	box-sizing: border-box;
}
.side-by-side > *:first-child {
	float: left;
	padding-right: 1.5vh;
	text-align: left;
}
.side-by-side > *:last-child {
	float: right;
	padding-left: 1.5vh;
	text-align: right;
}
.caption {
	font-family: "Chakra Petch", sans-serif;
	font-weight: lighter;
	font-size: 2vh;
	margin: -2vh 0 1vh 0;
	opacity: .65;
}
#location, #date, #tool-collab p, .caption {
	font-style: italic;
}
#tool-collab a::after {
    content: url('/img/link.svg');
    padding-left: 1vh;
    display: inline-block;
    width: 2vh;
    height: 2vh;
    vertical-align: sub;
}
#progress {
	display: none;
}

/* Page navigation */
#pageNav {
	width: 33.333333333333%;
	background: var(--theme);
	float: right;
	height: 100dvh;
	color: white;
}



/* 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: var(--theme);
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		transform-origin: 0 50%;
		animation: scaleProgress auto linear;
		animation-timeline: scroll(root);
	}
	nav {
		display: none;
	}
	h3 {
		margin: 3vh 2vh;
	}
	p {
		margin: 2vh;
	}
	#contNav {
		display: none;
	}
	#wrapper {
		overflow: revert;
		width: revert;
		float: revert;
	}
	#wrapper h1 {
		margin: 0 1vh;
		font-size: 5vh;
		padding-top: 10vh;
	}
	#modules {
		width: 100%;
	}
	section {
		padding: 0;
	}
	.side-by-side {
		display: revert;
	}
	.side-by-side > *:first-child, .side-by-side > *:last-child {
		width: 100%;
		padding: 0;
		text-align: left;
	}
	@keyframes scaleProgress {
		0% {
			transform: scaleX(0);
		}
		100% {
			transform: scaleX(1);
		}
	}
}