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

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

:root {
    --clr-Nutmeg: #854632;
    --clr-Dark-Raspberry: #7b284f;

    --clr-White: #FFFFFF;
    --clr-Rose-White: #fff5fa;
    --clr-Eggshel: #f3e6d8;
    --clr-Wenge-Brown: #5f574e;
    --clr-Dark-Charcoal: #302d2c;
    --clr-Light-Grey: #d3d3d3;


    --ff-main: 'Outfit', sans-serif;
    --ff-headings: 'Young Serif', sans-serif;
    --fs-main: 1rem;
    --fs-headings: 1.75rem;
    --fw-400: 400;
    --fw-600: 600;
    --fw-700: 700;

    /* reset */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

h1, h2, h3, h4 {
    line-height: 1.2;
    font-family: var(--ff-headings);
    font-size: var(--fs-headings);
    font-weight: var(--fw-400);
    color:var(--clr-Nutmeg);
    margin-bottom: 1.75rem;

}

ul, ol {
    padding: 0 1rem;
}

img {
display: block;
max-width: 100%;
font-style: italic;
color: var(--clr-Dark-Raspberry);
}

body{
    font-family:var(--ff-main) ;
    font-weight: var(--fw-400);
    font-size: var(--fs-main);
    color: var(--clr-Wenge-Brown);
    background:var(--clr-Eggshel);

}

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

/*text styles*/
.recipe-title{
font-size:2.75rem;
color: var(--clr-Dark-Charcoal)
}

.prep-title{
   font-size: 1.275rem;
   font-weight: var(--fw-600);
   color: var(--clr-Dark-Raspberry);
   margin-bottom: .5rem;
}

span{
    font-weight: var(--fw-700);
    color: var(--clr-Dark-Charcoal);

}

[data-cell="nutrient-value"]{
    color: var(--clr-Nutmeg);
    font-weight: var(--fw-600);
}

li{
   padding-left: 1rem; 
   margin-bottom: .5rem;
}

li::marker{
    color: var(--clr-Nutmeg);
    font-weight: var(--fw-600);
}

/*Layout Styles*/
.wrapper{
    display: grid;
    place-items: center;
}

.recipe-wrapper{
    max-width: 45em;
    padding: 1.75rem;
    margin: 6rem 0;
    border-radius: 1.5rem;
    background: var(--clr-White);
}

/*general styeles*/
.recipe-img{
    border-radius: .8rem;
    margin-bottom: 2rem;
}

section{
    margin-top: 2rem;
}

hr{
    outline: none;
    border: none;
    height: 1px;
    background: var(--clr-Light-Grey);
    margin-top: 2rem;
}

.preparation-time{
    padding: 1.7em;
    border-radius: .8rem;
    margin-top: 2rem;
    background:var(--clr-Eggshel);

}

.tr {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 1rem;
    border-bottom: 1px solid var(--clr-Light-Grey);
}

/*media query*/
@media (max-width: 500px){
   .recipe-wrapper {
    margin: 0;
    border-radius:0;
    padding: 0;
   } 

   .recipe-img{
    border-radius: 0;
   }

   .recipe-container{
    padding: 0 1.75;
   }

   .recipe-title{
    font-size: 2.32rem;

   }

}