@font-face {
    font-family: "Outfit";
    src: url(../assets/fonts/outfit/Outfit-VariableFont_wght.ttf);
}

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

:root {
    --clr-nutmeg: hsl(14, 45%, 36%);
    --clr-dark-raspberry: hsl(332, 51%, 32%);
    --clr-white: hsl(0, 0%, 100%);
    --clr-rose-white: hsl(330, 100%, 98%);
    --clr-eggshell: hsl(30, 54%, 90%);
    --clr-light-grey: hsl(30, 18%, 87%);
    --clr-wenge-brown: hsl(30, 10%, 34%);
    --clr-dark-charcoal: hsl(24, 5%, 18%);

    --ff-primary: "Outfit", sans-serif;
    --ff-secondary: "Young Serif", serif;

    --fw-400: 400;
    --fw-600: 600;
    --fw-700: 700;
}

body {
    background-color: var(--clr-white);
    font-family: var(--ff-primary);
    font-weight: var(--fw-400);
    font-size: 1rem;
    color: var(--clr-dark-charcoal);
}

/* Text styles */

.hero-title {
    font-family: var(--ff-secondary);
    font-size: 2rem;
    line-height: 1;
    font-weight: var(--fw-400);
}

.hero-list-title {
    font-size: 1.125rem;
    font-weight: var(--fw-700);
    color: var(--clr-dark-raspberry);
}

.list-item-title {
    font-weight: var(--fw-700);
}

.section-title {
    font-family: var(--ff-secondary);
    font-weight: var(--fw-400);
    color: var(--clr-nutmeg);
}

/* Layout styles */

.container {
    padding: 0 1.5rem;
}

/* General styles */

.hero {
    margin-top: 2.375rem;
}

.hero > *:not(.hero-list),
.ingredients > *:not(.list),
.instructions .section-title,
.nutrition > *:not(table) {
    margin-bottom: 1.5rem;
}

.hero-list {
    background-color: var(--clr-rose-white);
    padding: 1.5rem;
    border-radius: 0.625rem;
}

.ingredients,
.instructions,
.nutrition {
    padding: 1.75rem 0;
}

.ingredients,
.instructions,
.table-line:not(:last-of-type) {
    border-bottom: 0.0625rem solid var(--clr-light-grey);
}

.list {
    padding: 0 1.25rem;
}

.list-item {
    padding-left: 1rem;
}

.list-item:not(:last-of-type) {
    margin-bottom: 0.625rem;
}

.list-item::marker {
    color: var(--clr-dark-raspberry);
    font-weight: var(--fw-600);
}

.nutrition-table {
    min-width: 100%;
}

.table-line {
    display: block;
    padding: 0.3125rem;
}

.nutrition-value {
    font-weight: var(--fw-600);
    color: var(--clr-dark-raspberry);
}

@media (min-width: 31.25rem) {
    body {
        margin: 5rem 0;
        background-color: var(--clr-eggshell);
    }

    .wrapper {
        background-color: var(--clr-white);
        padding: 1.5rem;
        border-radius: 1.25rem;
        margin: 0 auto;
        max-width: 46.875rem;
    }

    .container {
        padding: 0;
    }

    .nutrition {
        padding-bottom: 0;
    }
}