:root{
	/* HEX = #5182ec */
	--color-brand-hue: 221deg;
	--color-brand-saturation: 80%;
	--color-brand-lightness: 62%;

	--menu-width: 350px;
}

body{
	letter-spacing: 0.05em;
}

@layer init_toggleable_sides {
	.toggleable_side {
		transition:
			width var(--transition-velocity) ease-in-out,
			opacity var(--transition-velocity) ease-in-out,
			display var(--transition-velocity) ease-in-out allow-discrete;

		&.shown {
			display: flex;
			width: 50%;
			opacity: 1;
		}

		&.not_ready { transition: none; }
	}

	@starting-style {
		.toggleable_side.shown {
			width: 0;
			opacity: 0;
		}
	}
}