@font-face {
    font-family: "outfit";
    src: url('./assets/fonts/outfit/Outfit-VariableFont_wght.ttf') format("truetype");

}
/* adding another font */
@font-face {
    font-family: "young-Serif";
    src: url('./assets/fonts/young-serif/YoungSerif-Regular.ttf') format("truetype");
}
: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%);
--outfit: 'outfit', sans-serif;
--young-Serif: 'young-Serif', serif;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--outfit);
}
main{
    height: 250vh;
    background-color: var(--Stone-150);
    position: relative;
}
main .container{
    position: absolute;
    background-color: var(--White);
    max-width: 40%;
    padding:35px;
    border-radius: 15px;;
   transform: translate(-50%,-50%);
   top:50%;
   left:50%;
    height: fit-content;
}
/* IMAGE SECTION */
main .container section.recipe-image{
    width: 100%;
    margin-bottom: 15px;
}
img{
    width: 100%;
    object-fit: fill;
    border-radius:15px
}
h1,h2{
    font-family: var(--young-Serif);
    font-size: 2.5rem;
    font-weight: 500;
}
h2{
    font-size: 1.8rem;
    color: var(--Brown-800);
    margin: 15px 0px;
}
/* INTRODUCTION SECTION */
main .container section.introduction{
    position: relative;
    padding-bottom: 20px;
}
main .container section.introduction > *{
    margin-bottom: 15px;
}
main .container section.introduction .preparation{
    padding: 15px;
    background-color: var(--Rose-50);

}
main .container section.introduction .preparation h3{
   color:var(--Rose-800);
}
main .container section.introduction .preparation ul, .ingrediatns ul{
    margin: 15px;
}
main .container section.introduction .preparation ul li{
    margin-left: 10px;
    margin-bottom: 10px;
}
.ingrediatns ul li{
    list-style-position: outside;
    padding-left: 20px;
    margin-bottom: 10px;

}
main .container section.introduction .preparation ul li span{
font-weight: 700;
padding-left: 0px 0px 20px 10px;
}
main .container section.introduction::after {
position: absolute;
width: 95%;
height: 1px;
background-color: rgba(0, 0, 0, 0.267);
bottom: 0;
right: 50%;
transform: translateX(50%);
content:''
}

/* INSTRCUTIONS */
main .container section.instructions{
    position: relative;
    padding-bottom: 20px;
}
main .container section.instructions::after {
position: absolute;
width: 98%;
height: 1px;
background-color: rgba(0, 0, 0, 0.267);
bottom: 0;
right: 50%;
transform: translateX(50%);
content:''
}
main .container section.instructions ol{
    margin-left: 20px;
}
main .container section.instructions ol li {
list-style-position: outside;

padding-left: 20px;
margin-bottom: 10px;
}
main .container section.instructions ol li::marker{
    color: var(--Rose-800);
    font-weight: 700;
}
main .container section.instructions ol li span{
    font-weight: 600;
}

/* NUTRITION SECTION */
main .container section.nutrition{
    padding: 15px;

}
main .container section.nutrition table{
    width: 100%;
    margin-top: 15px;
    margin-left: 20px;
    padding: 10px;
    border-collapse:collapse;
    border-spacing: 0 10px;
}
main .container section.nutrition table tr, td{
    border-bottom: 1px solid rgba(0, 0, 0, 0.267);
    padding: 10px 0px;
}
main .container section.nutrition table tr td:last-child{
    color: var(--Brown-800);
    font-weight: 600;
}

/* handeling mobile view */
@media (max-width: 375px) {
    body{
        font-size: 8px;
        height: auto;
    }
    main{
        min-height: fit-content;
    }
    main .container{
        width: 100%;
        height: fit-content;

    }

}
@media (max-width: 582px) {
    body{
        font-size: 14px;
        height: fit-content;
    }
    main{
       height: fit-content;
        position: relative;
    }
    main .container{
        position: static;
        transform: none;
        max-width: 100%;
        height: fit-content;
                padding: 0px 15px 15px 15px;
        border-radius: 0px;
    }
        main .container section.recipe-image{
    width: 100%;
    margin-bottom: 15px;
    
}
img{
    width: 100%;
    object-fit: fill;
    border-radius:0px
}
}