@font-face {
    font-family: "Outfit";
    src: url(assets/fonts/outfit/Outfit-VariableFont_wght.ttf);
}

@font-face {
    font-family: "young-serif";
    src: url(assets/fonts/young-serif/YoungSerif-Regular.ttf)
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Outfit";
  color: hsl(30, 10%, 34%);
}

html {
    background: hsl(30, 54%, 90%);
}

.card {
    width: fit-content;
    max-width: 50vw;
    background: white;
    margin: 8rem auto;
    border-radius: 20px;
}

.content {
    padding: 0 3rem 3rem 3rem;
}

hr {
    border: none;
    height: 1px;
    background-color: hsl(30, 18%, 87%);
}

img {
    display: block;
    width: 100%;
    border-radius: 20px;
}

.image-wrapper {
    padding: 3rem 3rem 2.5rem 3rem;
}

.title, .part-title {
    font-family: "young-serif";
    font-weight: 400;
}

.title {
    color: hsl(24, 5%, 18%);
    margin-bottom: 1.7rem;
}

.desc {
    margin-bottom: 2rem;
}

.prep {
    background: hsl(330, 100%, 98%);
    padding: 2rem;
    margin-bottom: 1rem;
    border-radius: 20px;
}

.prep h3 {
    color: hsl(332, 51%, 32%);
}

.prep ul {
    margin-left: 1.5rem;
}

.prep li::marker {
    color: hsl(332, 51%, 32%);
}

.prep strong {
    font-weight: 600;
}

.prep li {
    margin-top: 1rem;
}

.ingredients {
    margin: 2rem 0;
    border-radius: 20px;
}

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

.ingredients li {
    margin-top: 1rem;
    padding-left: 1rem;
}

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

.ingredients ul {
    margin-left: 1.75rem;
}

.instructions {
    margin: 2rem 0;
}

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

.instructions ol {
    margin-left: 1.75rem;
}

.instructions li {
    margin-top: 1rem;
    padding-left: 1rem
}

.instructions li::marker {
    color: hsl(14, 45%, 36%);
    font-weight: 600;
}

.instructions strong {
    font-weight: 600;
}

.nutrition {
    margin-top: 2rem;
}

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

.nutrition p {
    margin: 2rem 0 1rem 0;
}

.nutrition table {
    border-collapse: collapse;
    display: block;
}

.nutrition tbody {
    display: block;
}

tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 1rem 0 0 2rem;
}

.bar-below {
    padding-bottom: 1rem;
    border-bottom: 1px solid hsl(30, 18%, 87%);
}

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

@media (width <= 375px) {
    .card {
        max-width: 100vw;
        margin: 0;
        border-radius: 0;
    }

    img {
        border-radius: 0;
    }

    .image-wrapper {
        padding: 0 0 2.5rem 0;
    }
}