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

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

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

body{
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Outfit', 'Young-Serif', sans-serif;
    font-size: 16px;
    background-color: hsl(30, 54%, 90%);
    color: hsl(30, 10%, 34%);
    min-height: 100vh;
}

main{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    padding: 2rem;
    background-color: hsl(0, 0%, 100%);
    
}

main img{
    width: 100%;
    object-fit: cover;
}

main > div{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
}

main h1{
    font-family: 'Young-Serif';
    color: hsl(30, 10%, 34%);
    font-size: 2.25rem;
    margin-block: 1rem;
}

main h2{
    color:  hsl(332, 51%, 32%);
}

main h3{
    color: hsl(14, 45%, 36%);
    font-family: 'Young-Serif';
    font-size: 1.5rem;
}

main p{
    line-height: 1.5rem;
}

main li {
    margin-block: 0.5rem;
}

main ul li span,
main ol li span {
    color: hsl(30, 10%, 34%);
    font-weight: 900;
}

main .simple_container p{
    color: hsl(24, 5%, 18%);
}

main .preparation_container{
    background-color:  hsl(330, 100%, 98%);
    border-radius: 10px;
    padding: 1.5rem;
}


main .ingredients_container,
main .instructions_container {
    padding-left: 1.5rem;
}

main .nutrition_container{
    display: flex;
    flex-direction: column;
}

main .nutrition_container > div{
    display: flex;
    flex-direction: column;
}

main .nutrition_container div div{
    display: flex;
    padding: .75rem 1.5rem;
    border-bottom: .2px solid hsl(30, 10%, 34%);
}

main .nutrition_container div div:nth-last-child(1){
    border-bottom: none;
}


main .nutrition_container div div span {
    color: hsl(332, 51%, 32%);
    font-weight: 600;
}
/* Mobile Version */
@media screen and (max-width: 999px) {
    body{
        background-color: hsl(0, 0%, 100%);
        padding: 1rem;
        font-size: .89rem;
    }

    main .nutrition_container div div .nutrients{
        width: 125px;
    }
}

/* Desktop Version */
@media screen and (min-width:1000px){
    body{
        min-height: 100vh;  
        line-height: 1.5rem;
        padding: 5rem;     
    }

    main{
        width: 700px;
        border-radius: 15px;
    }
    
    main .simple_container img {
        border-radius: 1.5rem;
    }

    main .nutrition_container div div .nutrients{
        width: 300px;
    }
}