/* Color Variables */
:root {
	--white: hsl(0, 0%, 100%);
	--stone-100: hsl(30, 54%, 90%);
	--stone-150: hsl(30, 18%, 87%);
	--stone-600: hsl(30, 10%, 34%);
	--stone-900: hsl(24, 5%, 18%);
	--brown-800: hsl(14, 45%, 36%);
	--rose-800: hsl(332, 51%, 32%);
	--rose-50: hsl(330, 100%, 98%);
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Outfit", sans-serif;
	color: var(--stone-600);
	word-wrap: break-word;
	overflow-wrap: break-word;
}

body,
html {
	width: 100%;
	min-height: 100vh;
	overflow-x: hidden;
	background-color: var(--stone-100);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	padding: 1rem;
}

.card {
	background-color: var(--white);
	max-width: 736px;
	width: 100%;
	padding: 1.5rem;
	border-radius: 1.5rem;
}

.card img {
	width: 100%;
	height: auto;
	border-radius: 0.75rem;
	margin-bottom: 1.5rem;
}

.title h1 {
	font-family: "Young Serif", serif;
	font-size: 2rem;
	line-height: 1.3;
	color: var(--stone-900);
	margin-bottom: 1rem;
}

.title p {
	font-size: 1rem;
	line-height: 1.6;
	margin-bottom: 1.5rem;
}

.prep-time {
	background-color: var(--rose-50);
	padding: 1rem;
	border-radius: 0.75rem;
	margin-bottom: 2rem;
}

.prep-time h3 {
	font-size: 1rem;
	font-weight: 600;
	color: var(--rose-800);
	margin-bottom: 0.75rem;
}

.prep-time ul {
	padding-left: 1.25rem;
}

.prep-time li {
	font-size: 0.95rem;
	line-height: 1.5;
	margin-bottom: 0.5rem;
}

.ingredients h2,
.instructions h2,
.nutrition h2 {
	font-family: "Young Serif", serif;
	font-size: 1.5rem;
	color: var(--brown-800);
	margin-bottom: 1rem;
}

.ingredients ul {
	padding-left: 1.25rem;
	list-style-type: disc;
	margin-bottom: 2rem;
}

.ingredients li {
	font-size: 0.95rem;
	line-height: 1.5;
	margin-bottom: 0.5rem;
}

hr {
	border: 1px solid var(--stone-150);
	margin: 2rem 0;
}

.instructions ol {
	padding-left: 1.5rem;
	margin-bottom: 2rem;
}

.instructions li {
	font-size: 0.95rem;
	line-height: 1.6;
	margin-bottom: 1rem;
}

.instructions li span {
	font-weight: bold;
}

.nutrition p {
	font-size: 0.95rem;
	line-height: 1.6;
	margin-bottom: 1rem;
}

.nutrition table {
	width: 100%;
	border-collapse: collapse;
}

.nutrition table td {
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--stone-150);
	font-size: 0.95rem;
}

.nutrition table td span {
	font-weight: bold;
	color: var(--rose-800);
}