@font-face {
	font-family: "Open Sans";
	src: url("/fonts/open-sans.ttf") format("truetype");
}

* {
	scrollbar-width: thin;
	/* Thin scrollbar */
	scrollbar-color: rgb(82, 82, 82) transparent;
	/* Thumb color, track color */
}

:root {
	--red: #ce2424;
	--light-red: #fbd5d5;
	--light-green: #d5fbd5;
	--light-blue: #a1abce;
	--standard-blue: #0a85ed;
	--highlight-blue: #09a6f3;
	--active-blue: #0d41e1;
	--standard-grey: #9999a1;
	--highlight-grey: #e6e6e9;
	--active-grey: #66666e;
	--standard-orange: #e76d16;
	--highlight-orange: #e78c16;
	--active-orange: #ff6a00;
	--standard-purple: #9446d5;
	--highlight-purple: #c77dff;
	--active-purple: #702eb0;
	--standard-green: #119822;
	--highlight-green: #31cb00;
	--active-green: #2a7221;
	--standard-red: #d71c1c;
	--highlight-red: #ff0000;
	--active-red: #b90000;
	--sodilec-blue: #153558;
	--sodilec-green: #74c3bd;
	--spacing: 0.25rem;
	--gold: radial-gradient(
			ellipse farthest-corner at right bottom,
			#fedb37 0%,
			#fdb931 8%,
			#9f7928 30%,
			#8a6e2f 40%,
			transparent 80%
		),
		radial-gradient(
			ellipse farthest-corner at left top,
			#ffffff 0%,
			#ffffac 8%,
			#d1b464 25%,
			#5d4a1f 62.5%,
			#5d4a1f 100%
		);
}

body {
	min-width: 100dvw;
	font-family: "Open Sans", sans-serif;
	padding-bottom: env(safe-area-inset-bottom);
}

.w-principale {
	max-width: 96vw;
	overflow-x: auto;
}

/* Style for base buttons and its variations */
.activity-button {
	background-color: var(--standard-blue);
	color: white;
	border-radius: 0.5em;
	padding: 0.5em 1em;
	font-size: clamp(8px, 0.7vw, 20px);
	box-shadow: rgba(0, 0, 0, 0.4) 0 10px 20px -10px;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
	transition: 250ms;
	gap: 8px;
}

.activity-button.active {
	background-color: var(--active-blue) !important;
	box-shadow: none;
	transform: scale(0.95);
}

.activity-button:hover {
	background-color: var(--highlight-blue);
	transform: scale(1.05);
}

.activity-button select {
	border: 1px solid #000;
}

.activity-button.vari1 {
	background-color: var(--standard-green);
}

.activity-button.vari1.active {
	background-color: var(--active-green) !important;
	box-shadow: none;
}

.activity-button.vari1:hover {
	background-color: var(--highlight-green);
}

.activity-button.vari2 {
	background-color: var(--standard-red);
}

.activity-button.vari2:hover {
	background-color: var(--highlight-red);
}

.activity-button.vari2.active {
	background-color: var(--active-red) !important;
	box-shadow: none;
}

.activity-button.vari3 {
	background-color: var(--standard-orange);
	color: white;
}

.activity-button.vari3:hover {
	background-color: var(--highlight-orange);
}

.activity-button.vari3.active {
	background-color: var(--active-orange) !important;
	box-shadow: none;
}

.activity-button.vari4 {
	background-color: var(--standard-grey);
	color: black;
}

.activity-button.vari4:hover {
	background-color: var(--highlight-grey);
}

.activity-button.vari4.active {
	background-color: var(--active-grey) !important;
	color: #9baaaf;
	box-shadow: none;
}

.activity-button.vari5 {
	background-color: var(--standard-purple);
	color: white;
}

.activity-button.vari5:hover {
	background-color: var(--highlight-purple);
}

.activity-button.vari5.active {
	background-color: var(--active-purple) !important;
	box-shadow: none;
}

.activity-button:active {
	box-shadow: none;
}

/* Style for standard menu based on cards */
.menu-card {
	display: grid;
	align-content: center;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 0.5rem;
	border-radius: 1rem;
	padding: 0.25rem;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
	background-color: var(--banner-bg);
	color: var(--banner-text-color);
	user-select: none;
}

.menu-card .menu-button {
	width: 90%;
	display: flex;
	border-radius: 1rem;
	padding: 0.5rem;
	--panel-hover-bg: transparent;
}

.menu-card .menu-button:hover {
	background-color: var(--panel-bg);
	color: var(--panel-text-color);
}

.right-panel {
	background-color: var(--banner-bg);
	color: var(--banner-text-color);
	box-shadow: rgba(0, 0, 0, 0.15) -5px 10px 15px;
	display: flex;
	flex-direction: column;
	overflow: scroll;
}

/* Scrollbar */
::-webkit-scrollbar {
	z-index: 0;
	width: 5px;
	height: 5px;
	background-color: transparent;
}

::-webkit-scrollbar-track {
	z-index: 0;
	background-color: transparent;
}

::-webkit-scrollbar-thumb {
	background: rgb(82, 82, 82);
	border-radius: 10px;
}

::-webkit-scrollbar-button {
	display: none;
}

::-webkit-scrollbar-corner {
	display: none;
}

::-webkit-resizer {
	display: none;
}

.one-word-per-line {
	word-spacing: 2vw;
}

.invert-black-filter {
	filter: invert(0%) sepia(30%) saturate(1585%) hue-rotate(90deg)
		brightness(90%) contrast(105%);
}

.invert-white-filter {
	filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(32deg)
		brightness(105%) contrast(103%);
}

.bg-gold {
	background: radial-gradient(
			ellipse farthest-corner at right bottom,
			#fedb37 0%,
			#fdb931 8%,
			#9f7928 30%,
			#8a6e2f 40%,
			transparent 80%
		),
		radial-gradient(
			ellipse farthest-corner at left top,
			#ffffff 0%,
			#ffffac 8%,
			#d1b464 25%,
			#5d4a1f 62.5%,
			#5d4a1f 100%
		);
}

.nav-item {
	width: 100%;
	aspect-ratio: 1 / 1;
	display: flex;
	position: relative;
	align-items: safe center;
	justify-items: safe center;
   padding: calc(var(--spacing) * 2);
}

.nav-icon {
	width: 100%;
	height: 100%;
	max-width: 64px;
	max-height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-md);
}

.nav-icon i {
	font-size: clamp(25px, 2.8vw, 34px);
	transition: 250ms;
}

.nav-icon:hover {
	background-color: #364153;
	color: white;
	border-radius: 0.25rem;
}