/* ======================== */
/* JUMP NAVIGATION          */
/* ======================== */

#jump {
	display:flex;
	position:fixed;
	right:24px;
	bottom:24px;
	gap:10px;
	z-index:99;
}

#jump div {
	transition:all 0.1s;
	cursor:pointer;
	box-shadow:0px 3px 5px rgba(0,0,0,0.5);
	border-radius:50%;
	background:var(--colOrangeMid);
	padding:16px;
	width:64px;
	height:64px;
	user-select:none;
}

#jump div:hover, #jump div:focus {
	transform:translate(0px, -1px);
	background:var(--colOrangeLight);
}

#jump div:active {
	transform:translate(0px, 1px);
	background:var(--colOrangeDark);
}

#jump .disabled {
	transform:translate(0px, 0px) !important;
	opacity:0.5;
	cursor:unset !important;
	background:var(--colPrimaryDarker) !important;
}

#jump img {
	width:100%;
	height:100%;
}

#jumpBottom img {
	transform:scaleY(-1);
}

/* ======================== */
/* HEADER BAR               */
/* ======================== */

#headerBar {
	position:relative;
	z-index:1;
	box-shadow:inset 0px -3px 3px rgba(0, 0, 0, 0.3), 0px 3px 5px rgba(0, 0, 0, 0.5);
	background:repeating-linear-gradient(-60deg, transparent, transparent 8px, rgba(0, 0, 0, 0.15) 8px, rgba(0, 0, 0, 0.15) 13px) top center / 15px, linear-gradient(0deg, #312E28 5%, #211F1C 95%);
	height:80px;
}

#headerBarContent {
	display:flex;
	justify-content:center;
	margin:0px auto;
	padding:0px 16px;
	max-width:var(--contentWidth);
	height:100%;
}

#headerLogo {
	display:inline-block;
	margin-top:16px;
	height:100px;
}

#headerLogo:hover, #headerLogo:focus {
	filter:brightness(1.15);
}

#headerLogo:active {
	filter:brightness(0.85);
}

#headerLogo img {
	filter:drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));
	height:100%;
}

#headerLinks {
	display:flex;
	align-items:center;
	gap:16px;
	margin-left:auto;
	height:100%;
}

#headerLinks .donate {
	width:200px;
}

@media (max-width:1000px) {
	#headerLinks {
		display:none !important;
	}
}

/* ======================== */
/* IMAGE BANNER             */
/* ======================== */

#headerBanner {
	display:flex;
	position:relative;
	justify-content:center;
	height:var(--bannerHeight);
	overflow:hidden;
}

#headerBanner img {
	width:100%;
	max-width:var(--bannerWidth);
	height:100%;
	object-fit:cover;
}

#headerBlur {
	position:absolute;
	filter:blur(calc(var(--bannerFade) / 2));
}

#headerImage {
	mask-image:linear-gradient(90deg, transparent, #000000 var(--bannerFade), #000000 calc(100% - var(--bannerFade)), transparent);
}

@media (max-width:1400px) {
	#headerBlur {
		display:none !important;
	}

	#headerImage {
		mask-image:unset !important;
	}
}