@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") ;
}
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }

@media (max-width:400px){
    .recipe{
        font-family: 'Outfit', 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        background-color: white;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    img{
        width: 100%;
    }
}

@media (min-width: 400px) and (max-width: 768px){
    .recipe{
        font-family: 'Outfit', 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        background-color: white;
        width: 400px;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    img{
        width: 90%;
        border-radius: 10px;
        padding-top: 5%;
    }
}

@media (min-width: 768px){
    
    .recipe{
        font-family: 'Outfit', 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        background-color: white;
        width: 450px;
        border-radius: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    img{
        width: 90%;
        border-radius: 10px;
        padding-top: 5%;
    }
}
body{
    background-color: hsl(30, 54%, 90%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


h1{
    font-family: 'Young-serif', 'Times New Roman', Times, serif;
    font-weight: 300;
    margin-bottom: 0;
    font-size: clamp(1em, 3vw, 1.8em);
}

.recipe div, h1, p{
    width: 90%;
}

p, li, td{
    opacity: .7;
    font-size: clamp(.4em, 3vw, .6em);
}

li{
    padding-left: 3%;
    margin-bottom: .5em;
}

h2{
    color: hsl(14, 45%, 36%);
    font-family: 'Young-serif', 'Times New Roman', Times, serif;
    font-size: clamp(.7em, 2vw, 1.2em);
    font-weight: 300;
}

ul, ol{
    padding-left: 1em;
}

.time{
    background-color:hsl(330, 100%, 98%);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.time h2{
    font-family: 'Outfit', 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    color: hsl(332, 51%, 32%);
    font-weight: 700;
    width: 90%;
    margin-bottom: .8em;
    font-size: clamp(.6em, 2vw, .8em);
}

.time ul{
    width: 90%;
    margin-top: 0;
    padding-left: 7%;
}

ol li::marker{
    color: hsl(14, 45%, 36%);
    font-weight: bold;
}

.ingredients, .instructions{
    border-bottom: solid .5px #e0e0e0;
    border-bottom-color: rgb(174, 172, 169);
}

.nutrition{
    padding-bottom: 5%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

table{
    width: 98%;
    align-self: center;
    border-collapse: collapse;
}

.nutrition tr{
    border-bottom: .5px solid #e0e0e0;
    margin-top: 1em;
}

.col-2{
    color: hsl(14, 45%, 36%);
    font-weight: 700;
}

#fat{
    border-bottom: 0;
}

td{
    padding-top: .7em;
    padding-bottom: .7em;
}