:root{
    --Stone100: hsl(30, 54%, 90%);
    --Stone150: hsl(30, 18%, 87%);
    --Stone600: hsl(30, 10%, 34%);
    --Stone900: hsl(24, 5%, 18%);

    --Brown800: hsl(14, 45%, 36%);

    --Rose800: hsl(332, 51%, 32%);
    --Rose50: hsl(330, 100%, 98%);
}

body{
    background-color: var(--Stone100);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
}

main{
    background-color: white;
    border-radius: 20px;
    width: 700px;
    margin: 80px 0px;
    padding: 40px;
}

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


/* START PREPARATION*/

.Preparation{
    background-color: var(--Rose50);
    margin-top: 20px;
    padding: 5px 10px;
    border-radius: 10px;
}

.Preparation li{
    font-size: 16px;
    padding: 5px 10px;
}

.Preparation li::marker{
    color: var(--Rose800);
}

/* END PREPARATION*/



/* START INGREDIENTS*/

.Ingredients{
    border-bottom: 0.05rem solid var(--Stone150);
    width: 100%;
}

.Ingredients ul{
    padding:0px 0px 5px 25px;
   
}

.Ingredients li{
    padding:0px 0px 8px 15px;
    font-size: 16px;
   
}

.Ingredients li::marker{
    color: var(--Brown800);
}


/* END INGREDIENTS*/



/* START INSTRUCTIONS*/

.Instructions{
    border-bottom: 0.05rem solid var(--Stone150);
    width: 100%;
    
}

.Instructions ol{
    padding: 0px 0px 5px 25px;
}

.Instructions li{
    padding: 0px 0px 10px 15px;
    font-size: 16px;

}

.Instructions li::marker{
    color: var(--Brown800);
    font-weight: 700;
    font: bold;
}

/* END INSTRUCTIONS*/

/* START NUTRITION TABLE*/

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

table tr:nth-child(n+2) th, table tr:nth-child(n+2) td{
    border-top: 0.05rem solid var(--Stone150);
}

th, td {
    padding: 8px 0px;
    text-align: left;
}

th{
    width: 50%;
    padding-left: 25px;
    font-weight: normal;
}

td{
    text-align:left;
    color: var(--Brown800);
    font-weight: bold;
}



/* END NUTRITION TABLE*/

/* START HEADING AND TEXTS*/

h1{
    font-family: 'Young Serif';
    font-weight: 400;
    font-size: 36px;
}


h2{
    font-family: 'Young Serif';
    font-weight: 400;
    color: var(--Brown800);
    font-size: 28px;
}

h3{
    color: var(--Rose800);
    font-family: 'Outfit';
    font-weight: 600;
    padding-left: 15px;
}

p, li, table{
    font-family: 'Outfit';
    font-weight: 400;
    color: var(--Stone600);
}

.nutparag{
    font-size: 16px;
}

/* END HEADING AND TEXTS*/


.attribution { 
    font-size: 11px; 
    text-align: center;
    margin-top: 20px;

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

}