@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);
}

:root {
	--clr-white: hsl(0, 0%, 100%);
	--clr-stone100: hsl(30, 54%, 90%);
	--clr-stone150: hsl(30, 18%, 87%);
	--clr-stone600: hsl(30, 10%, 34%);
	--clr-stone900: hsl(24, 5%, 18%);
	--clr-brown800: hsl(14, 45%, 36%);
	--clr-rose800: hsl(332, 51%, 32%);
	--clr-rose50: hsl(330, 100%, 98%);
	--clr-cream: hsl(29, 53%, 90%);
}

* {
	margin: 0;
	line-height: calc(1em+0.5rem);
}

body {
	font-family: "Outfit", "Young Serif";
	color: var(--clr-stone600);
}

img,
picture,
video,
canvas,
svg {
	display: block;
	user-select: none;
	max-width: 100%;
}

.wrapper {
	background-color: var(--clr-white);
	border-radius: 10px;
	margin-left: auto;
	margin-right: auto;
	max-width: 700px;
}

.container {
	/* outline: 1px solid red; */
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	/*max-width: 700px;*/ /*redundant as wrapper already have this property*/
}

.container--spacing {
	padding: 1.8rem;
}

.container--content {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.divider {
	border: none;
	border-top: 1px solid var(--clr-stone150);
}

/*BANNER SECTION*/
.banner__picture {
	/* outline:1px solid blue; */
	margin-inline: auto; /*this does seem to do anything*/
}

/*  INTRO SECTION */
.intro__title {
	font-family: "Young Serif";
	font-weight: 100;
	color: var(--clr-stone900);
}

.intro__description {
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
}

/*  PREPARATION SECTION  */
.preparation {
	/* outline:black 1px solid; */
	padding: 1.5rem;
	background-color: var(--clr-rose50);
}

.preparation__title {
	/* outline:black 1px solid; */
	color: var(--clr-rose800);
	margin-bottom: 1.5rem;
	font-size: 1.2rem;
}

.preparation__list {
	list-style: none;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.preparation__bullet {
	/* outline:purple 1px solid; */
	display: flex;
	gap: 1.5rem;
	align-items: center;
}

.preparation__bullet::before {
	/* outline:black 1px solid;  */
	content: "•";
	color: var(--clr-rose800);
	font-size: 1.5rem;
	margin-left: 0.5rem;
}

/* INGREDIENTS SECTION */
.ingredients__title {
	/* outline:black 1px solid; */
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
	color: var(--clr-brown800);
	font-family: "Young Serif";
	font-weight: 100;
}

.ingredients__details {
	margin-bottom: 1.5rem;
}

.ingredients__list {
	list-style: none;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.ingredients__bullet {
	display: flex;
	gap: 1.5rem;
	align-items: center;
}

.ingredients__bullet::before {
	/* outline:black 1px solid;  */
	content: "•";
	color: var(--clr-brown800);
	font-size: 1.5rem;
	margin-left: 0.5rem;
}

/* INSTRUCTIONS SECTION */
.instructions {
	margin-bottom: 1.5rem;
}

.instructions__title {
	/* outline:black 1px solid; */
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;

	color: var(--clr-brown800);
	font-family: "Young Serif";
	font-weight: 100;
}

.instructions__items {
	display: flex;
	gap: 1.5rem;
	margin-bottom: 1rem;
}

.instructions__number {
	color: var(--clr-brown800);
	font-weight: bold;
	margin-left: 0.5rem;
}

/* NUTRITION SECTION */
.nutrition__title {
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;

	color: var(--clr-brown800);
	font-family: "Young Serif";
	font-weight: 100;
}

.nutrition__description {
	margin-bottom: 1.5rem;
}

.nutrition__value {
	color: var(--clr-brown800);
	font-weight: bold;
}

.nutrition__item {
	/* outline:black 1px solid;    */
	display: flex;
	padding: 0.5rem;
}

.nutrition__item:not(:last-child) {
	border-bottom: 1px solid var(--clr-stone150);
}

.nutrition__name {
	/* outline:black 1px solid; */
	flex-grow: 1;
	flex-basis: 0;
	margin-left: 2rem;
}

.nutrition__value {
	/* outline:black 1px solid; */
	flex-grow: 1;
	flex-basis: 0;
}

/*md*/
@media (min-width: 700px) {

		body {
		background-color: var(--clr-cream);
	}

	.banner {
		margin-top: 2rem;
		padding-inline:1.8rem;
		padding-top: 2rem;
	}


	.banner__picture {
		border-radius: 10px;
	}

	.wrapper {
		border-radius: 25px;
		margin-bottom: 1rem;
	}

}