:root {
	/* Purple */
	--color-purple: #6d5acf;
	--color-purple-bg: #4b00824d;
	--color-purple-active: #4b0082;

	/* Blue */
	--color-blue: #87ceeb;
	--color-blue-bg: #87ceeb4d;
	--color-blue-hover: #5bb7df;
	--color-blue-active: #007fff;

	/* Red */
	--color-red: #dc143c;
	--color-red-bg: #dc143c4d;
	--color-red-active: #590016;

	/* Neutral */
	--color-white: #ffffff;
	--color-black: #000000;
}

#nav {
	position: sticky;
	top: 0;
	z-index: 1000;
}

/* Navbar */
.navbar {
	background: linear-gradient(90deg, var(--color-blue), var(--color-purple), var(--color-blue));
}

/* Navbar links */
.navbar .nav-link,
.navbar .dropdown-item {
	border-radius: 0.375rem;
	transition:
		background-color 0.2s ease,
		color 0.2s ease;
}

.navbar .nav-link:hover,
.navbar .dropdown-item:hover {
	background-color: var(--color-red);
	color: var(--color-white);
}

.navbar .nav-link.active,
.navbar .dropdown-item.active {
	background-color: var(--color-red-active);
	color: var(--color-white);
	font-weight: 600;
}

/* Dropdown */
.navbar .dropdown-menu {
	background: linear-gradient(90deg, var(--color-blue), var(--color-purple));
}

.navbar .dropdown-hub {
	font-weight: 600;
	padding-left: 1rem;
}

.navbar .dropdown-item:not(.dropdown-hub) {
	padding-left: 2rem;
}

.dropdown-menu .dropdown-header {
	font-weight: 600;
	color: var(--color-black);
	padding: 0.5rem 1rem 0.25rem;
}

.dropdown-menu .dropdown-section {
	border-top: 1px solid var(--color-black);
	margin-top: 0.25rem;
}

.navbar .btn {
	color: var(--color-red);
	border-color: var(--color-red);
	transition:
		background-color 0.2s ease,
		color 0.2s ease;
}

.navbar .btn:hover {
	background-color: var(--color-red);
	border-color: var(--color-red);
	color: var(--color-white);
}

/* Red Section */
.sec-red {
	background-color: var(--color-red-bg);
}

.sec-red .btn-primary {
	background-color: var(--color-red);
	border-color: var(--color-red);
	color: var(--color-white);
	transition: 0.6s;
}

.sec-red .btn-primary:hover {
	background-color: var(--color-red-active);
	border-color: var(--color-red-active);
	color: var(--color-white);
}

/* Blue Section */
.sec-blue {
	background-color: var(--color-blue-bg);
}

.sec-blue .btn-primary {
	background-color: var(--color-blue);
	border-color: var(--color-blue);
	color: var(--color-black);
	transition: 0.6s;
}

.sec-blue .btn-primary:hover {
	background-color: var(--color-blue-active);
	border-color: var(--color-blue-active);
	color: var(--color-white);
}

.sec-blue .accordion-button {
	background-color: var(--color-blue);
	color: var(--color-black);
}

.sec-blue .accordion-button:hover {
	background-color: var(--color-blue-hover);
}

.sec-blue .accordion-button:not(.collapsed) {
	background-color: var(--color-blue-active);
	color: var(--color-black);
}

/* Purple Section */
.sec-purple {
	background-color: var(--color-purple-bg);
}

.sec-purple .btn-primary {
	background-color: var(--color-purple);
	border-color: var(--color-purple);
	color: var(--color-white);
	transition: 0.6s;
}

.sec-purple .btn-primary:hover {
	background-color: var(--color-purple-active);
	border-color: var(--color-purple-active);
	color: var(--color-white);
}

.age-warning {
	position: fixed;
	inset: 0;
	z-index: 9999;

	display: flex;
	align-items: center;
	justify-content: center;

	background-color: rgba(0, 0, 0, 0.9);
	padding: 1rem;
}

.age-warning-box {
	max-width: 500px;
	width: 100%;
	padding: 2rem;

	background-color: var(--color-white);
	border-radius: 0.75rem;
	text-align: center;
}