@font-face {
    font-family: 'Young Serif';
    src: url(assets/fonts/young-serif/YoungSerif-Regular.ttf) format(truetype);
    font-weight: 400;
}

@font-face {
    font-family: 'Outfit';
    src: url(assets/fonts/outfit/Outfit-VariableFont_wght.ttf) format(truetype);
    font-weight: 100 900;
}

:root {
    --font-title: 'Young Serif', sans-serif;
    --font-normal: 'Outfit', sans-serif;

    --color-white: hsl(0, 0%, 100%);
    --color-stone-100: Stone 100: hsl(30, 54%, 90%);
    --color-stone-150: hsl(30, 18%, 87%);
    --color-stone-600: hsl(30, 10%, 34%);
    --color-stone-900: hsl(24, 5%, 18%);
    --color-brown-800: hsl(14, 45%, 36%);
    --color-rose-800: hsl(332, 51%, 32%);
    --color-rose-50: hsl(330, 100%, 98%);

    --font-weight-normal: 400;
    --font-weight-subtitle: 600;
    --font-weight-title: 700; 

    --base-size: 1rem;
    --ratio: 1.25;

    --size-h4: calc(var(--base-size) * var(--ratio));
    --size-h3: calc(var(--size-h4) * var(--ratio));
    --size-h2: calc(var(--size-h3) * var(--ratio));
    --size-h1: calc(var(--size-h3) * var(--ratio));
}

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

.meal-image {
    width: 100%;
}

article {
    
    font-family: var(--font-normal);
    color: var(--color-stone-600);
    max-width: 700px;
    background-color: var(--color-white);
}

ul, ol {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    list-style: none;
    padding-left: 0.75rem;
}

ul li, ol li {
    display: grid;
    grid-template-columns: 2rem 1fr;
    align-items: center;
}

ol li {
    align-items: start;
}

ul li::before {
    content: "•";
    color: var(--color-brown-800);
    font-weight: bold;
}

ol {
    counter-reset: my-awesome-counter;
    list-style: none;
}
ol li::before {
    counter-increment: my-awesome-counter;
    content: counter(my-awesome-counter) ". ";
    color: var(--color-brown-800);
    font-weight: bold;
}

.introduction {
    margin: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.title {
    font-size: var(--size-h1);
    font-family: var(--font-title);
}

.preparation-time {
    margin: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
    background-color: var(--color-rose-50);
    border-radius: 12px;
}


.preparation-title {
    color: var(--color-rose-800);
}

.preparation-list {
    padding-left: 0.5rem;
}
.bold-text {
    color: var(--color-stone-600);
}

h2 {
    font-family: var(--font-title);
    font-size: var(--size-h1);
    color: var(--color-brown-800);
}

.ingredients {
    margin: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--color-stone-150);
}
 
.instructions {
    margin: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--color-stone-150);
}

.nutrition {
    margin: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

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

.nutrition-table tr {
    border: none;
} 

.nutrition table th,
.nutrition-table td {
    padding: 1rem 2rem;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--color-stone-150);
}

.nutrition-table tr:last-child th {
    border-bottom: none;
}

.nutrition-table tr:first-child th {
    border-top: none;
}

.nutrition-value {
    color: var(--color-brown-800);
}

.nutrition-name {
    font-weight: var(--font-normal);
}

@media screen and (min-width: 701px) {
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        background-color: rgb(241, 230, 218);
    }

    article {
        border-radius: 12px;
        margin-top: 80px;
        margin-bottom: 80px;
    }

    .image-container {
        padding-top: 2rem;
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .meal-image {
        border-radius: 12px;
    }
    .nutrition {
        padding-bottom: 1.5rem;
    }
}