:root {
	--color-light: #fdf9ec;
	--color-light2: #d8ccab;
	--color-dark: #11193b;

	--color-easy: #71abff;
	--color-intr: #f4ba14;
	--color-chal: #f889e7;
	--color-hard: #ff5757;
}

.bg-custom-light { background-color: var(--color-light); }
.text-custom-light { color: var(--color-light); }

.bg-custom-light2 { background-color: var(--color-light2); }
.text-custom-light2 { color: var(--color-light2); }

.bg-custom-dark { background-color: var(--color-dark); }
.text-custom-dark { color: var(--color-dark); }

.bg-custom-easy { background-color: var(--color-easy); }
.bg-custom-intr { background-color: var(--color-intr); }
.bg-custom-chal { background-color: var(--color-chal); }
.bg-custom-hard { background-color: var(--color-hard); }

.btn-light2 {
	--bs-btn-color: #11193b;
	--bs-btn-bg: #d8ccab;
	--bs-btn-border-color: #d8ccab;
	--bs-btn-hover-color: #11193b;
	--bs-btn-hover-bg: #cbbf9f;
	--bs-btn-hover-border-color: #cbbf9f;
	--bs-btn-active-color: #11193b;
	--bs-btn-active-bg: #bfb392;
	--bs-btn-active-border-color: #bfb392;
	--bs-btn-disabled-color: #11193b;
	--bs-btn-disabled-bg: #d8ccab;
	--bs-btn-disabled-border-color: #d8ccab;
}

.btn-custom-dark {
	--bs-btn-color: #ffffff;
	--bs-btn-bg: #11193b;
	--bs-btn-border-color: #11193b;
	--bs-btn-hover-color: #ffffff;
	--bs-btn-hover-bg: #1a245a;
	--bs-btn-hover-border-color: #1a245a;
	--bs-btn-active-color: #ffffff;
	--bs-btn-active-bg: #0d1430;
	--bs-btn-active-border-color: #0d1430;
	--bs-btn-disabled-color: #ffffff;
	--bs-btn-disabled-bg: #11193b;
	--bs-btn-disabled-border-color: #11193b;
}

.border-custom-dark { border-color: var(--color-dark) !important; }

body { font-family: "Bricolage Grotesque", sans-serif; background-color: var(--color-light); color: var(--color-dark); }

.noto-emoji { font-family: "Noto Emoji", sans-serif; font-optical-sizing: auto; font-weight: <weight>; font-style: normal; }

/*****************************************************/

#mainContainer, #siteContainer { min-height: 100%; }
#siteContainer { background: url('/img/background.jpg') top center repeat-y; }

/*****************************************************/

.game-select-easy, .game-select-intr, .game-select-chal, .game-select-hard { transition: background-color .3s; }
.game-select-easy:hover { background-color: var(--color-easy) !important; }
.game-select-intr:hover { background-color: var(--color-intr) !important; }
.game-select-chal:hover { background-color: var(--color-chal) !important; }
.game-select-hard:hover { background-color: var(--color-hard) !important; }

.game-select-easy .btn-light2, .game-select-intr .btn-light2, .game-select-chal .btn-light2, .game-select-hard .btn-light2 {
	--bs-btn-hover-bg: var(--color-light);
	--bs-btn-active-bg: var(--color-light);
}

.fs-1-responsive { font-size: min(calc(1.2vw + 1rem), 2.4rem); }

.clueBtn .progress-bar { position: absolute; inset: 0; width: 0%; background: rgba(0, 0, 0, 0.25); z-index: 0; transition: width 0.05s linear; }
.clueBtn .btn-text { position: relative; z-index: 1; }
@keyframes textSwap { 0% { opacity: 0; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1); } }
.clueBtn .btn-text.animate { animation: textSwap 0.5s ease-out; }

/*****************************************************/

.appearOnScroll { transition-delay: 300ms; }
.appearOnScroll { opacity: 0; transition: all .4s; }
.appearOnScroll.appearOnScroll-visible { opacity: 1; }

.appearOnScroll.aosTranslateShow { transform: scale(.9) translateY(2rem); }
.appearOnScroll.aosTranslateShow.appearOnScroll-visible { transform: scale(1) translateY(0); }

.appearOnScroll.aosTranslateHide { transform: scale(.9) translateY(0rem); }
.appearOnScroll.aosTranslateHide.appearOnScroll-visible { transform: scale(1) translateY(-2rem); }