body{
    background-color:hsl(30, 54%, 90%);
    margin:0;
}

.card-container{
    width:500px;
    margin: 60px auto;
    background-color: white;
    border-radius: 30px;
    padding: 30px;
}

img{
    width: 100%;
    border-radius: 20px;
}

.prep-container{
    border-radius: 20px;
    padding: 10px;
    background-color: hsl(330, 100%, 98%);
}

.prep-container h3{
    margin-top: 0;
    color: hsl(14, 45%, 36%);
    font-weight: 800;
}

.prep-container ul{
    padding-left:20px;
    margin-bottom: 0;
}

.prep-container li{
    padding: 10px;
}

.prep-container ul li::marker{
    color: hsl(14, 45%, 36%);
}

.para1 h3{
    margin-top: 0;
    color: hsl(14, 45%, 36%);
    font-weight: 800;
}

.para1 ol li::marker{
    color: hsl(14, 45%, 36%);
}

.pre-ingred h3{
    color:hsl(14, 45%, 36%);
}

.pre-ingred ul li::marker{
    color: hsl(14, 45%, 36%);
    font-weight: 600;
}

table{
    width: 100%;
    border-collapse: collapse;
    
}

td{
    border-bottom: 2px solid hsl(30, 18%, 87%);
    padding: 20px 20px 20px 40px;
}

.nutri h3{
    color:hsl(14, 45%, 36%); 
}

.nutri .tableValue{
    color: hsl(14, 45%, 36%);
}

.no-border td{
    border-bottom: none;
}

.grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.grid div{
    border-bottom: 1px solid black;
    padding: 20px 20px 20px 40px;
}

.grid .no-border{
    border-bottom: transparent;
}
.wrapper{
    padding: 20px 20px 20px 20px;
}

@media screen and (max-width: 568px) {
    .card-container{
        margin: 0 auto;
        border-radius:0;
        padding:0;
        width: 100%;
    }
    img{
        border-radius: 0;
        display:block;
    }
    h1{
        margin-top: 0;
    }
}