@font-face{
  font-family: "Outfit";
  src: url("assets/fonts/outfit/Outfit-VariableFont_wght.ttf");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Young Serif";
  src: url("assets/fonts/young-serif/YoungSerif-Regular.ttf");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root{
--primaryFont:"Outfit", sans-serif;
--secondaryFont:"Young Serif", serif;

--whiteColor: hsl(0, 0%, 100%);
--stoneColor100: hsl(30, 54%, 90%);
--stoneColor150: hsl(30, 18%, 87%);
--stoneColor600: hsl(30, 10%, 34%);
--stoneColor900: hsl(24, 5%, 18%);
--brownColor800: hsl(14, 45%, 36%);
--roseColor800: hsl(332, 51%, 32%);
--roseColor50: hsl(330, 100%, 98%);
}
*,*::after,*::before{
  margin: 0;
  padding:0;
  box-sizing: border-box;
}
body{
  background-color: var(--stoneColor100);
  font-family: var(--primaryFont);
  font-size: 1rem;
  padding:2rem 5rem;
  display: flex;
  justify-content: center;  
  }
img{
  max-width: 100%;
  height:auto;
}
.container{
  width:50rem;
  height:auto; 
  background-color: var(--whiteColor);
  border-radius: 1.25rem;
  padding: 2.5rem 2.5rem 1.5rem;
}
.recipe_image{
  border-radius: .75rem;
  margin-bottom: 1.75rem;
}
.content h1{
  color: var(--stoneColor900);
  font-family: var(--secondaryFont);
  font-size: 2rem;
  font-weight: 400;
  margin-bottom: 1.75rem;
}
.content p{
  color: var(--stoneColor600);
  font-weight: 400;
  margin-bottom: 1.75rem;
}
.content .time{
  background-color: var(--roseColor50);
  border-radius: .625rem;
  padding:1.25rem;  
  margin-bottom: 1.75rem;
}
.content .time h2{ 
  color: var(--roseColor800);
  font-weight: 600;
  margin-bottom: 1.25rem;
  
}  
.content .time ul{
  color: var(--stoneColor600);
  text-indent: 1rem; 
  padding-left: 1.5rem;  
}
.content .time ul li {
  margin-bottom: .625rem;
}
.content .time ul li span{
  font-weight: bold;
}
.ingredients h2,
.instructions h2, 
.nutrition h2{
  color: var(--brownColor800);
  font-family: var(--secondaryFont);
  font-size: 2rem;
  font-weight: 400;
  margin-bottom: 1.25rem;
}
.ingredients ul{
  color: var(--stoneColor600);  
  line-height: 1.75rem;
  border-bottom: 1px solid var(--stoneColor150);
  padding-bottom: 1.75rem; 
  padding-left: 1.5rem; 
  margin-bottom: 1.75rem;
  text-indent: 1rem;
}
.instructions ol{
  color: var(--stoneColor600);
  padding-left: 1.5em;
  border-bottom: 1px solid var(--stoneColor150);
  padding-bottom: 1.75rem;
  margin-bottom: 1.75rem; 
}
.instructions ol li{
  margin-bottom: .625rem;
  line-height: 1.5em;
  padding-left: 1em;
}
.instructions ol li span{
  font-weight: bold; 
}
.custom_list li::marker{
  color: var(--brownColor800);
  font-weight: bold;     
}
 
table{
width: 100%;
border-collapse: collapse;
}
tr{
  border-bottom: 1px solid var(--stoneColor150);  
}
tr:last-child{
  border-bottom: none;
}
td{  
  padding: 1em;
}
td:first-child{
  color: var(--stoneColor600);
}
td:last-child{
  color: var(--brownColor800);
  font-weight: bold;
}

@media only screen and (max-width:37.5rem){
  body{
  font-size: 1rem;
  padding:0;
}
.container{
  border-radius: 0;
  padding: 0rem;
}
.content{  
  padding: 1.25rem;
    
}
.recipe_image{
  border-radius: 0;
  margin-bottom: 0;
}
}