@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Outfit:wght@100..900&family=Young+Serif&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Young+Serif&display=swap');
:root{
    --White: hsl(0, 0%, 100%);
    --Stone-100: hsl(30, 54%, 90%);
    --Stone-150: hsl(30, 18%, 87%);
    --Stone-600: hsl(30, 10%, 34%);
    --Stone-900: hsl(24, 5%, 18%);
    --Brown-800: hsl(14, 45%, 36%);
    --Rose-800: hsl(332, 51%, 32%);
    --Rose-50: hsl(330, 100%, 98%);
}

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

body{
    min-width: 100wh;
    font-size: 16px;
    font-family: "Figtree", serif;

    /* font-weight: 400; */
    background-color: var(--Stone-100);
    color: var(--Stone-600);
    /* display: flex;
    align-items: center;
    justify-content: center; */
}

h1, h2{
    font-family: "Young Serif", serif;
    font-weight: 400;
}

h1{
    color: var(--Stone-900);
    font-size: 2.6rem;
    margin: 1rem;
}

h2{
    color: var(--Brown-800);
}

hr{
    color: var(--Stone-150);
    margin: 2rem;
}

span{
    font-weight: 700;
}

main{
    max-width: 800px;
    background-color: var(--White);
    margin: 150px auto;
    border-radius: 25px;
    padding: 2rem;
    
}

.header
{
    max-width: 100%;
    display: flex;
    flex-direction: column;
    
    margin-bottom: 1.5rem;
} 

img{
    max-width: 100%;
    display: block;
    border-radius: 20px;
    margin-bottom: 1rem;
}

.header_text{
    color: var(--Stone-600);
    font-weight: normal;
}

.prepration{
    
    padding: 1.5rem;
    background-color: var(--Rose-50);
    border-radius: 15px;
    margin-bottom: 2rem;
}

.prepration h3{
    color: var(--Rose-800);
    font-size: 1.1rem;
    margin-bottom: 1rem;
     

}

ul{
    margin-left: 1rem;
}

li{
    padding: 0.2rem;
    line-height: 1.7rem;
    
}

li::marker{
    color: var(--Rose-800);
}

li > span{
    margin-left: 1rem;
}

.ingredient{

    margin: 0.5rem;
    
}

.ingredient ul{
}

.ingredient h2{
    color: var(--Brown-800);
    margin-bottom: 1rem;
}

.ingredient ul li::marker{
    color: var(--Brown-800);
}

.ingredient ul li{
    list-style: square;

}

.ingredient ul li span{
    font-weight: normal;
}

.instruction{
   
    
}

    .instruction h2{
        margin-bottom: 1rem;
    }

.instruction ol{
    padding: 0rem 1rem;
}

.instruction ol li{
    padding-left: 1rem;
}
.instruction ol li > span{
    margin: 0;
}

.instruction ol li::marker{
    font-weight: 700;
}

.nutirition{
    width: 100%;
}

.nutirition h2, .nutirition_txt{
    margin-bottom: 1rem;
}

.items{
    display: flex;
    /* justify-content: space-between; */
    ;
    border-bottom: 1px solid var(--Stone-150);
    padding: 1rem;
}

.items:last-child{
    border: none;
}
.amount{
    font-weight: 700;
    color: var(--Brown-800);
}
.nutirition .items > *{
    width: 50%;
    /* >margin: 500 auto; */
}
  
@media (max-width: 560px){
   h1{
    margin-top: 2rem;
   }
    
   main > *:not(.header, hr) {
    padding: 1rem;
 } 
    .header p{
        padding: 1rem;
    }
   main{
   margin: 0;
   padding: 0;
   }

   img{
    width: 100%; 
  }
   .header img{
    padding: 0;
    margin: 0; 
    border-radius: 0;
   }

   .prepration{
    margin: 1rem;
   }

}