:root {
	--white: hsl(0, 0%, 100%);
	--Stone100: hsl(30, 54%, 90%);
	--Stone150: hsl(30, 18%, 87%);
	--Stone600: hsl(30, 10%, 34%);
	--Stone900: hsl(24, 5%, 18%);
	--Brown800: hsl(14, 45%, 36%);
	--Rose800: hsl(332, 51%, 32%);
	--Rose50: hsl(330, 100%, 98%);
}

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

@font-face {
	font-family: "young-serif";
	src: url("assets/fonts/young-serif/YoungSerif-Regular.ttf");
	font-weight: 400;
}

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

body {
	background: var(--Stone100);
}

h1,
h2 {
	font-family: "young-serif", serif;
	font-weight: normal;
}

h2 {
	color: var(--Brown800);
	font-size: 1.9rem;
}

p {
	font-family: "outfit", sans-serif;
	font-size: 1rem;
	color: var(--Stone600);
}

li p {
	margin-inline-start: 0.625rem;
}

ul {
	margin-inline-start: 1.25rem;
	margin-top: 1.25rem;
}

ul li {
	line-height: 2;
}

ul li::marker {
	color: var(--Brown800);
}

.container {
	max-width: 48rem;
	margin: auto;
	padding: 2.5rem 1.25rem 2.5rem;
	background: var(--white);
}

/* banner section */
.banner {
	max-width: 48rem;
	margin: auto;
	overflow: hidden;
}

.banner img {
	width: 100%;
}

.banner-mobile img {
	transform: scale(1.05);
}

.banner-desktop {
	display: none;
}

/* intro section */
#intro h1 {
	font-size: 1.75rem;
	margin-top: 0;
	color: var(--Stone900);
}

#intro>p {
	margin-top: 1.25rem;
	color: var(--Stone900);
}

#intro #preparation-time {
	margin-top: 1.875rem;
	padding: 1.25rem;
	border-radius: 1rem;
	background: var(--Rose50);
}

#preparation-time h2 {
	font-family: "outfit", sans-serif;
	font-weight: bold;
	font-size: 1.25rem;
	color: var(--Rose800);
}

#preparation-time ul {
	margin-top: 0.625rem;
}

#preparation-time ul li::marker {
	color: var(--Rose800);
}

/* ingredients and instructions section */
#ingredients,
#instructions {
	padding: 1.25rem 0rem;
	border-bottom: 0.0625rem solid var(--Stone150);
}

/* instructions section */
#instructions ol {
	margin-inline-start: 1.25rem;
	margin-top: 1.25rem;
}

#instructions ol li {
	margin-top: 0.625rem;
}

#instructions ol li::marker {
	font-weight: bold;
	font-size: 1.125rem;
	font-family: "outfit", sans-serif;
	color: var(--Brown800);
}

#instructions ol li p {
	line-height: 1.5;
}

/* nutrition section */
#nutrition {
	padding-top: 1.25rem;
}

#nutrition>p.subtitle {
	margin-top: 1.25rem;
}

#nutrition table {
	margin-top: 1.25rem;
	width: 100%;
}

#nutrition table tr {
	display: grid;
	grid-template-columns: 50% 50%;
	border-bottom: 0.0625rem solid var(--Stone150);
}

#nutrition table tr:last-child {
	border: none;
}

#nutrition table tr td {
	text-align: left;
	padding: 1rem 1.25rem;
}

#nutrition table tr:last-child td {
	padding-bottom: 0.3125rem;
}

#nutrition table tr td b {
	color: var(--Brown800);
}

/* responsive codes */
@media (min-width: 50rem) {
	.container {
		margin: 6.25rem auto;
		padding: 2.5rem;
		border-radius: 1.25rem;
	}

	.banner img {
		border-radius: 1rem;
	}

	.banner-mobile {
		display: none;
	}

	.banner-desktop {
		display: block;
	}

	#intro h1 {
		font-size: 2.5rem;
		margin-top: 1.25rem;
	}
}