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

: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%);
}

body {
    font-size: 16px;
    background-color: var(--Rose-50);
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 100px;
}

p,
li,
td,
th {
    font-family: "Outfit", Arial;
    color: var(--Stone-600);
    font-size: 14px;
}

h1,
h3 {
    font-family: "Young Serif", Arial;
    font-weight: 400;
    margin-bottom: 1rem;
}

h3 {
    color: var(--Brown-800);
}

span {
    color: var(--Stone-900);
    font-weight: 600;
}

.recipe-page_container {
    background-color: var(--White);
    padding: 2rem;
    width: 650px;
    border-radius: 2rem;
}

/* .container{
    max-width: 90%;
    margin: auto;
} */

.recipe_img {
    width: 100%;
}

.recipe_img img {
    width: 100%;
    border-radius: calc(2rem - 1rem);
    object-fit: cover;
}

#heading,
#time,
#ingredients,
#instructions,
#nutrition {
    margin-block: 2rem;
}

.recipe_instructions,
.recipe_ingredients {
    border-bottom: 1px solid var(--Stone-150);
    padding-bottom: 2rem;
}

.recipe-page_heading h1 {
    font-size: 2.1rem;
    margin-bottom: 1rem;
    text-transform: capitalize;
}

/* .recipe-page_heading .recipe-page_heading_text{
    font-size: 14px;
} */

#time .preparation_time {
    background-color: var(--Rose-50);
    padding: 1.5rem;
    border-radius: 10px;
}

.preparation_time .preparation_time_text {
    font-size: 18px;
    font-weight: 600;
    color: var(--Rose-800);
    margin-bottom: 1rem;
}

.preparation_time_list::marker {
    color: var(--Rose-800);
}

.preparation_time_list,
.recipe_ingredients li {
    /* font-size: 14px; */
    margin: 10px 0px 0px -15px;
    padding-left: 15px;
}

.recipe_ingredients li::marker,
#instructions .preparation_time_list::marker {
    color: var(--Brown-800);
}

.recipe_nutrition p {
    margin-bottom: 1rem;
}

table {
    width: 100%;
    /* padding-left: 25px; */
}

th,
td {
    border-bottom: 1px solid var(--Stone-100);
    padding-block: .5rem;
}

td {
    padding-left: 25px;
    width: 50%;
}

th {
    text-align: start;
    color: var(--Brown-800);
}

@media(max-width: 600px) {
    body {
        padding: 0;
    }

    .recipe-page_heading h1 {
        font-size: 1.5rem;
    }

    .recipe-page_container {
        background-color: var(--White);
        width: 100%;
        padding: 0;
        border-radius: 0;
    }

    .recipe_img {
        width: 100%;
    }

    .recipe_img img {
        width: 100%;
        border-radius: 0;
    }

    .container{
        max-width: 85%;
        margin: auto;
    }
}