/* All Displays */
.the-lore {
	display: flex;
	flex-direction: column;
	text-align: center;
	color: white;
}

.legend-box {
	background-color: rgba(0, 0, 0, 0.5);
	width: 50%;
	padding: 24px;
	border: 1px solid rgb(25, 25, 25);
	box-shadow: 0 0 10px 10px black;
}

.the-legend {
	min-height: 500px;
	height: 100dvh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.legend-header {
	text-align: center;	
}

.legend-header-1 {
	font-size: 2.5rem;
}

.legend-header-2 {
	font-size: 2rem;
}

.legend-text {
	font-size: 1.5rem;
}

.the-shadow {
	background: url("./../images/bios/KyroBio.jpg");
	background-size: cover;
}

.the-fire {
	background: url("./../images/backgrounds/Fire_Background.jpg");
	background-size: cover;
}

.fire-and-shadow {
	background: linear-gradient(
		to top, rgba(0,0,0,0) 90%, red), 
		linear-gradient(to right, black,  red
	);
	display: grid;
}

.separation {
	position: relative;
	z-index: 100;
	margin: 0;
	border: 1px solid black;
	box-shadow: 0 0 30px 30px black;
}

.legend-text {
	text-align: center;
}

.fire-and-shadow-background {
	grid-column: 1;
	grid-row: 1;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: row;
}

.shadow-background {
	height: 100%;
	width: 100%;
	background: linear-gradient(to left, black, rgba(0, 0, 0, 0)), url("./../images/bios/KyroBio.jpg");
	background-size: cover;
}

.fire-background {
	height: 100%;
	width: 100%;
	background: linear-gradient(to right, black, rgba(0, 0, 0, 0)), url("./../images/backgrounds/Fire_Background.jpg");
	background-size: cover;
}

.fire-and-shadow-box {
	grid-column: 1;
	grid-row: 1;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

}

.mission-main-headers {
	display: flex;
	flex-direction: row;
	width: 100%;
}

.mission-main-header {
	width: 100%;
	text-align: center;
	font-size: 2.5rem;
}

.our-mission {
	background: linear-gradient(to bottom, black 1dvh, transparent 10dvh calc(100% - 10dvh), black calc(100% - 1dvh)), url("./../images/backgrounds/Background.jpg");
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	row-gap: 48px;
}

.mission-body {
	width: 75%;
}

.mission-section-text {
	font-size: 1.5rem;
}

.mission-section-header {
	font-size: 2.5rem;
}

.shadow-precision-header {
	font-size: 2.5rem;
}

.fire-patience-header {
	font-size: 2.5rem;
}

.kyros-text {
	color: white !important;
}

.protectors-code {
	padding: 2dvh 2dvw;
	background-color: rgba(0, 0, 0, 0.75);
	box-shadow: inset 0 0 5px 5px black, 0 0 5px 5px var(--color-primary-red);
	margin: 0 1dvw 5dvh 1dvw;
}

.protectors-code-header {
	color: white;
	font-size: 3rem;
}

.protectors-code-text {
	padding: 1.5dvh 0;
	font-size: 2rem;
	color: white;
	font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
	margin: 0;
}

@media screen and (width >= 320px) and (width < 768px) {
	.legend-box {
		width: auto;
	}

	.the-legend {
		height: fit-content;
	}
	.mission-main-headers {
		flex-direction: column;
	}

	.mission-main-header {
		font-size: 2rem;
	}
	.protectors-code-header {
		color: white;
		font-size: 2rem;
	}
	.mission-body {
		width: auto;
		padding: 0 1dvw;
	}

	.protectors-code-text {
		padding: 1.5dvh 0;
		font-size: 1.25rem;
		color: white;
		font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
		margin: 0;
	}

}

/* Phone - Horizontal */
@media screen and (width >= 768px) and (width < 1300px) { 
	.legend-box {
		width: 80%;
	}

	.the-legend {
		min-height: 600px;
	}

	.mission-body {
		width: 90%;
	}

	.mission-main-header {
		font-size: 2rem;
	}

}