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

:root {
--White: hsl(0, 0%, 100%);

--Stone-100: hsl(30, 54%, 90%);
--Stone-150: hsl(30, 18%, 87%);
--Stone-600: hsl(30, 10%, 34%);
--Stone-900: hsl(24, 5%, 18%);

--Brown-800: hsl(14, 45%, 36%);

--Rose-800: hsl(332, 51%, 32%);
--Rose-50: hsl(330, 100%, 98%);

 --font-family-Young: "Young Serif", serif;
--font-family-Outfit: "Outfit", sans-serif;

}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background-color: var(--Stone-100) ;
    font-family: var(--font-family-Outfit) ;
    display: flex;
    justify-content: center;
}
.container {
    max-width: 750px;
    background-color: var(--White);
}
.custom-header {
    font-family: var(--font-family-Young);
}
.preparation {
    background-color: var(--Rose-50);

}
.custom-h4 {
    color: var(--Rose-800);
}
ol li p, ul li p {
    margin-left: 15px;
}
.preparation ul li {
    color: var(--Rose-800);
}
p {
    color: var(--Stone-600);
}
.custom-h2  {
    font-family: var(--font-family-Young);
    color : var(--Brown-800);
}
.ingredients ul li, .instructions ol li {
    color: var(--Brown-800);
}
ol {
    font-weight: 700;
}

ol li,ul li {
    position: relative;
    right: 10px;
}
p,td {
    font-weight: 400 ;
}
.custom-th {
    color: var(--Brown-800) !important;
}
th, td {
    padding-left: 30px !important;
    /* border-bottom: none !important; */
}
.table tr:last-child {
    th, td {
        border-bottom: none !important;
    }  
}