@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Young+Serif&display=swap');

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

body{
    background:hsl(30, 54%, 90%);
    width: 100%;
    /* height: 1500px; */
}
.box1{
    width: 44%;
    height: 1400px;
    background: white;
    position: relative;
    padding: 1%;
    margin: 80px 30%;
    border-radius: 10px;
    display: block;
    justify-content: center;
}

.box1 img{
    width: 100%;
    height: 180px;
    position: relative;
    margin: 0;
    border-radius: 10px;
}
.box1 h2{
    margin-top: 10px;
    margin-bottom: 10px;
    font-family: 'Young Serif', serif;
}
.box1 p{
    margin-bottom: 15px;
    font-size: 16px;
    font-family: 'Outfit', sans-serif;
}

.box2{
    width: 100%;
    position: relative;
    border-radius: 10px;
    background: hsl(330, 100%, 98%);
    padding: 3% 0;
}
.box22{
    width: 100%;
    position: relative;
    border-radius: 10px;
}
.box2 h3{
    color: hsl(332, 51%, 32%);
    margin-bottom: 5px;
    left: o;
    margin-left: 5%;
    font-family: 'Outfit', sans-serif;
}
.box2 ul li{
    margin-left: 8%;
    margin-bottom: 10px;
    font-family: 'Outfit', sans-serif;
}
.box2 ul li::marker{
    color: hsl(332, 51%, 32%);
}
/* .box22 ul::before{
    content: "\2022";
    color: red;
} */
.Ingredients{
    width: 100%;
    background: white;
    /* position: relative; */
    margin-bottom: 20px;
    margin-top: 20px;
    border-bottom: 1px solid rgb(199, 190, 190);
    padding-bottom: 12px;
}
.Ingredients h2{
    margin-left: 0.5%;
    color: hsl(332, 51%, 32%);
    font-family: 'Young Serif', serif;
}
.Ingredients ul {
    margin-left: 3.5%;
}
.Ingredients ul li{
    margin-bottom: 10px;
    font-size: 16px;
    font-family: 'Outfit', sans-serif;
}
.Ingredients ul li::marker{
    color: hsl(332, 51%, 32%);
}
.Instructions{
    border-bottom: 1px solid rgb(199, 190, 190);
    padding-bottom: 20px;
    margin-bottom: 10px;
}
.Instructions h2{
    margin-left: 0.5%;
    color: hsl(332, 51%, 32%);
    margin-bottom: 20px;
    font-family: 'Young Serif', serif;    
}
.Instructions ol {
    margin-left: 3.5%;
}
.Instructions ol li {
    margin-bottom: 10px;
    font-size: 16px;
    font-family: 'Outfit', sans-serif;
}
.Instructions ol li::marker{
    color: hsl(332, 51%, 32%);
}
.Nutrition{
    margin-top: 40px;
    margin-bottom: 20px;
}
.Nutrition h2{
    font-family: 'Young Serif', serif;   
    color: hsl(332, 51%, 32%); 
}
.Nutrition p{
    font-family: 'Outfit', sans-serif;
}

.table{
    border-bottom: 1px solid rgb(199, 190, 190);
    display: flex;
    gap: 245px;
    margin-bottom: 10px;
    padding-top: 10px;
}
#nutrients{
    font-family: 'Outfit', sans-serif;
    padding-left: 32px;
}
#quant{
    color: hsl(332, 51%, 32%);
    font-family: 'Outfit', sans-serif;

}
.table2{
    border-bottom: 1px solid rgb(199, 190, 190);
    display: flex;
    gap: 260px;
    margin-bottom: 10px;
    padding-top: 10px;
}
.table3{
    border-bottom: 1px solid rgb(199, 190, 190);
    display: flex;
    gap: 252px;
    margin-bottom: 10px;
    padding-top: 10px;
}
.table4{
    display: flex;
    gap: 280px;
    margin-bottom: 10px;
    padding-top: 10px;
}



@media (max-width: 500px ){
    body{
        background: white;
    }
    .box1{
        width: 100%;
        margin: 0 0%;
        padding: 0;
        height: 2000px;
    }
    .box1 h2{
        margin-left: 23px;
        font-size: 30px;
        margin-top: 20px;
    }
    .box1 p{
        margin-left: 23px;
        margin-right: 12px;
        margin-top: 20px;
        font-size: 16.5px;
    }
    .box2{
        margin-left: 0px;
        margin-top: 20px;
        margin-right: 100px;
        padding: 15px 0px 15px 15px;  
        background: hsl(330, 100%, 98%);
    }
    .box22{
        margin-left: 0px;
        margin-right: 10px;
        padding: 15px 10px 15px 15px;
        background: white;
    }
    .box2 h3{
        color: hsl(332, 51%, 32%);
        margin: 10px 0 15px 0% ;
    }
    .box2 ul li{
        font-size: 15px;
        /* margin-left: 8%; */
        margin-right: 100px;
        margin-bottom: 10px;
        font-family: 'Outfit', sans-serif;
    }
    .box1 img{
        border-radius: none;
    }   
    .Ingredients{
        width: 310px;
        margin-left: 20px;
    } 
    .Ingredients h2{
      margin-left: 1px;  
    }
    .Ingredients ul{
        margin-left: 19px;
    }
    .Instructions{
        width: 320px;
        margin-left: 20px;
    }
    .Instructions h2{
        margin-left: 3.5px;
    }
    .Instructions ol{
        margin-right: 25px;
    }
    .Instructions ol li{
        margin-left: 10px;
    }
    .Nutrition p{
        margin-right: 20px;
        margin-bottom: 0px;
    }
    .table{
       gap:40px;
       margin: 0px 24px 0 24px;
    }  
    #nutrients{
        margin-left: 4px;
    }   
    .table2{
        gap:55px;
       margin: 0px 24px 0 24px;
    }
    .table3{
        gap: 45px;
       margin: 0px 24px 0 24px;
    }
    .table4{
        gap: 70px;
       margin: 0px 24px 0 24px;
       margin-bottom: 30px;
    }
}