.forge-secrets {
}

.section-header {
	color: white;
	font-size: 2.5rem;
	text-align: center;
}

.section-scrolls {
	background: linear-gradient(to bottom, black 1dvh, transparent 10dvh calc(100% - 50dvh), black calc(100% - 1dvh)), url("./../images/backgrounds/Background.jpg");
	display: flex;
	flex-direction: column;
	row-gap: 24px;
	padding: 5dvh 0;	
}

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

/* TRY ANIMATING USING ANIMATION AND HEIGHT PROPERTY */

.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: 1.75rem;
}

.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-visible {
	max-height: 500dvh;
	transition: max-height 1.0s ease-out;
}

.section-db {
	background: linear-gradient(to bottom, black 1dvh, transparent 10dvh calc(100% - 50dvh), black calc(100% - 1dvh)), rgb(15, 15, 15);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	row-gap: 10dvh;
	padding: 5dvh 0;
}

.section-db-header {
	color: white;
	text-align: center;
	font-size: 1.5rem;
}

.section-db-header h2 {
	font-size: 2rem;

}

.db-entry {
	width: 75%;
	background-color: rgb(30, 30, 30);
	border-radius: 20px;
}

.db-red {
	border: 1 solid var(--color-primary-red);
	box-shadow: 0 0 5px 5px var(--color-primary-red);
}

.db-silver {
	border: 1 solid var(--color-primary-silver);
	box-shadow: 0 0 5px 5px var(--color-primary-silver);
}

.db-purple {
	border: 1 solid var(--color-primary-purple);
	box-shadow: 0 0 5px 5px var(--color-primary-purple);
}

.db-header {
	width: 100%;
	background-color: transparent;
	border: none;
	font-size: 1.75rem;
	text-align: center;
	padding: 1dvw 1dvh;
	color: white;
}

.db-body {
	color: white;
	text-align: center;
	font-size: 1.5rem;
	overflow: hidden;
	transition: max-height 0.5s ease-out;
	max-height: 0;
}

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

.section-secret {
	background: linear-gradient(to bottom, black 1dvh, transparent 10dvh calc(100% - 50dvh), black calc(100% - 1dvh)), rgb(15, 15, 15);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	row-gap: 2dvh;
	padding: 5dvh 0;
}

.section-secret-header {
	color: white;
	text-align: center;
	font-size: 1.5rem;
}

.section-secret-header h2 {
	font-size: 2rem;
}

.secret-entry {
	width: 75%;
	background: linear-gradient(to right, var(--color-primary-red), var(--color-primary-purple));
	border-radius: 20px;
	display: flex;
	flex-direction: column;
}

.secret-header {
	width: 100%;
	background-color: transparent;
	border: none;
	font-size: 1.75rem;
	text-align: center;
	padding: 1dvw 1dvh;
	color: white;
}

.secret-body {
	color: white;
	text-align: center;
	font-size: 1.5rem;
	overflow: hidden;
	transition: max-height 0.5s ease-out;
	max-height: 0;
}

.secret-body-visible {
	max-height: 100dvh;
	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;
	}
	.kyros-note {
		margin: 0;
		padding: 1dvh 1dvw;
	}
	.kyros-text {
		font-size: 1rem;
	}
	.db-entry {
		width: 90%;
	}
	.db-body-visible {
		max-height: 300dvh;
		transition: max-height 1.0s ease-out;
	}
	.secret-entry {
		width: 90%;
	}
	.secret-body-visible {
		max-height: 400dvh;
		transition: max-height 1.0s ease-out;
	}
}


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

}