:root {
	--purple: #FFEBFF;
	--purple-medium: #F0C1FF;
	--purple-darker: #ECADFE;
	--purple-black: #550F6F;
	--purple-alt: #7F2FC7;
}

html,
body {
	background: var(--purple);

	font-family: "Roboto Flex", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	font-variation-settings:
		"slnt" 0,
		"wdth" 100,
		"GRAD" 0,
		"XOPQ" 96,
		"XTRA" 468,
		"YOPQ" 79,
		"YTAS" 750,
		"YTDE" -203,
		"YTFI" 738,
		"YTLC" 514,
		"YTUC" 712;
}

.condensed {
	font-variation-settings: "wdth" 25;
}

.nav {
	padding: 1em 0;
}

.nav>.nav-list {
	display: flex;
	flex-direction: row;
	overflow-x: auto;
	gap: 1em;
	margin: 0;
	padding: 0.4em 1em;
	list-style-type: none;
}

.nav>.nav-list>.nav-item>.nav-button {
	margin: 0;
	padding: 0;
	border: none;

	background: white;
	color: var(--purple-alt);
	font-size: 1.2em;
	font-weight: 500;
	font-variation-settings: "wdth" 25;
	border-radius: 20px;
	padding: 0.1em 1.6em;
	scroll-margin-top: 2em;
}

.nav>.nav-list>.nav-item>.nav-button.active {
	background: var(--purple-black);
	color: var(--purple);
}

main {
	padding: 1.6em 0.4em;
}

main h2 {
	font-size: 1.9em;
	text-transform: uppercase;
	font-weight: 600;
	font-variation-settings:
		"slnt" -10;
	text-align: center;
	width: 100%;
}

section {
	display: none;
}

section.active {
	display: block;
}

.card {
	padding: 0.6em 0.6em;
}

.card ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	display: flex;
	flex-direction: column;
	gap: 0.3em;
}

.card ul li {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	background: var(--purple-medium);
	color: var(--purple-black);
	border-radius: 1.5em;
	padding: 0.8em 1.2em;
	transition: all ease-in-out .1s;
}

.card ul li:hover {
	border-radius: 0.9em;
	transform: scale(1.05);
}

.card ul li span {
	display: block;
}

.card ul li span.ingredient {
	font-weight: 600;
}

.card .expand {
	margin: 0;
	padding: 0.3em 0.8em;
	background: none;
	border: none;
	color: var(--purple-black);
}

dialog {
	width: 90%;
	background: var(--purple-darker);
	border-radius: 1.5em;
	border: none;
	box-shadow: none;

	transition: opacity .15s ease-in-out, transform .1s ease-in-out;
	transition-behavior: allow-discrete;
	opacity: 1;
	transform: translateY(0);
}

@starting-style {
	dialog {
		opacity: 0;
		transform: translateY(-200px);
	}
}

dialog:not([open]) {
	opacity: 0;
	transform: translateY(-200px);
}

dialog .dialog-title {
	display: block;
	margin-bottom: 0.8em;
	font-size: 1.5em;
	font-weight: 600;
	text-align: center;
}

dialog .close-button {
	background: var(--purple-black);
	float: right;
	padding: 0.6em 1em;
	border: none;
	border-radius: 2em;
	color: white;
	margin-top: 2em;
}

dialog::backdrop {
	background-color: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(5px);
}