*,
::before,
::after {
    padding: 0;
    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{
    background: var(--stone-100);
    font-family: 'Outfit', sans-serif;
}

.container{
    background: var(--white);
    width: 500px;
    height: 100%;
    margin: 50px auto;
    padding: 30px;
    border-radius: 10px;
    color: var(--stone-600);
}

img{
    width:100%;
    border-radius: 10px;
}

h2{
    font-family: 'Young Serif', sans-serif;
    font-weight: 400;
    color: var(--stone-900);
    margin: 10px 0;
}

p{
    font-size: 0.7rem;
    font-weight: 400;
}


.inner-container h3 {
    font-family: 'Young Serif', sans-serif;
    font-weight: 400;
    font-size: 1.2rem;
    color: var(--brown-800);
}

/* Prepartion Time */
.prep-time{
    background: var(--rose-50);
    margin: 20px 0;
    padding: 20px;
    border-radius: 10px;
}

.prep-time h4{
    color: var(--rose-800);
}

.prep-time ul li{
    font-size: 0.8rem;
    margin: 10px 20px;
    padding-left: 20px;
}
.prep-time ul li::marker{
    color: var(--rose-800);
}

/* Ingredients */

.ingredients {
    border-bottom: 1px solid var(--stone-100);
    margin-bottom: 20px;
}

.ingredients ul {
    padding: 10px 20px;
}

.ingredients ul li{
    font-size: 0.8rem;
    font-weight: 400;
    margin: 10px 0 15px;
    padding-left: 10px;
}

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

/* Instructions */

.instructions {
    border-bottom: 1px solid var(--stone-100);
    margin-bottom: 20px;
}

.instructions ol{
    padding: 10px 0 10px 10px;
}

.instructions ol li{
    font-size: 0.7rem;
    margin-bottom: 10px;
    padding-left: 10px;
}

.instructions ol li::marker{
    color: var(--brown-800);
    font-weight: 700;
}

/* Nutrition */

table{
    width: 100%;
    padding: 0 10px;
}

.nutrition p{
    margin: 12px 0;
}

.nutrition tr td{
    font-size: 0.6rem;
    padding: 10px;
    border-bottom: 1px solid var(--stone-100);
}

.nutrition tr:last-child td{
    border-bottom: 0;
}

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


/* Footer */

footer .attribution { 
    font-size: 11px; 
    text-align: center;
}

footer .attribution a { 
    color: hsl(228, 45%, 44%); 
}

@media (max-width: 400px) {
    .container{
        width: 100%;
        margin: 0;
        overflow-x: 0;
    }

    img{
        padding:0;
        width: 100%;
    }
    
}