:root {
    --var-color-rose-800: #7A284E;
    --var-color-rose-50: #FFF7FB;
    --var-color-stone-900: #312E2C;
    --var-color-stone-600: #5F564D;
    --var-color-stone-150: #E3DDD7;
    --var-color-stone-100: #F3E5D7;
    --var-color-brown-800: #854632;
    --var-color-white: #FFFFFF;
}

html {
    /* 62.5% of 16px = 10px, 1rem = 10px */
    font-size: 62.5%;
    h1, p {
        margin: 0;
    }

    h2 {
        color: var(--var-color-brown-800);
        font-size: 2.8rem;
        line-height: 100%;
        font-family: "Young Serif", serif;
        font-weight: 400;
        font-style: normal;
    }

    li {
        margin-bottom: 0.8rem;
    }

    li::marker {
        color: var(--var-color-rose-800);
    }

    table {
        border-collapse: collapse;
        width: 100%;
        padding-bottom: 2rem;
    }

    tr:not(:last-child) {
        border-bottom: 1px solid #ddd;
    }

    td {
        padding-bottom: 1rem;
        padding-top: 1rem;
    }

    
}


body {
    background-color: var(--var-color-stone-100);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;

    font-size: 1.6rem;
    line-height: 150%;
    font-family: "Outfit", sans-serif;
    font-weight: 300;
    font-style: normal;

    color: var(--var-color-stone-600);

    .list-item .bold-text {
        margin-left: 1.6rem;
    }
}

.main-container {
    width: 73.6rem;
    background-color: var(--var-color-white);
    border-radius: 2.4rem;
}

.article-container img {
    width: 65.6rem;
    height: 30rem;
    border-radius: 1.2rem;
    margin-bottom: 4rem;
}

.article-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 4rem;
    
    header {
        h1 {
            color: var(--var-color-stone-900);
            font-size: 4rem;
            line-height: 100%;
            font-family: "Young Serif", serif;
            font-weight: 400;
            font-style: normal;
            margin-bottom: 2.4rem;
        } 
    }
}

section {
    margin-top: 3.2rem;
}

.prep-time {
    background-color: var(--var-color-rose-50);
    border-radius: 1.2rem;
    display: flex;
    flex-direction: column;
    width: 100%;

    h3 {
        color: var(--var-color-rose-800);
        font-size: 2rem;
        line-height: 100%;
        font-optical-sizing: auto;
        font-weight: 600;
        font-style: normal;
        margin: 2.4rem 2.4rem 2.7rem 2.4rem;
    } 

    ol {
        padding: 0;
        margin: 0 2.4rem 2.4rem 2.4rem;
    }
}

.bold-text {
    font-weight: bold;
}

.bold-color-text {
    color: var(--var-color-brown-800);
    font-weight: bold;
}

.dot-style {
    list-style: inside;
}

.nutrition p {
    padding-bottom: 20px;
}

.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }