::selection { background-color:#AA0000; color:#fff; text-decoration:none }

@font-face { font-family: TexGyreHeros; src: url('../fonts/TeX_Gyre_Heros/texgyreheros-bold.otf'); }
@font-face { font-family: Geist; src: url('../fonts/Gesit/otf/Geist-Regular.otf'); }
@font-face { font-family: Geist; font-weight: bold; src: url('../fonts/Gesit/otf/Geist-Bold.otf'); }
@font-face { font-family: GeistThin; src: url('../fonts/Gesit/otf/Geist-Thin.otf'); }
@font-face { font-family: GeistThin; font-weight: bold; src: url('../fonts/Gesit/otf/Geist-Thin.otf'); }
@font-face { font-family: GeistLight; src: url('../fonts/Gesit/otf/Geist-Light.otf'); }
@font-face { font-family: GeistLight; font-weight: bold; src: url('../fonts/Gesit/otf/Geist-Bold.otf'); }

html, body {
	background-color: #000000;
	color: #ffffff;
	margin: 0px;
	padding: 0px;
	font-family: Geist, sans-serif;
}

.title {
	font-family: GeistThin, sans-serif;
	text-align: center;
	font-size: 20vh;
	position: relative;
	margin-top: 3.5vh;
}

.stepThrough {
	font-family: GeistThin, sans-serif;
	text-align: center;
	font-size: 1.5vw;
	position: fixed;
	width: 100%;
	top: 100vh;
	transform: translate(0px, -6em);
	opacity: 0%;
	h2 {
		margin-bottom: 0.5em;
	}
	img {
		width: 1vw;
	}
}

.fadeIn {
	opacity: 50%;
	transition: opacity 5s 1s;
}

.fadeOut {
	opacity: 0%;
	transition: opacity 0.5s;
}

.main {
	overflow: hidden;
}

.scrollLock {
	height: 100%;
	overflow: hidden;
}

.loadingScreen {
	background-color: #000;
	width: 100vw;
	height: 100vh;
	position: absolute;
	top: 0;
}

.loadingIcon {
	margin: auto;
	margin-top: calc(50vh - 60px);
	border: 4px solid #000;
	border-top: 4px solid #f00;
	border-radius: 50%;
	width: 120px;
	height: 120px;
	animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.introCanvas {
	width: 100%;
	height: calc(100% + 60px);
	position: fixed;
	top:0;
	pointer-events: none;
}

section {
	overflow: hidden;
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}


p {
	font-size: 3vmax;
	margin: 0px;
	padding: 3vmax;
	color: #fff;
}

.galleryContainer {
	position: relative;
	vertical-align: top;
	display: inline-block;
	font-size: 0;
	margin: 2px 6px 6px 6px;
}

.gallery {
	margin: 1em 0 1em 0;
	padding: 0px;
	overflow: auto;
}

.galleryElement {
	margin: 0px;
	float: left;
	width: 33%;
	img {
		width: 100%;
		height: auto;
		position: relative;
	}
}

.galleryDescription {
	position: absolute;
	visibility: hidden;
	bottom: 0px;
	background: #000000AA;
	width: 100%;
	font-size: medium;
}

.galleryElement:hover .galleryContainer .galleryDescription {
	visibility: visible;
}

.galleryDescription p{
	text-align: justify;
	vertical-align: text-bottom;
	margin: 10px;
	color: white;
	font-weight: normal;
}


.galleryTitle {
	font-size: 0.9em;
	height: 3em;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	overflow: hidden;
	margin: 6px 6px 0px 6px;

	p {
		text-align: center;
		margin: 0;
		padding: 0 1em 0 1em;
	}
}

.info {
	background-color:#000000ff;
	width: 60%;
	margin-left: auto;
	margin-right: auto;
	p {
		font-family: GeistLight, sans-serif;
		padding: 0.5em 0 0.5em 0;
		font-size: 125%;
		a {
			color:#f00;
			text-decoration:none;
		}
		a::selection {
			color:#000;
			text-decoration:none;
		}
	};

	h2 {
		font-size: 300%;
		font-family: GeistThin, sans-serif;
		padding: 1em 0 0em 0;
		margin: 0;
	}
	ul {
		margin: 0 0 1em 0;
	}

}

.inWorldText {
	text-align: center;
	font-family: TexGyreHeros, sans-serif;
}

.inWorldText p {
	font-size: 6vmax !important;
}

.finalScreenBg {
	height: 100lvh;
	font-family: TexGyreHeros, sans-serif;
	background-color: #000;
}

.finalScreenText {
	margin: 0px;
	padding: 3vmax;
	font-size: 3vmax !important;
	color: #fff;
	opacity: 0;

}

@keyframes finalBgAnim {
	0% { background-color: #000; }
	10% { background-color: #000; }
	30% { background-color: #A00; }
	40% { background-color: #A00; }
	60% { background-color: #A00; }
	100% { background-color: #A00; }
}

@keyframes finalTextAnim {
	0% { opacity: 0; }
	10% { opacity: 0; }
	30% { opacity: 0; }
	40% { opacity: 0; }
	100% { opacity: 1; }
}


.finalBg {
	animation-name: finalBgAnim;
	animation-duration: 5s;
	animation-fill-mode: forwards;
}

.finalText {
	animation-name: finalTextAnim;
	animation-duration: 5s;
	animation-fill-mode: forwards;
}

.graphics {
	height: 100lvh;
	background-color: #000;
}

.graphicsSlice {
	height: 50lvh;
	background-color: #000;
}

.gradientFade {
	width:100%;
	height:100%;
	background-image: 
	  linear-gradient(
		to bottom,
		hsla(0, 0%, 0%, 0) 0%,
		hsla(0, 0%, 0%, 0.013) 8.1%,
		hsla(0, 0%, 0%, 0.049) 15.5%,
		hsla(0, 0%, 0%, 0.104) 22.5%,
		hsla(0, 0%, 0%, 0.175) 29%,
		hsla(0, 0%, 0%, 0.259) 35.3%,
		hsla(0, 0%, 0%, 0.352) 41.2%,
		hsla(0, 0%, 0%, 0.45) 47.1%,
		hsla(0, 0%, 0%, 0.55) 52.9%,
		hsla(0, 0%, 0%, 0.648) 58.8%,
		hsla(0, 0%, 0%, 0.741) 64.7%,
		hsla(0, 0%, 0%, 0.825) 71%,
		hsla(0, 0%, 0%, 0.896) 77.5%,
		hsla(0, 0%, 0%, 0.951) 84.5%,
		hsla(0, 0%, 0%, 0.987) 91.9%,
		hsl(0, 0%, 0%) 100%
	  );
}

.text {
	color: #fff;
	height: fit-content;
}

.black {
	background-color: #000 !important;
}

.graphicsVideo {
	color: #0000;
	background-color: #0000;
}

video {
	position: fixed;
	height: 100lvh;
	width: 100vw;
	z-index: -1;
	top: 0;
	left: 0;
	margin: 0px;
	padding: 0px;
	overflow: hidden;
	background-color: #000;
	object-fit: cover;
}

.bridgeText {
	background-image: url("../assets/images/bridgeDoor.jpg");
}

.bridgeImage1 {
	background-image: url("../assets/images/wireframeGates.jpg");
}

.bridgeImage2 {
	background-image: url("../assets/images/bridgeDoor.jpg");
}

.runnerText {
	background-image: url("../assets/images/runnerMountains.jpg");
}

.runnerImage {
	background-image: url("../assets/images/runnerWhiteMountains.jpg");
}

.crystalRangeImage {
	background-image: url("../assets/images/crystalRange.jpg");
}

.ceremonyImage {
	background-image: url("../assets/images/snowMountains.jpg");
}

.lightFlashText {
	background-image: url("../assets/images/lightTunnel.jpg");
}

.lightFlashImage {
	background-image: url("../assets/images/lightTunnelPolarized.jpg");
}

.furnaceImage {
	background-image: url("../assets/images/furnaceHouse.jpg");
}

.safeAndWellText {
	background-color: #AA0000;
}