: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-size: 16px;
    --primary-font: "Outfit", serif;
    --secondary-font: "Young Serif", serif;
    --font-thin: 100;
    --font-light: 300;
    --font-regular: 400;
    --font-medium: 500;
    --font-bold: 700;
    --font-black: 900;
    }


    body {
        background: var(--stone-150);
        min-height: 100vh; /* Tambahkan ini */
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: var(--primary-font);
        margin: 0; /* Hapus margin default */
        font-size: var(--font-size);
    }
    
    .card {
        width: 50%; /* Ganti max-width dengan width */
        max-width: 100%; /* Batas maksimal yang lebih masuk akal */
        background: var(--white);
        border-radius: 10px;
        padding: 32px;
        margin: 40px auto; /* Untuk jarak dari edge */
    }

.img {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px;
}

img {
    max-width: 100%;
    border-radius: 12px;
    margin-bottom: 24px;
}

.title {
    font-family: var(--secondary-font);
    font-weight: normal;
    margin-left: 25px;
}

p {
    margin: 0 25px;
}

span {
    font-weight: bold;
}

.box {
    margin: 20px;
    background: var(--rose-50);
    padding: 20px;
    border-radius: 15px;
}

.box h3 {
    color: var(--rose-800);
    margin-left: 23px;
}

h2 {
    color: var(--brown-800);
    font-family: var(--secondary-font);
    font-weight: normal;
    margin: 20px;
}

.ingredients {
    margin: 20px 0;
}

li {
    padding: 5px;
}

li::marker {
    color: var(--brown-800);
    font-weight: bold;
}

hr.solid {
    border-top: 3px solid #bbb;
  }


  
.parent {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat( 1fr);
    gap: 8px;
    margin: 20px 50px;
}
    
.div2 {
    color: var(--brown-800);
    font-weight: bold;
}

.attribution {
    margin: 50px;
}

@media (max-width: 375px) {
    .img {
        margin:  0;
    }
    img {
        margin: 0;
        border-radius: 0;
    }
    .title {
        font-size: 1.17em;
    }
    .card {
        width: 100%;
        margin: 0;
        padding: 0;
    }
}