*{
    box-sizing: border-box
}

body{
    font-family: "Outfit", sans-serif;
    font-size: 16px;
    background-color: hsl(30, 54%, 90%) ;
    color:hsl(30, 10%, 34%);
}

.card{
    background-color: hsl(0, 0%, 100%);
    width: 50vw;
    margin: 50px auto;
    border-radius: 10px;
    padding: 50px
}

.card img{
    width: 100%;
    border-radius: 10px;;
}

h1,h2 {
    font-family: "Young Serif", sans-serif;
}

h1{
    color: hsl(24, 5%, 18%);
}

h2{
    color:hsl(14, 45%, 36%);
}

li{
    padding-left: 20px;
}

.instructions ol{
    list-style: none;
    counter-reset: custom-counter;
    padding:0;
}

ul{
    padding: 20px;
}

.preparation-time{
    padding-left: 20px;
    margin: 0;
}

.preparation-time h3, .preparation-time li::marker{
    color: hsl(332, 51%, 32%);
}

.instructions li{
    font-family: "Outfit", sans-serif;
    position: relative;
    padding-left: 40px;
}

.instructions li::before {
    content: counter(custom-counter) '. '; /* Usa el contador para mostrar los números */
    counter-increment: custom-counter; /* Incrementa el contador */
    font-family: 'Outfit', sans-serif; /* Cambia la fuente del número */
    font-weight: bold;;
    position: absolute;
    left: 0; /* Coloca el número a la izquierda */
    color: hsl(332, 51%, 32%);
}

.ingredients h3, .ingredients li::marker{
    color: hsl(14, 45%, 36%);
}

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

tr{
    border-bottom: 1px solid hsl(30, 18%, 87%);
}
td{
    padding: 15 px;
}

table .last-td{
    font-weight: bold;
    color: hsl(14, 45%, 36%);

}

table .last-tr{
    border-bottom: none;
}

hr{
    border: 1px solid hsl(30, 18%, 87%);
}

.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }

@media (width <= 1080px){
    .card{
        height: 100%;
        width: 100%;
        border-radius: 0;
        margin: 0;
    }

    body{
        margin: 0;
    }

    .card img{
        width: 100%;
    }
}