:root {
	--color-white: hsl(0, 0%, 100%);
	--color-stone-100: hsl(30, 54%, 90%);
	--color-stone-150: hsl(30, 18%, 87%);
	--color-stone-600: hsl(30, 10%, 34%);
	--color-stone-900: hsl(24, 5%, 18%);
	--color-brown: hsl(14, 45%, 36%);
	--color-rose-light: hsl(330, 100%, 98%);
	--color-rose-dark: hsl(332, 51%, 32%);

	--font-family-title: "Young Serif";
	--font-family-body: "Outfit";
	--font-weight-normal: 400;
	--font-weight-medium: 600;
	--font-weight-bold: 700;
	--font-size-body: 1rem;
	--font-size-section-title: 1.6rem;
	--font-size-header: 2rem;
}

@font-face {
	font-family: "Young Serif";
	src: url(./fonts/Young_Serif/YoungSerif-Regular.ttf);
	font-weight: var(--font-weight-normal);
}

@font-face {
	font-family: "Outfit";
	src: url(./fonts/Outfit/Outfit-VariableFont_wght.ttf);
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	background-color: var(--color-stone-100);
}

p,
li {
	line-height: 1.5rem;
}

article {
	font-size: var(--font-size-body);
	font-family: var(--font-family-body);
	width: 400px;
	margin: 0 auto;
	padding-block-end: 1rem;
	background-color: var(--color-white);
}

section {
	margin-inline: 1.5rem;
	margin-block: 1.6rem;
	color: var(--color-stone-600);
}

section:not(.preparation-time-section) {
	h4 {
		font-size: var(--font-size-section-title);
		font-family: var(--font-family-title);
		font-weight: var(--font-weight-normal);
		color: var(--color-brown);
		padding-bottom: 1rem;
	}
}

.recipe-image {
	max-width: 100%;
}

header {
	margin-inline: 1.8rem;

	h3 {
		margin: 0 auto;
		padding-block-start: 1.5rem;
		font-family: var(--font-family-title);
		font-size: 2.25rem;
		font-weight: var(--font-weight-normal);
		color: var(--color-stone-900);
	}

	p {
		padding-top: 1rem;
		color: var(--color-stone-600);
	}
}

ul,
ol {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-left: 0.25rem;
	list-style: none;
	counter-reset: item;

	/*? For granular control over the bullet points spacing */
	li::before {
		content: "•";
		margin-right: 1.5rem;
		color: var(--color-brown);
	}

	span {
		font-weight: var(--font-weight-bold);
	}
}

.preparation-time-section {
	padding: 1.4rem;
	border-radius: 8px;
	background-color: var(--color-rose-light);

	h4 {
		padding-block-end: 1rem;
		font-size: 1.25rem;
		font-weight: var(--font-weight-medium);
		color: var(--color-rose-dark);
	}

	li::before {
		color: var(--color-rose-dark);
	}
}

.ingredients-section {
	/*? To vertically center the <li> bullets with the text */
	li {
		display: flex;
		align-items: center;
	}
}

.instructions-section {
	/*? To have numbers as <li> marker */
	li::before {
		counter-increment: item;
		content: counter(item) ".";
		margin-right: 1rem;
		font-weight: var(--font-weight-bold);
		color: var(--color-brown);
	}
}

.nutrition-section p {
	margin-block-end: 1.25rem;
}

dl {
	.nutrition-section__row {
		display: flex;
		justify-content: space-between;
		width: 200px;
		margin-left: 2rem;
	}

	dd {
		font-weight: var(--font-weight-bold);
		color: var(--color-brown);
	}
}

hr {
	opacity: 0.2;
	color: var(--color-stone-150);
}

hr:not(.nutrition-section__separator) {
	margin-inline: 1.5rem;
}

.nutrition-section__separator {
	margin-block: 0.75rem;
}

@media (min-width: 1200px) {
	.recipe-image {
		border-radius: 10px;
	}

	header {
		margin: 0;
		margin-block-end: 2rem;
	}

	article {
		padding: 2rem;
		width: 800px;

		section {
			margin-inline: 0;
		}
	}

	dl .nutrition-section__row {
		width: 400px;
	}

	hr:not(.nutrition-section__separator) {
		margin-inline: 0;
	}
}