:root {
    --clr-rose-800: #7A284E;
    --clr-rose-50: #FFF7FB;
    --clr-stone-900: #312E2C;
    --clr-stone-600: #5F564D;
    --clr-stone-150: #E3DDD7;
    --clr-stone-100: #F3E5D7;
    --clr-brown-800: #854632;
    --clr-white: #FFF;
}

html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    display: flex;
    justify-content: center;
    background-color: var(--clr-stone-100);
    color: var(--clr-stone-900);
    font-family: sans-serif;
}

.wrapper {
    max-width: 750px;
    background-color: var(--clr-white);
    padding: 2rem;
    border-radius: 10px;
    margin: 2rem 0;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

h1, h2 {
    font-family: serif;
}

h2 {
    color: var(--clr-brown-800);
}

li > span {
    font-weight: bold;
}

.preparation-time {
    background-color: var(--clr-rose-50);
    padding: .2rem 2rem;
    border-radius: 10px;
}

.preparation-time li::marker {
    color: var(--clr-rose-800);
}

.preparation-time h3 {
    color: var(--clr-rose-800);
}

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

.nutrition table tr:not(.nutrition table tr:last-of-type) {
    border-bottom: 1px solid var(--clr-stone-150);
}

.nutrition table td {
    color: var(--clr-brown-800);
    font-weight: bold;
}

.nutrition table th {
    font-weight: normal;
}

.nutrition table th,
.nutrition table td {
    text-align: left;
    padding: .5rem 2rem;
}

div:has(h2):not(div:has(h2):last-of-type) {
    border-bottom: 1px solid var(--clr-stone-150);
}

ul, ol {
    padding-inline: 0;
    list-style-position: inside;
}

li {
    margin-bottom: .5rem;
}

li::first-letter {
    margin-left: .5rem;
}


ol li::marker {
    font-weight: bold;
}

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

div:has(h2) li::marker {
    color: var(--clr-brown-800);
}