@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Kumbh+Sans:wght@100..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=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Kumbh+Sans:wght@100..900&family=Outfit:wght@100..900&family=Young+Serif&display=swap');
: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%);
}
body{
    background-color: var(--stone100);
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.card{
    width : 23.4rem;
    height : 131.5rem; 
    background-color : var(--white);
    margin : 0;
    font-family : 'Outfit',sans-serif;
    font-size : 16px;
    font-weight : 400;
    color : var(--stone600);
}
img{
    width : 100%;
    height : 12rem;
    margin : 0;
}
.common{
    padding: 0 1.8rem;
} 
h1{
    margin :  1.65rem 0 1rem 0;
    font-size : 2.25rem;
    font-family : 'Young serif',sans-serif;
    color: var(--stone900);
}
.description{
    line-height : 1.5rem;
    margin : 1rem 0 2rem 0;
}
.preparation{
    background-color : var(--rose50);
    width : calc(100% - 4rem);
    height : 10rem;
    border-radius : 10px;
    padding: 0.75rem 1.5rem ;
}
#head3 {
    color : var(--rose800);
    font-size : 1.25rem;
    font-weight : 700;
    margin : 1rem 0;
}
.preparation ul{
    padding: 0 10px;
}
.preparation li{
    margin : 0.5rem;
    padding : 0 1.5rem;
}
.preparation li::marker{
    color: var(--rose800);
}
.preparation li p{
    display : inline;
    font-weight : 600;
}
h2{
    color: var(--brown800);
    font-family : 'Young serif',sans-serif;
    margin : 1.5rem 0;
    font-size : 1.75rem;
}
.ingredients ul{
    padding: 0 1rem;
}
.ingredients li{
    margin: 0.75rem;
    padding: 0 1rem;
}
.ingredients li::marker{
    color: var(--brown800);
}
hr{
    margin : 2rem 0;
    opacity: 0.2;
}
.Instructions ol{
    padding-left : 0.5rem;
}
.Instructions li::marker{
    color : var(--brown800);
    font-weight : 600;
}
.Instructions li{
    margin : 0.6rem 0 0.6rem 1rem;
    line-height : 1.5rem;
    padding-left : 1rem;
}
.Instructions li p{
    display : inline;
    font-weight : 600;
}
.nutrition{
    margin: 2rem 0;
}
.nutrition p{
    margin: 1rem 0;
}
.nutrients {
    display : inline-block;
    width : 48%;
    margin : 0 0 0 2rem;
}
.numbers{
    font-weight : 700;
    color : var(--brown800);
}
.nutrition hr{
    margin: 0.75rem 0;
}
@media (min-width:46.26rem) {
    .card{
    width : 41rem;
    height : 110rem; 
    margin : 7.5rem 0;
    border-radius : 2rem;
    padding : 0 2.5rem;
    }
    img{
        width : 41rem;
        height : 19rem;
        margin : 2.5rem 2.5rem 0 0;
        border-radius : 1rem;
    }
    .common{
        padding: 0;
    }
    h1{
        font-size : 2.5rem;
    }
    .preparation{
        padding : 1rem 2rem 0 2rem;
    }
    .nutrition p{
        margin: 1.35rem 0;
    }
}