@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;1,600&family=Poppins:wght@300;400;600&display=swap");

body {
	background-color: #fdf8f0;
	color: #4a3b3f;
	font-family: "Poppins", sans-serif;
	font-weight: 300;
	line-height: 1.7;
	width: 90%;
	max-width: 950px;
	margin: 0 auto;
	padding: 50px 0;
}

header {
	text-align: center;
	margin-bottom: 40px;
}

.label {
	display: inline-block;
	background-color: #f4b6c2;
	color: #fff;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 3px;
	padding: 4px 14px;

	margin: 0;
}

h1 {
	font-family: "Playfair Display", serif;
	font-style: italic;
	font-size: 3rem;
	color: #c76b84;
	line-height: 1.1;
	margin: 15px 0 10px;
}

.info {
	color: #8a7378;
	font-size: 0.9rem;
	margin: 0 0 30px;
}

img {
	display: block;
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
	border-radius: 200px 200px 12px 12px;
	border: 4px solid #f4b6c2;
}


.recipe {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 25px;
	align-items: start;
}

.card {
	background-color: #fffaf2;
	border: 2px solid #f8d7de;
	border-radius: 14px;
	padding: 25px;
}

h2 {
	font-family: "Playfair Display", serif;
	font-size: 1.6rem;
	color: #c76b84;
	margin: 0 0 15px;
	padding-bottom: 8px;
	border-bottom: 2px dashed #f4b6c2;
}

h3 {
	font-family: "Playfair Display", serif;
	font-style: italic;
	font-size: 1.2rem;
	color: #b0546d;
	margin: 25px 0 10px;
}

ul {
	list-style: none;
	padding-left: 0;
}

ul li {
	padding: 6px 0;
	border-bottom: 1px solid #f8e3e7;
}

ul li::before {
	content: "♡ ";
	color: #e8909f;
}

ol {
	padding-left: 25px;
}

ol li {
	margin-bottom: 14px;
	padding-left: 5px;
}

ol li::marker {
	font-family: "Playfair Display", serif;
	font-weight: 600;
	color: #c76b84;
}

b {
	font-weight: 600;
}

.note {
	background-color: #fde4ea;
	padding: 12px 15px;
	border-radius: 6px;
	font-weight: 600;
	font-size: 0.9rem;
	margin-bottom: 0;
}

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

@media (max-width: 600px) {
	body {
		padding: 30px 0;
	}
	h1 {
		font-size: 2.1rem;
	}
	img {
		border-radius: 120px 120px 10px 10px;
	}
	.card {
		padding: 18px;
	}
	ol {
		padding-left: 20px;
	}
}