:root {
	--primary: #C00F0C;
	--red-100: #FDE8E8;
	--gray-50: #F9FAFB;
	--gray-300: #D1D5DB;
	--gray-500: #6B7280;
	background-color: var(--gray-50);
	font-family: Inter, sans-serif;
	font-feature-settings: 'liga' 1, 'calt' 1;
}

@supports (font-variation-settings: normal) {
	:root { font-family: InterVariable, sans-serif; }
}

body { max-width: 800px; margin: 0 auto; }

* { box-sizing: border-box; }


input, textarea, button {
	font-family: inherit;
	font-size: inherit;
}

form {
	padding: 20px;
	background-color: white;
}

textarea, input {
	padding: 10px;
	border: 1px solid var(--gray-300);
	background-color: var(--gray-50);
	color: var(--gray-500);
	border-radius: 8px;
	width: 100%;
}

.button {
	display: block;
	width: max-content;
	background-color: var(--primary);
	text-decoration: none;
	color: white;
	border: 0;
	padding: 4px 8px;
	border-radius: 8px;
}

.button:hover { opacity: 0.8; }

.tags > * {
	background-color: var(--red-100);
	color: var(--primary);
	padding: 2px 6px;
	border-radius: 8px;
}

button[role=tab] {
	background: transparent;
	border: 0;
	color: #8F8F8F;
}

button[role=tab][aria-selected=true] {
	color: #C00F0C;
	border-bottom: 1px solid #C00F0C;
}

input[type=search] {
	margin-bottom: 16px;
}

.tabs {
	border-bottom: 1px solid #C2C2C2;
	margin-bottom: 16px;
}

img { height: auto; width: 100%; }

form > * + * { margin-top: 20px; }

label { display: block; }

.recipe-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

@media (min-width: 800px) {
	.recipe-grid { grid-template-columns: 1fr 1fr }
}

.title-button {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.hidden { display: none; }

.error { color: var(--primary) }

.preparation-time { display: flex; gap: 16px; }

.preparation-time > div { flex-grow: 1; }