:root{
    --White: hsl(0, 0%, 100%);
    --Stone100: hsl(30, 54%, 90%);
    --Stone150: hsl(30, 18%, 87%);
    --Stone600: hsl(30, 10%, 34%);
    --Stone900: hsl(24, 5%, 18%);
    --Brown800: hsl(14, 45%, 36%);
    --Rose800: hsl(332, 51%, 32%);
    --Rose50: hsl(330, 100%, 98%);
}
body{
    font-family: 'Outfit', sans-serif;
    background-color: var(--Stone100);
    margin: 0;
    display: flex;
    align-items: center;
    padding: 20px;
    min-height: 100vh;
}
.container{
    width: 500px;
    height: auto;
    display: blockS;
    align-items: center;
    margin: 0 auto;
    border-radius: 9px;
    background-color: var(--White);
    padding: 20px;
}
.container img{
    width: 100%;
    height: auto;
    border-radius: 9px;
}
.table{
    background-color: var(--Rose50);
    border-radius: 9px;
    padding: 10px;
}
.table h3{
    color: var(--Rose800);
    font-family: 'Young Serif', serif;
}
.container h2{
    color: var(--Brown800);
    font-family: 'Young Serif', serif;
}
.order{
    border-top: var(--Stone900);
}
.nutrients{
    width: 100%;
    border-collapse: separate; 
    border-spacing: 0 15px;
}
ul, ol {
    font-family: 'Outfit', sans-serif;
}

@media screen and (max-width : 375px) {
    .container{
        max-width: 85%;
        margin: 0 auto;
        padding: 15px;   
    }
    h2 {
        font-size: 1.2rem;
    }

    h3 {
        font-size: 0.9rem;
    }
}