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

:root {
    /* Font familes */
    --heading-font: 'Young Serif', serif;
    --subheading-font: 'Outfit', sans-serif;

    /* Font colors */
    --main-heading-font-color: hsl(330, 2.86%, 13.73%);
    --heading-font-color: hsl(14, 45%, 36%);
    --subheading-font-color: hsl(332, 51%, 32%);
    --items-font-color: hsl(30, 10%, 34%);

    /* Font sizes */
    --main-heading-font-size: 24px;
    --p-font-size: clamp(16px, 2.5vw, 18px);

    /* Background colors */
    --bg-color: hsla(332, 54%, 93%, 0.349);
}

ul {
    color: var(--items-font-color);
    margin-left: 35px;
    font-family: var(--subheading-font);
}

hr {
    width: 100%;
    margin-top: 5vh;
    background-color: #030303;
    height: 1px;
}
body {
    background-color: hsl(30, 54%, 90%);
}

article {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

section {
    width: 100%;
}

.page-wrapper {
    background-color: #fff;
}

.recipe-img {
    display: flex;
    justify-content: center;
}

.recipe-img img {
    max-width: 100%;
    height: auto;
}

.page-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    padding: 20px;
}

header {
    display: flex;
    flex-direction: column;
    gap: 15px;
    /* align-items: center; */
}

header h1 {
    font-family: var(--heading-font);
    font-size: var(--main-heading-font-size);
    font-weight: 500;
    font-size: clamp(1.5rem, 2.5vw, 3rem);
}

header p {
    font-family: var(--subheading-font);
    color: var(--items-font-color);
}

.prep-header h3 {
    margin-bottom: 2vh;
    margin-left: 10px;
    font-family: var(--subheading-font);
    font-size: 20px;
    color: var(--subheading-font-color);
}

.prep-details {
    font-size: var(--p-font-size);
    display: grid;
    gap: 5px;
    margin-left: 35px;
    color: var(--items-font-color);
    font-family: var(--subheading-font);
}
.prep-details span {
    font-weight: 600;
}

.ing-list {
    font-size: var(--p-font-size);
    display: grid;
    gap: 10px;
}

.ins-list {
    font-size: var(--p-font-size);
    list-style: decimal;
    display: grid;
    gap: 10px;
}

.section-header h2 {
    padding-bottom: 2.5vh;
    color: var(--heading-font-color);
    font-family: var(--heading-font);
    font-weight: 500;
}

.section-header p {
    font-size: var(--p-font-size);
    margin-bottom: 3vh;
    font-family: var(--subheading-font);
}

.nutrition-list {
    font-size: var(--p-font-size);
    display: flex;
    justify-content: space-evenly;
}

.nutrition-list ul {
    margin-right: 60px;
    list-style: none;
}

.calories {
    font-weight: 600;
    color: var(--subheading-font-color);
}

.attribution {
    text-align: center;
    font-family: var(--subheading-font);
}

@media (min-width: 725px) {
    .page-wrapper {
        max-width: 45em;
        border-radius: 16px;
        padding: 1.75rem;
        margin: 4vh auto;
    }
    .recipe-img {
        display: flex;
        justify-content: center;
        padding: 10px;
    }
    .recipe-img img {
        max-width: 100%;
        height: auto;
        border-radius: 20px;
    }
    .page-content {
        padding: 10px;
    }
    .prep-time {
        padding: 20px 0;
        border-radius: 10px;
        background-color: var(--bg-color);
    }
}