@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Young+Serif&display=swap');

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

ul,
li,
ol {
    all: unset;
}

h1,
h2 {
    font-family: "Young Serif", serif;
    font-weight: 400;
    font-style : normal;
}

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

body {
    min-height         : 100vh;
    display            : flex;
    flex-direction     : column;
    justify-content    : center;
    align-items        : center;
    gap                : 2rem;
    background-color   : hsl(30, 54%, 90%);
    font-family        : "Outfit", serif;
    font-optical-sizing: auto;
    font-style         : normal;
    font-size          : 1rem;
    margin             : 2rem;
    color              : hsla(0, 0%, 0%, 0.856);

}

.whole-container {
    display         : flex;
    flex-direction  : column;
    justify-content : center;
    gap             : 0.5rem;
    max-width       : 700px;
    background-color: hsl(0, 0%, 100%);
    padding         : 1rem;
    border-radius: 1.2rem;
}

ul li::before {
    font-weight  : 600;
    content      : "\2022";
    color        : hsl(14, 45%, 36%, 0.904);
    padding-right: 1.2rem;
}

.prep-container ul li::before {
    color: hsl(332, 51%, 32%, 0.904);
}

.prep-container h3 {
    color: hsl(332, 51%, 32%, 0.904);

}
.top-container p{
    padding: 1rem 0;
}

.prep-container {
    font-family        : "Outfit", serif;
    font-optical-sizing: auto;
    font-style         : normal;
    background-color   : hsl(330, 100%, 98%);
    padding            : 1rem 2rem;
    border-radius      : 1rem;
}


ul {
    display       : flex;
    flex-direction: column;
}

.bol {
    color      : hsla(0, 0%, 0%, 0.719);
    font-weight: bold;
}

.head-image{
    border-radius: 10px;
}
.head-image-container{
    padding: 1.3rem;
}
.all-contents-container{
    padding: 0 2rem;
}

ol {
    display: flex;
    flex-direction: column;
    counter-reset: instructions;
    gap: 0.8rem;
}

ol li {
    display: flex;
    gap: 0.5rem; /* Space between number and text */
}

ol li::before {
    font-weight: 700;
    content: counter(instructions) ".";
    counter-increment: instructions;
    color: hsl(14, 45%, 36%, 0.904);
    min-width: 1.5rem; /* Ensures consistent number spacing */
    text-align: right;
    font-size: 1rem;
    line-height: 1.6;
}

.nutri-table{
    width: 100%;
    border-collapse: collapse;

}
.table-wrapper{
    width: min(100% - 2rem, 600px);
    margin-inline: auto;
}

.nutri-table tr{
    border-bottom: 1px solid hsla(0, 0%, 41%, 0.252);
}
.nutri-table tr:last-child{
    border-bottom: none;
}
.nutri-table td{
    padding: 0.7rem 1rem;
}
.brownie{
    color: hsl(14, 45%, 36%, 0.904);
    font-weight: 700;
}
.ingredient-container, .instruction-container{
    border-bottom: 1px solid hsla(0, 0%, 41%, 0.252);
}
.top-container,.ingredient-container, .instruction-container, .nutrition-container{
    margin-bottom: 1rem;
}
ol,ul{
    margin: 1rem 0 2rem 0;
}
.nutrition-container h2{
    margin-bottom: 1rem;
}