/* 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 */
:root{
    --clr-Nutmeg: #854632;
    --clr-Dark-Raspberry: #7b284f;

    --clr-White: #ffffff;
    --clr-Rose-White: #fff5fa;
    --clr-Eggshell: #f3e6d8;
    --clr-Light-Grey: #e4ded8;
    --clr-Wenge-Brown: #5f574e;
    --clr-Dark-Charcoal: #302d2c;

    --ff-main: 'outfit', sans-serif;
    --ff-headings: 'Young Serif', 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-600);
    color: var(--clr-Nutmeg);
    margin-bottom: 1.75rem;

    /* color is not adapting to the program. WHy? */
    /* it started adapting when I change the color format from 
    hsl to # and added ; at the end of every line */
}

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);
    line-height: 1.5;
    color: var(--clr-Wenge-Brown);
    background: var(--clr-Eggshell);
}
table {
    border-collapse: collapse;
    width: 100%;
}

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

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

span {
    font-weight: var(--fw-700);
}

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

/* targetting the space between the lists bullets/number and content. */
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: 2.5rem;
    margin: 6rem 0;
    border-radius: 1.5rem;
    background: var(--clr-White);
}

/* general style */
.recipe-img{
    border-radius: 0.75rem;
    margin-bottom: 2.5rem;
}

section{
    margin-top: 2rem;
}

/* Why is there no line sandwhiching my recipe-instruction section? */
/* I added <hr/> tag in html sandwhiching recipe-instruction section. */

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

.prep-time {
    padding: 1.75rem;
    padding-top: .5rem;
    padding-bottom: .65rem;
    border-radius: .8rem;
    margin-top: 2rem;
    background: rgba(255,247,252,255); 

    /* how to change the background color without changing the color font? */
    /* tried background: rgba(red, green, blue, and alpha); instead of root color
    adjust rgba color accordingly. Use this website https://imagecolorpicker.com/*/

}

tr{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 1rem;
    border-bottom: 1px solid var(--clr-Light-Grey);
    /* another way to create harizontal line is border bottom, tho this one is only for css */
}

tr:last-child{
    border-bottom: none;
}

/* 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.75rem;
    }

    .recipe-title{
        font-size: 2.2rem;
    }
}