.directives {
	height: fit-content;
	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 0;
	row-gap: 24px;
}

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

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

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

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

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

.scroll-header {
	width: 100%;
	height: 100%;
	background: url("./../images/scroll/Header_Center.svg");
	background-size: contain;
	font-weight: bolder;
	border: none;
	font-size: 2rem;
}

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

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

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

.scroll-body {
	background: url("./../images/scroll/Body_Center.svg");
	text-align: center;
	display: flex;
	padding: 8px 0 8px 0;
	flex-direction: column;
	/* Hides the Scroll Body */
	padding-top: 0;
	padding-bottom: 0;
	overflow: hidden;
	transition: max-height 0.5s ease-out;
	max-height: 0;
}

.scroll-body-header {
	margin-bottom: 0;
}

.scroll-body-visible {
	max-height: 500dvh;
	transition: max-height 1.0s ease-out;
}

/* Phone - Vertical */
@media screen and (width >= 320px) and (width < 768px) {
	.scroll {
		width: 100%;
	}
	.scroll-header {
		font-size: 1rem;
	}
	.scroll-body {
		font-size: 1rem;
	}
}


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

}