@import url('https://fonts.googleapis.com/css2?family=Young+Serif');
@import url('https://fonts.googleapis.com/css2?family=Outfit');

: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%);

--fsize-paragraph: 16px;

--yffamily: 'Young Serif',san-serif;

--offamily: 'Outfit',san-serif;

--fweight400: 400;
--fweight600: 600;
--fweight700: 700;
}

body{
	background-color: var(--Stone100);
	padding: 7.7rem;
	
}
main{
	background-color: var(--White);
	border-radius: 20px;
	width: 40rem;
	padding: 2.5rem;
	
	
}
body, main{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	
}
img{
	width: 100%;
	border-radius: 10px;
	

}
h1{
	font-size: 38px;
}
h1, h2{
	font-family: var(--yffamily);
	font-weight: var(--fweight400);
}
p{
	color: var(--Stone600);
	font-size: var(--fsize-paragraph)
}
p, ol, ul, li, table, td, tr{
	font-family: var(--offamily);
	font-size: var(--fsize-paragraph);
}
.prep_list{
	background-color: var(--Rose50);
	padding: 10px 30px;
	line-height: 30px;
}
.prep_list h3{
	font-family: var(--offamily);
	color: var(--Rose800);
	font-weight: var(--fweight600);
	font-size: 19px;
}
li::marker{
	color: var(--Rose800);
	font-weight: var(--fweight600);
}
h2{
	color: var(--Brown800)
}
.ingredients{
	width: 100%;
}
h2{
	font-size: 28px;
}
hr{
	width: 100%;
	color: var(--Stone150)
}
.instructions, .ingredients{
	line-height: 1.6rem;
}
td {
    border-bottom: 1px solid var(--Stone150);
	padding: 1rem 15rem 1rem 1rem;
  }
  tr:last-child td {
    border-bottom: none;
  }
tr td:nth-child(2){
	color: var(--Rose800);
	font-weight: var(--fweight600);
}

/*Optimizing for mobile*/
@media screen and (max-width: 375px) {
	body{
		padding: 0;
		width: 100%;
	}
	main{
		width: 100%;
		border-radius: 0;
		padding: 0;

	}
	img {
		border-radius: 0;
		width: 100%;
		
	}
	h1{
		font-size: 30px;
	}
	p, li, td{
		font-size: 13px;
	}
	section{
		width: 100%;
		padding: 1rem;
		box-sizing: border-box;
	}
	.nutrition_table{
		width: 100%;
	}
	.nutrition td {
		padding: 0 1rem 1rem 1rem;
	}
}