@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Young+Serif&display=swap');
:root{
--color-White: hsl(0, 0%, 100%);

--color-Stone-100: hsl(30, 54%, 90%);
--color-Stone-150: hsl(30, 18%, 87%);
--color-Stone-600: hsl(30, 10%, 34%);
--color-Stone-900: hsl(24, 5%, 18%);
--color-Brown-800: hsl(14, 45%, 36%);
--color-Rose-800: hsl(332, 51%, 32%);
--color-Rose-50: hsl(330, 100%, 98%);
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

body{
    font-family: "Young Serif", serif; 
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    flex-direction: column;
    background: var(--color-Stone-100);
}

main{
    max-width: 700px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1 0 auto;
    /* border: 2px solid black; */
    margin: 100px 0;
    padding: 40px;
    border-radius: 20px;
    background: var(--color-White);
}

/* .hero__contenido{
    border: 2px solid blue;
} */

.img{
    width: 100%;
    display: block;
    border-radius: 20px;
}

.art__titulo{
    margin-top: 30px;
    font-size: 2em;
    font-weight: 500;
}

.parrafo{
    margin: 15px 0 25px;
    font-size: 0.9rem;
    font-family: "Outfit", serif;
    color: var(--color-Stone-600);
    padding: .1px;
}

/* preparation time */
.sect__contenido{
    background: var(--color-Rose-50);
    padding: 28px;
    font-family: "Outfit", serif;
    border-radius: 20px;

}

.sect__titulo{
    color: var(--color-Rose-800);
}

.desorden_time{
    margin-left: 25px;
    margin-top: 15px;
}

.modi__time{
    padding-left: 25px;
    color: var(--color-Stone-600);
    line-height: 2;
}

.modi__time::marker{
    color: var(--color-Rose-800);
}

.modi__span{
    color: var(--color-Stone-600);
    font-weight: 700;
}

.linea{
    
    margin-top: 30px;
    border-radius: 20px;
    color: var(--color-Stone-150);
}

/* Ingredients */

.general__texto{
    margin: 20px 0;
    color: var(--color-Brown-800);
    font-weight: 500;
    font-size: 1.6em;
    
}

.copy__list{
    margin-left: 22px;
}

.modi__list{
    padding-left: 20px;
    line-height: 2;
    color: var(--color-Stone-600);
    font-weight: 400;
    font-family: "Outfit", serif;
}


.modi__list::marker{
    color: var(--color-Brown-800);
}

/* Instruction */

.number__list{
    padding-left: 15px;
    font-family: "Outfit", serif;
    font-size: 0.9rem;
}
.number__list::marker{
    color: var(--color-Brown-800);
}

.number__list:not(:last-child){
    margin-bottom: 15px;
}

/* Nutrition */


.contenido__tablero{
    display: grid;
    grid-template-columns: repeat(2, fr);
    grid-template-rows: repeat(1, 1fr);
    font-family: "Outfit", serif;
}

.tablero{
    border-collapse: collapse;
}


.tabla{
    padding: 10px 0 10px 30px;
    color: var(--color-Stone-600);

}

.tablero tr:not(:last-child){
    border-bottom: 2px solid var(--color-Stone-150);
}

.tabla:nth-child(2){
    color: var(--color-Brown-800);
    font-weight: 600;
}

/* media queria */
@media screen and (max-width:375px){
    body{
        justify-content: flex-start;
        margin: 0;
        padding: 0;
    }

    main{
        max-width: 100%;
        border-radius: 0;
        width: 100%;
        padding: 0;
        margin: 0;
    }

    .hero__contenido{
        width: 100%;
    }

    .contenido__complet{
        padding: 30px;

    }

    .img{
        border-radius: 0;
    }

    .pie__pagina{
        display: none;
    }

    
}