:root {
	--color-dark-blue-light-fade: 91, 137, 236;
	--color-yellow: 237, 201, 81;

	--color-player-rank-1: var(--color-yellow); /* Guest */
	--color-player-rank-2: 254, 78, 218; /* Donator */
	--color-player-rank-3: 155, 89, 182; /* Supporter */
	--color-player-rank-4: 155, 89, 182; /* Power Supporter */
	--color-player-rank-5: 46, 204, 113; /* Moderator */
	--color-player-rank-6: 31, 139, 76; /* Senior Moderator */
	--color-player-rank-7: 226, 61, 40; /* Developer */
	--color-player-rank-8: 19, 118, 252; /* Owner */
}

.player-color-rank-2 {
	color: rgb(var(--color-player-rank-2));
}

html {
	height: 100%;
}

body {
	min-height: 100%;
	display: flex;
	flex-direction: column;
}

body-inner {
	display: flex;
	flex-direction: column;
	flex: 1 0 auto;
}

main {
	flex: 1 0 auto;
}

.nav-link {
	color: #FFF;
}

.navbar-nav .nav-link {
	border-bottom: 0.25rem solid transparent;
}

.navbar-nav .nav-link:focus,
.navbar-nav .nav-link:hover {
	color: #FFF;
	border-color: rgb(var(--color-yellow));
}

.navbar-nav .nav-link.active,
.navbar-nav .show > .nav-link {
	border-color: rgb(var(--color-dark-blue-light-fade));
	color: #FFF;
}

#social-buttons {
	font-size: 40px;
	line-height: 1;
}

#social-buttons > a {
	color: #FFF;
	text-decoration: none;
}

#social-buttons > a:focus,
#social-buttons > a:hover {
	color: #DDD;
}

#social-buttons .fab {
	vertical-align: top;
}

.fa-heart {
	color: #fe4eda;
	-webkit-text-stroke: 2px #FFF;
}

.navbar-toggler {
	color: #FFF;
	border-color: #FFF;
}

/* Original icon, except white */
.navbar-toggler-icon {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

main .btn,
main .bg-light.text-body .btn {
	--bs-btn-color: #FFF;
	--bs-btn-hover-color: #FFF;
	--bs-btn-active-color: #FFF;
	--bs-btn-bg: var(--bs-dark);
	--bs-btn-hover-bg: var(--bs-dark);
	--bs-btn-active-bg: var(--bs-dark);
	--bs-btn-border-color: rgb(var(--color-dark-blue-light-fade));
	--bs-btn-hover-border-color: rgb(var(--color-yellow));
	--bs-btn-active-border-color: rgb(var(--color-yellow));

	border-radius: 0;
	border-top: 0;
	border-left: 0;
	border-right: 0;
	border-bottom-width: 0.25rem;
}

main .bg-dark .btn {
	--bs-btn-color: #FFF;
	--bs-btn-hover-color: #FFF;
	--bs-btn-active-color: #FFF;
	--bs-btn-bg: rgb(var(--color-dark-blue-light-fade));
	--bs-btn-hover-bg: rgb(var(--color-dark-blue-light-fade));
	--bs-btn-active-bg: rgb(var(--color-dark-blue-light-fade));
	--bs-btn-border-color: #FFF;
	--bs-btn-hover-border-color: rgb(var(--color-yellow));
	--bs-btn-active-border-color: rgb(var(--color-yellow));
}

footer.footer {
	background: no-repeat center 0%/cover url("/img/footer_background.jpg");
	color: #FFF;
}

footer.footer .nav-link {
	background-color: #222;
}

footer.footer .nav-link:focus,
footer.footer .nav-link:hover {
	color: #FFF;
	background-color: #444;
}

footer.footer img {
	max-width: 100%;
}