:root {

	--brand-color: #0043EF;
	--brand-color-rev: #fff;
	--gradient-start: #0043EF;
	--gradient-stop: #0043EF;

	--rgb-brand-color: 0, 0, 0;
	--rgb-brand-color-rev: 255, 255, 255;
	--rgb-gradient-start: 0, 67, 239;
	--rgb-gradient-stop: 0, 67, 239;

	/* https://github.com/twbs/bootstrap/blob/main/dist/css/bootstrap.css */

	--bs-border-radius: 10px;
}

.shadow.shadow-brand, .shadow-lg.shadow-brand, .shadow-sm.shadow-brand {

--bs-box-shadow: 0 0.5rem 1rem rgba(var(--rgb-brand-color), 0.15);
--bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(var(--rgb-brand-color), 0.15);
--bs-box-shadow-lg: 0 1rem 3rem rgba(var(--rgb-brand-color), 0.175);

}

a, a:link, a:visited, a:hover, a:active { 
	color: var(--brand-color);
}

@media (max-width: 576px) {

	.ratio-21x9,
	.ratio-16x9 {
		--bs-aspect-ratio: 60%;
	}
}


.logo {
	height: 30px;
}

.btn {
	border-radius: var(--bs-border-radius);
}

.gradient-dark-bottom-top {
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.45) 100%);
}

.bg-danger.arrow-top {
	position: relative;
	background: #DC3545;
}

.bg-danger.arrow-top:after {
	bottom: 100%;
	left: 30px;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(220, 53, 69, 0);
	border-bottom-color: #DC3545;
	border-width: 7px;
	margin-left: -7px;
}

#background {
	position: absolute;
	width: 100%;
}

#background::before {
	/*https://stackoverflow.com/a/72508137/776264*/
	content: '';
	background: var(--gradient-start);
	background: linear-gradient(90deg, var(--gradient-start) 0%, var(--gradient-stop) 100%);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	position: fixed;
	min-height: 100vh;
	width: 100vw;
	z-index: -1;
}

#submenu .badge {
	background: var(--gradient-start);
	background: linear-gradient(90deg, var(--gradient-start) 0%, var(--gradient-stop) 100%);
	font-weight: normal;
}


#menu {
	/*https://stackoverflow.com/a/72508137/776264*/
	background: var(--gradient-start);
	background: linear-gradient(90deg, var(--gradient-start) 0%, var(--gradient-stop) 100%);
	box-shadow: 0px 16px 19px -3px rgba(var(--brand-color), 0.15);
}

#menu a.underline,
#menu .dropdown-toggle {
	color: var(--brand-color-rev);
}

#menu a.underline {
	position: relative;
	text-decoration: none;
	transition: 0.6s;
}

#menu a.underline:hover {
	color: var(--brand-color) !important;
	transition: 0.3s;
}

#menu a.underline::before {
	content: "";
	position: absolute;
	display: block;
	width: 100%;
	height: 2px;
	bottom: 0;
	left: 0;
	background-color: var(--brand-color);
	transform: scaleX(0);
	transition: all 0.3s;
}

#menu a.underline:hover::before {
	transform: scaleX(1);
	transition: all 0.3s;
}


#menu .navbar-brand {
	color: var(--brand-color) !important;
	font-weight: bold;
}


@-webkit-keyframes wobble-vertical {
	16.65% {
		-webkit-transform: translateY(8px);
		transform: translateY(8px);
	}

	33.3% {
		-webkit-transform: translateY(-6px);
		transform: translateY(-6px);
	}

	49.95% {
		-webkit-transform: translateY(4px);
		transform: translateY(4px);
	}

	66.6% {
		-webkit-transform: translateY(-2px);
		transform: translateY(-2px);
	}

	83.25% {
		-webkit-transform: translateY(1px);
		transform: translateY(1px);
	}

	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}

@keyframes wobble-vertical {
	16.65% {
		-webkit-transform: translateY(8px);
		transform: translateY(8px);
	}

	33.3% {
		-webkit-transform: translateY(-6px);
		transform: translateY(-6px);
	}

	49.95% {
		-webkit-transform: translateY(4px);
		transform: translateY(4px);
	}

	66.6% {
		-webkit-transform: translateY(-2px);
		transform: translateY(-2px);
	}

	83.25% {
		-webkit-transform: translateY(1px);
		transform: translateY(1px);
	}

	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}

.wobble-vertical {
	display: inline-block;
	vertical-align: middle;
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.wobble-vertical:hover,
.wobble-vertical:focus,
.wobble-vertical:active {
	animation-name: wobble-vertical;
	animation-duration: 1s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
}

.wobble-vertical a:hover,
.wobble-vertical a:hover .text-body-secondary,
.wobble-vertical a:focus,
.wobble-vertical a:focus .text-body-secondary,
.wobble-vertical a:active,
.wobble-vertical a:active .text-body-secondary {}