body {
    background-color: hsl(30, 54%, 90%);
    font-family: 'young serif'
}

h1 {
    padding-left: 5%;
}

h2 {
    color: hsl(14, 45%, 36%);
    font-size: 24px;
}

p {
    padding-left: 4%;
    color: hsl(24, 5%, 18%);
    font-size: 13px;
}

img {
    margin-top: 30px;
    width: 87%;
    min-width: 40%;
    padding-left: 4%;
    padding-right: 5%;
    position: relative;
    left: 2.4%;
    border-radius: 8%;
}

.div1 {
    border: solid 1px white;
    margin: 90px 30% 80px 30%;
    background-color: white;
    border-radius: 14px
}

.div2 {
    background-color: hsl(330, 100%, 98%);
    margin: 10px 30px 15px 30px;
    border-radius: 7px;
    padding-bottom: 2px;
}

span {
    font-weight: bold;
}

ul {
    line-height: 27px;
}

.h2-1 {
    position: relative;
    left: 17px;
    top: 7px;
    color: hsl(332, 51%, 32%);
}

.h2-2 {
    position: relative;
    left: 29px
}

.ingrediants {
    border-bottom: 1px solid hsl(30, 18%, 87%);
    padding-bottom: 20px;
    position: relative;
    top: -7px;
    color: hsl(24, 5%, 18%)
}

.h2-3 {
    position: relative;
    left: 29px;
}

ol {
    line-height: 26px;
    border-bottom: 1px solid hsl(30, 18%, 87%);
    padding-bottom: 20px;
    color: hsl(24, 5%, 18%)
    
}

ol li::marker {
    color: hsl(14, 45%, 36%);
    font-size: 16px;
    font-weight: bold;
}

.li1, .li2, .li3, .li4, .li5 {
    padding-bottom: 8px;
}

table {
    width: 100%;
    table-layout:auto
}

.th1, .th3, .th5, .th7 {
    position: relative;
    text-align: left;
    padding-left: 55px;
    color: hsl(24, 5%, 18%);
}

.th2, .th4, .th6, .th8 {
    position: relative;
    padding-right: 300px;
    color: hsl(14, 45%, 36%);
}

.th1, .th2, .th3, .th4, .th5, .th6, .th7, .th8 {
    position: relative;
    border-bottom: 1px solid hsl(30, 18%, 87%);
    left: 1px;
    line-height: 35px;
}

.nutrition {
    position: relative;
    left: 29px;
}

@media (max-width: 375px) {
    .div1 {
        width: 100%;
        margin-left: -5px;
        margin-top: -9px;
        margin-bottom: -1px;
        padding-left: 10px;
        overflow: hidden;
    }
}

@media (max-width: 375px) {
    img {
        width: 108%;
        position: relative;
        left: -10%;
        bottom: 30px;
        border-radius: 0px;
    }
}

@media (max-width: 375px) {
    .th2, .th4, .th6, .th8 {
        padding-left: 55px;
    }
}

@media (max-width: 375px) {
    .th1, .th3, .th5, .th7 {
        padding-left: 33px
    }
}