:root {
	--border_color: hsla(var(--color_hue,0) var(--color_sat,0) var(--color_lightness_border,0) / 1);
	--background_color: hsla(var(--color_hue,0) var(--color_sat,0) var(--color_lightness_background,100) / var(--color_alpha,0.8));
	--border_form_color: hsla(var(--color_hue,0) var(--color_sat,0) var(--color_lightness_border_form,0) / 1);
	--background_form_color: hsla(var(--color_hue,0) var(--color_sat,0) var(--color_lightness_background_form,100) / var(--color_alpha,0.8));
	--background_button_color: hsla(var(--color_hue,0) var(--color_sat,0) var(--color_lightness_background_form,100) / 1);
	--button_hover_color: hsla(var(--color_hue,0) var(--color_sat,0) calc(50% + (var(--color_lightness_background_form,100) / 2)) / 1)
}
body {
	width: 100dvw;
	height: 100dvh;
	margin: 0;
	padding: 0;
	font-family: 'Bitter', Helvetica, Arial, sans-serif;
	font-size: 120%;
	overflow: hidden;
	
	background-image: var(--background_img); /* The image used */
	background-color: rgba(0 0 0 / 0.4); /* Used if the image is unavailable and for the blend */
	background-blend-mode: darken; /* Blend the background image with the color to lighten it */
	background-position: center; /* Center the image */
	background-repeat: no-repeat; /* Do not repeat the image */
	background-size: cover; /* Resize the background image to cover the entire container */
	background-attachment: fixed; /* Don't move when scrolling */
}
.box {
	text-align: center;
	border: 5px solid var(--border_color);
	border-radius: 10px;
	background-color: var(--background_color);
	color: var(--color_text,black);
}
.alert {
	display: block;
	text-align: center;
	border: 2px solid var(--border_color);
	border-radius: 10px;
	background-color: var(--background_color);
	color: var(--color_text,black);
	width: fit-content;
	margin-block: 0.5rem;
	margin-inline: auto;
	padding: 0.25rem;
}
.alert-danger {
	--border_color: hsla(0 100 50 / 1);
	--background_color: hsla(0 100 70 / 0.75);
	--color_text: black;
}
.alert-warning {
	--border_color: hsla(30 100 50 / 1);
	--background_color: hsla(30 100 70 / 0.75);
	--color_text: black;
}
.alert-info {
	--border_color: hsla(190  88 80 / 1);
	--background_color: hsla(191  88  90 / 1);
	--color_text: hsla(190  90  20 / 1);
}
.main_box {
	width: 90dvw;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	box-sizing: border-box;
	padding: 0px 10px;
	max-height: calc(100dvh - 10dvw);
	overflow-x: auto;

	&:has(.main_form) {
		display: flex;
		flex-direction: column;

		& div {
			margin-top: 0;
		}
	}
}
.main_form {
	overflow-y: auto;
	flex: 1 1 auto;
}
.main_box > div {
	font-weight: bold;
	margin-block: 0.67em;
}
.secondary_box {
	width: fit-content;
	max-width: 90%;
}
.footer {
	width: fit-content;
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translate(-50%, 0);
	padding: 10px 15px;
	font-size: 75%;
}
form, .form_box {
	border: 2px solid var(--border_form_color);
	border-radius: 10px;
	background-color: var(--background_form_color);
	margin: 20px auto;
	padding: 10px;
	width: fit-content;
	color: var(--color_text_form,black);
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.form_fields {
	display: grid;
	grid-template-columns: max-content max-content;
	row-gap: 5px;
	column-gap: 15px;
}
.form_fields label {
	text-align: left;
}
input[type="submit"], button, a.btn {
	display: inline-block;
	border: 2px solid var(--border_form_color);
	border-radius: 5px;
	padding: 1px 6px;
	background-color: var(--background_button_color);
	color: var(--color_text_form,black);
	cursor: pointer;
	font-family: inherit;
	font-size: 85%;
	text-decoration: none;
	transition: background-color 0.5s;
}
input[type="submit"] {
	margin: 10px 0 0 0;
}
input[type="submit"]:hover, button:hover, a.btn:hover {
	background-color: var(--button_hover_color);
}
input[type="submit"].disabled, button.disabled, a.btn.disabled,
input[type="submit"][disabled], button[disabled], a.btn[disabled] {
	pointer-events: none;
	opacity: 0.65;
}
a.btn.album_btn, a.btn.list_btn, .options_list {
	display: flex;
	flex-direction: row;
	gap: 0.5rem;
	font-size: 100%;
	align-items: center;

	&.unav {
	    cursor: not-allowed;
	    filter: saturate(0.5);
		opacity: 0.65;
	}

	& span.vgroup {
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
	}

	& i.fa-solid {
		flex: 0 0 auto;
	}

	& span.title {
		font-size: 100%;
		text-align: left;
		flex: 1 1 auto;
	}

	& span.place, & span.subtitle {
		font-size: 85%;
		text-align: left;
		flex: 0 0 auto;
		
		@media (max-width: 750px) {
			display: none; /* Too much info for mobile */
		}
	}

	& span.date, & span.right {
		font-size: 85%;
		text-align: right;
		flex: 0 0 auto;
		flex-basis: fit-content;
		/* display: none; /* Hide date, breaks a bit on mobile */
	}

	
}
.options_list {
	border: 2px solid var(--border_form_color);
	border-radius: 5px;
	padding: 1px 6px;
	background-color: var(--background_button_color);
	color: var(--color_text_form,black);
	font-family: inherit;
	font-size: 85%;
	text-decoration: none;

	& > .right > label:has(input[type="radio"]) {
		display: inline-block;
		width: 20px;
		height: 20px;
		border: 2px solid var(--border_form_color);
		border-radius: 5px;
		padding: 1px 6px;
		background-color: var(--background_button_color);
		color: var(--color_text_form,black);
		cursor: pointer;
		font-family: inherit;
		font-size: 85%;
		text-decoration: none;
		transition: background-color 0.5s;
		text-align: center;
		align-content: center;
		filter: saturate(0%);

		& > input {
			width: 0 !important;
			height: 0 !important;
			display: none !important;
		}
	}

	& > .right > label:has(input:checked) {
		filter: saturate(300%);
	}
}

.small {
	font-size: 80%;
}

.popup {
	display: none;
	opacity: 0;
	transition: opacity 0.5s;
}
.popup::before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(0 0 0 / 0.5);
}
.popup button, .popup a.btn {
	margin: 0 0 10px 0;
}
a {
	color: inherit;
}
.nobr {
	white-space: nowrap;
}
.invalid-text {
	text-align: right;
	font-size: 80%;
	color: red;
	width: 100%;
}