.g-headline {
	font-weight: 900;
	text-transform: uppercase;
	font-size: 2rem;
	font-family: "Lora", sans-serif;
	color: #29c4ff !important;
	text-shadow:
		0 0 18px rgba(41, 196, 255, 0.35),
		2px 2px 6px var(--bg-darkest);
	transition: 180ms ease;
}

.g-headline:hover {
	color: #ffffff !important;
	text-shadow:
		0 0 22px rgba(41, 196, 255, 0.65),
		2px 2px 6px var(--bg-darkest);
}

#guides-section .card {
	background: linear-gradient(180deg, rgba(10, 21, 32, 0.94), rgba(5, 12, 20, 0.96));
	border: 1px solid rgba(120, 231, 255, 0.24);
	border-radius: 0;
	box-shadow:
		0 22px 60px rgba(0, 0, 0, 0.45),
		0 0 24px rgba(41, 196, 255, 0.08);
}

#guides-section .collapse a {
	display: block;
	width: 100% !important;
	max-width: 360px;
	margin: 0 auto;
}

#guides-section .c-button {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	text-transform: none;
	min-height: 52px;
	background: linear-gradient(180deg, #6ee7ff 0%, #27c8ff 42%, #0c92db 72%, #076cad 100%) !important;
	border: 0 !important;
	border-radius: 0;
	font-weight: 700;
	color: #ffffff !important;
	box-shadow:
		inset 0 2px 0 rgba(255, 255, 255, 0.3),
		inset 0 -2px 0 rgba(0, 0, 0, 0.25),
		0 0 20px rgba(41, 196, 255, 0.16);
	cursor: pointer;
	transition: transform 180ms ease, filter 180ms ease, box-shadow 180ms ease;
}

#guides-section .c-button:hover {
	transform: translateY(-2px);
	filter: brightness(1.08);
	box-shadow:
		inset 0 2px 0 rgba(255, 255, 255, 0.38),
		inset 0 -2px 0 rgba(0, 0, 0, 0.28),
		0 0 28px rgba(41, 196, 255, 0.34),
		0 10px 24px rgba(0, 0, 0, 0.32);
}

#thumbnail,
.guide-thumbnail {
	max-height: 24px;
	max-width: 24px;
	object-fit: contain;
	margin-right: 6px;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

#guide-image {
	max-height: 100px;
	padding: 10px;
	filter: drop-shadow(0 0 12px rgba(41, 196, 255, 0.18));
}

.guide-header {
	font-weight: 900;
	text-transform: uppercase;
	font-size: clamp(3rem, 8vw, 5rem);
	font-family: "Lora", sans-serif;
	color: #ffffff;
	text-align: center;
	margin: 0 auto 20px;
	text-shadow:
		0 0 22px rgba(41, 196, 255, 0.24),
		black 2px 2px 2px;
}

#guide-section {
	background: linear-gradient(180deg, rgba(10, 21, 32, 0.78), rgba(5, 12, 20, 0.9));
	border: 1px solid rgba(120, 231, 255, 0.18);
	box-shadow: 0 22px 60px rgba(0, 0, 0, 0.45);
}

#guide-section h2 {
	text-align: left;
	margin: 75px 0 0 50px;
	font-weight: bold;
	color: #29c4ff;
	text-shadow: 0 0 16px rgba(41, 196, 255, 0.28);
}

#guide-section p {
	text-align: left;
	margin-left: 55px;
	color: #d1deea;
}

#guide-section ul,
#guide-section ol {
	text-align: left;
	color: #d1deea;
}

#guide-section li {
	margin-bottom: 8px;
}

#guide-section .u-seperator {
	background: radial-gradient(circle, #29c4ff 0%, rgba(41, 196, 255, 0.6) 50%, rgba(15, 15, 15, 0.81) 100%) !important;
	box-shadow: 0 0 18px rgba(41, 196, 255, 0.28);
}

.guide-image-container {
	border: 1px solid rgba(120, 231, 255, 0.28);
	background: rgba(3, 8, 14, 0.72);
	box-shadow:
		0 18px 42px rgba(0, 0, 0, 0.42),
		0 0 20px rgba(41, 196, 255, 0.08);
}

/* Help box at bottom of guides page */
.asc-help-box,
.u-discord {
	background: linear-gradient(180deg, rgba(10, 21, 32, 0.94), rgba(5, 12, 20, 0.96)) !important;
	border: 1px solid rgba(120, 231, 255, 0.24);
	border-radius: 0;
	box-shadow:
		0 22px 60px rgba(0, 0, 0, 0.45),
		0 0 24px rgba(41, 196, 255, 0.08);
}

.asc-help-box .u-headline,
.u-discord .u-headline {
	color: #29c4ff !important;
	text-shadow: 0 0 18px rgba(41, 196, 255, 0.35);
}

.asc-help-box p,
.u-discord p {
	color: #d1deea;
}

.asc-help-box .u-seperator,
.u-discord .u-seperator {
	background: radial-gradient(circle, #29c4ff 0%, rgba(41, 196, 255, 0.55) 45%, transparent 100%) !important;
}

.asc-help-box .c-button_discord,
.u-discord .c-button_discord {
	background: linear-gradient(180deg, #5865f2 0%, #4752c4 100%) !important;
	border: 0 !important;
	color: #ffffff !important;
	box-shadow: 0 0 20px rgba(88, 101, 242, 0.22);
}

.asc-help-box .c-button_discord:hover,
.u-discord .c-button_discord:hover {
	box-shadow:
		0 0 28px rgba(88, 101, 242, 0.45),
		0 10px 24px rgba(0, 0, 0, 0.32);
}

@media (max-width: 768px) {
	#guide-section h2 {
		margin: 45px 0 0 0;
		text-align: center;
	}

	#guide-section p {
		margin-left: 0;
		text-align: center;
	}

	#guides-section .collapse a {
		max-width: 100%;
	}
}