/* All Displays */
.banner {
	min-height: 400px;
	width: 100%;
	height: calc(100dvh - 75px); 
	background: black;
	display: grid;
	pointer-events: none;
}

.banner-shadow {
	box-shadow: inset 0 0 20px 25px black;
	z-index: 3;
}

.banner-image {
	height: 100%;
	width: 100%;
	align-self: flex-start;
	justify-self: flex-start;
	grid-column: 1;
	grid-row: 1;
	background-repeat: no-repeat;
	background-position-y: 20%;
	background-size: cover;
	color: white;
}

.banner-layer {
	grid-column: 1;
	grid-row: 1;
	display: grid;
}

.banner-img-layer {
	height: 100%;
	align-self: center;
	justify-self: center;
	overflow: hidden;
}

.banner-text-layer {
	color: white;
	z-index: 300;
	padding: 2dvh;
}

.banner-texts {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 2.5rem;
}

.banner-texts-1 {
	align-self: flex-start;
	justify-self: flex-start;
	text-align: start;
	background: linear-gradient(to right, black, rgba(0,0,0,0));
	/* padding-right: 2dvw; */
}

.banner-texts-2 {
	align-self: center;
	justify-self: flex-end;
	text-align: end;
	background: linear-gradient(to left, black, rgba(0,0,0,0));
	padding-left: 2dvw;
}

.banner-texts-3 {
	align-self: flex-end;
	justify-self: center;
	text-align: center;
	background: linear-gradient(to right, rgba(0,0,0,0), black, rgba(0,0,0,0));
	padding-left: 2dvw;
	padding-right: 2dvw;
}

.banner-fade {
	animation: fade_out 0.4s;
	animation-fill-mode: forwards;
}

.body-image {
	box-shadow: 0 0 10px 10px black;
}

.body-img {
	width: 100%;
}

.body-details {
	display: flex;
	flex-direction: row;
	column-gap: 5%;
}

@keyframes fade_out {
	0% { opacity: 100%; }
	100% { opacity: 0%; }
}

.shadow { color: purple; }
.fire { color: red; }

/* Phone - Vertical */
@media screen and (width >= 320px) and (width < 768px) {
	.banner { 
		min-height: 50dvh;
		height: 50dvh; 
	}

	.banner-img-layer {
		width: 100%;
	}

	.banner-text-layer {
		padding: 0;
	}

	.banner-texts {
		font-size: 1.25rem;
	}

	.home-body {
		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;
		row-gap: 15dvh;
		padding: 5dvh 1dvw;
		font-size: 1rem;
	}

	.body-section {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		row-gap: 5dvh;
	}

	.body-details {
		display: flex;
		flex-direction: column-reverse;
		align-items: center;
		justify-content: center;
		row-gap: 5dvh;
	}

	.body-scroll {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.scroll {
		display: grid;
		grid-template-columns: 75px auto 75px;
	}

	.scroll-end-left { background: url("./../images/scroll/Header_Left.svg"); }
	.scroll-end-right { background: url("./../images/scroll/Header_Right.svg"); }

	.scroll-ends {
		height: 75px;
		background-size: cover;
	}

	.scroll-header {
		background: url("./../images/scroll/Header_Center.svg");
		background-size: contain;
		height: 100%;
	}

	.scroll-body-ends-left { background: url("./../images/scroll/Body_Left.svg");}
	.scroll-body-ends-right { background: url("./../images/scroll/Body_Right.svg");}

	.scroll-body-ends {
		background-size: 100%;
	}

	.scroll-body {
		background: url("./../images/scroll/Body_Center.svg");
		text-align: center;
	}

	.body-image {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
	
	.body-link {
		text-decoration: none;
		background: black;
		color: white;
		padding: 24px;
		border-radius: 15px;
		box-shadow: inset 0 0 5px 5px black, 0 0 5px 5px black;
	}

	.body-link:hover {
		animation-duration: 2s;
		animation-iteration-count: infinite;
	}

	.body-link-red:hover {
		animation-name: body_link_hover_animation_red;
		box-shadow: inset 0 0 5px 5px red, 0 0 5px 5px red;
	}

	@keyframes body_link_hover_animation_red {
		0% { box-shadow: inset 0 0 5px 5px black, 0 0 5px 5px red; }	
		50% { box-shadow: inset 0 0 5px 5px black, 0 0 10px 10px red; }	
		100% { box-shadow: inset 0 0 5px 5px black, 0 0 5px 5px red; }	
	}

	.body-link-purple:hover {
		animation-name: body_link_hover_animation_purple;
		box-shadow: inset 0 0 5px 5px purple, 0 0 5px 5px purple;
	}

	@keyframes body_link_hover_animation_purple {
		0% { box-shadow: inset 0 0 5px 5px black, 0 0 5px 5px purple; }	
		50% { box-shadow: inset 0 0 5px 5px black, 0 0 10px 10px purple; }	
		100% { box-shadow: inset 0 0 5px 5px black, 0 0 5px 5px purple; }	
	}

	.body-link-silver:hover {
		animation-name: body_link_hover_animation_silver;
		box-shadow: inset 0 0 5px 5px silver, 0 0 5px 5px silver;
	}

	@keyframes body_link_hover_animation_silver {
		0% { box-shadow: inset 0 0 5px 5px black, 0 0 5px 5px silver; }	
		50% { box-shadow: inset 0 0 5px 5px black, 0 0 10px 10px silver; }	
		100% { box-shadow: inset 0 0 5px 5px black, 0 0 5px 5px silver; }	
	}
}

/* Phone - Horizontal */
@media screen and (width >= 768px) and (width < 1300px) { 
	.banner { 
		min-height: 300px;
		height: 100dvh; 
	}

	.banner-img-layer {
		width: 95%;
	}

	.banner-text-layer {
		padding: 2dvh 2dvw;
	}

	.banner-texts {
		font-size: 1.75rem;
	}

	.home-body {
		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;
		row-gap: 25dvh;
		padding: 5dvh 1dvw;
	}

	.body-section {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		row-gap: 5dvh;
	}

	.body-details {
		display: flex;
		flex-direction: column-reverse;
		align-items: center;
		justify-content: center;
		row-gap: 5dvh;
	}

	.body-scroll {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.scroll {
		width: fit-content;
		display: grid;
		grid-template-columns: 75px auto 75px;
	}

	.scroll-end-left { background: url("./../images/scroll/Header_Left.svg"); }
	.scroll-end-right { background: url("./../images/scroll/Header_Right.svg"); }

	.scroll-ends {
		width: 75px;
		height: 75px;
		background-size: cover;
	}

	.scroll-header {
		background: url("./../images/scroll/Header_Center.svg");
		background-size: contain;
		height: 100%;
	}

	.scroll-body-ends-left { background: url("./../images/scroll/Body_Left.svg");}
	.scroll-body-ends-right { background: url("./../images/scroll/Body_Right.svg");}

	.scroll-body-ends {
		background-size: 100%;
	}

	.scroll-body {
		background: url("./../images/scroll/Body_Center.svg");
		text-align: center;
		padding: 24px;
	}

	.body-image {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.body-link {
		text-decoration: none;
		background-color: black;
		color: black;
		color: white;
		padding: 16px;
		margin: 8px;
		border-radius: 15px;
		box-shadow: inset 0 0 5px 5px black, 0 0 5px 5px black;
	}

	.body-link:hover {
		animation-duration: 2s;
		animation-iteration-count: infinite;
	}

	.body-link-red:hover {
		animation-name: body_link_hover_animation_red;
		box-shadow: inset 0 0 5px 5px red, 0 0 5px 5px red;
	}

	@keyframes body_link_hover_animation_red {
		0% { box-shadow: inset 0 0 5px 5px black, 0 0 5px 5px red; }	
		50% { box-shadow: inset 0 0 5px 5px black, 0 0 10px 10px red; }	
		100% { box-shadow: inset 0 0 5px 5px black, 0 0 5px 5px red; }	
	}

	.body-link-purple:hover {
		animation-name: body_link_hover_animation_purple;
		box-shadow: inset 0 0 5px 5px purple, 0 0 5px 5px purple;
	}

	@keyframes body_link_hover_animation_purple {
		0% { box-shadow: inset 0 0 5px 5px black, 0 0 5px 5px purple; }	
		50% { box-shadow: inset 0 0 5px 5px black, 0 0 10px 10px purple; }	
		100% { box-shadow: inset 0 0 5px 5px black, 0 0 5px 5px purple; }	
	}

	.body-link-silver:hover {
		animation-name: body_link_hover_animation_silver;
		box-shadow: inset 0 0 5px 5px silver, 0 0 5px 5px silver;
	}

	@keyframes body_link_hover_animation_silver {
		0% { box-shadow: inset 0 0 5px 5px black, 0 0 5px 5px silver; }	
		50% { box-shadow: inset 0 0 5px 5px black, 0 0 10px 10px silver; }	
		100% { box-shadow: inset 0 0 5px 5px black, 0 0 5px 5px silver; }	
	}
}

/* Desktop */
@media screen and (width >= 1300px) {
	.banner-img-layer {
		width: 95%; 
	}

	.home-body {
		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;
		padding: 5dvh 2dvw;
		row-gap: 20dvh;
	}

	.body-section {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		min-height: 85dvh;
		row-gap: 10dvh;
	}

	.body-details {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: fit-content;
	}

	.body-inverse {
		flex-direction: row-reverse !important;
	}

	.body-scroll {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		height: fit-content;
	}

	.scroll {
		width: fit-content;
		display: grid;
		grid-template-columns: 75px auto 75px;
		width: 100%;
	}

	.scroll-end-left { background: url("./../images/scroll/Header_Left.svg"); }
	.scroll-end-right { background: url("./../images/scroll/Header_Right.svg"); }

	.scroll-ends {
		width: 75px;
		height: 75px;
		background-size: cover;
	}

	.scroll-header {
		width: 100%;
		background: url("./../images/scroll/Header_Center.svg");
		background-size: contain;
		height: 100%;
	}

	.scroll-body-ends-left { background: url("./../images/scroll/Body_Left.svg");}
	.scroll-body-ends-right { background: url("./../images/scroll/Body_Right.svg");}

	.scroll-body-ends {
		background-size: 100%;
	}

	.scroll-body {
		background: url("./../images/scroll/Body_Center.svg");
		text-align: center;
		padding: 24px;
		font-size: 1.5rem;
	}

	.body-image {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.body-link {
		text-decoration: none;
		background-color: black;
		color: white;
		font-size: 2rem;
		padding: 24px 96px;
		border-radius: 15px;
		box-shadow: 0 0 5px 5px white;
	}

	.body-link:hover {
		animation-duration: 2s;
		animation-iteration-count: infinite;
	}

	.body-link-red:hover {
		animation-name: body_link_hover_animation_red;
		box-shadow: inset 0 0 5px 5px var(--color-primary-red), 0 0 5px 5px var(--color-primary-red);
	}

	@keyframes body_link_hover_animation_red {
		0% { box-shadow: inset 0 0 5px 5px black, 0 0 5px 5px var(--color-primary-red); }	
		50% { box-shadow: inset 0 0 5px 5px black, 0 0 10px 10px var(--color-primary-red); }	
		100% { box-shadow: inset 0 0 5px 5px black, 0 0 5px 5px var(--color-primary-red); }	
	}

	.body-link-purple:hover {
		animation-name: body_link_hover_animation_purple;
		box-shadow: inset 0 0 5px 5px var(--color-primary-purple), 0 0 5px 5px var(--color-primary-purple);
	}

	@keyframes body_link_hover_animation_purple {
		0% { box-shadow: inset 0 0 5px 5px black, 0 0 5px 5px var(--color-primary-purple); }	
		50% { box-shadow: inset 0 0 5px 5px black, 0 0 10px 10px var(--color-primary-purple); }	
		100% { box-shadow: inset 0 0 5px 5px black, 0 0 5px 5px var(--color-primary-purple); }	
	}

	.body-link-silver:hover {
		animation-name: body_link_hover_animation_silver;
		box-shadow: inset 0 0 5px 5px var(--color-primary-silver), 0 0 5px 5px var(--color-primary-silver);
	}

	@keyframes body_link_hover_animation_silver {
		0% { box-shadow: inset 0 0 5px 5px black, 0 0 5px 5px var(--color-primary-silver); }	
		50% { box-shadow: inset 0 0 5px 5px black, 0 0 10px 10px var(--color-primary-silver); }	
		100% { box-shadow: inset 0 0 5px 5px black, 0 0 5px 5px var(--color-primary-silver); }	
	}
}

/* .banner-texts {
	height: 100%;
	width: 100%;
	z-index: 3;
	display: flex;
	flex-direction: column;
} */