:root {
    --White: #fff;
    --Stone-100: #f3e6d8;
    --Stone-150: #e4ded8;
    --Stone-600: #5f574e;
    --Stone-900: #302d2c;
    --Brown: #854632;
    --Rose-800: #7b284f;
    --Rose-50: #fff5fa;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--Stone-100);
    font-family: "Outfit", sans-serif;
    color: var(--Stone-600);
}

h1,
h2 {
    font-family: "Young Serif", serif;
}

#recipe-card {
    background-color: var(--White);
    margin: 4rem auto;
    width: 735px;
    border-radius: 20px;
}

.img-container {
    padding: 2.5rem
}

.omelette-img {
    width: 655px;
    border-radius: 10px;
}

.ingredients-section {
    margin-bottom: 2.5rem;
    padding: 0 2.5rem;
}


.main-header {
    color: var(--Stone-900);
    margin: 1rem 0;
}

.prep-time-container {
    margin: 2rem 0;
    background-color: var(--Rose-50);
    border-radius: 10px;
    padding: 1.5rem 3rem;
}

.prep-time-heading {
    color: var(--Rose-800);
}

li {
    padding-left: 1rem;
    margin: 1rem 0;
}

li::marker {
    color: var(--Rose-800);
}

.bold-text {
    font-weight: bold;
}

.brown-text {
    color: var(--Brown);
}

.instructions-section {
    padding: 0 2.5rem;
}

.ingredients-list,
.instructions-list {
    margin-left: 1rem;
}

.ingredients-list li::marker {
    color: var(--Brown);
}

.instructions-list li::marker {
    color: var(--Brown);
    font-weight: bold;
}

.nutrition-section {
    padding: 2.5rem;
}

.nutrition-description {
    margin: 1rem 0;
}

.nutrition-table {
    width: 100%;
}

tr {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
}

tr:not(:last-child) {
    border-bottom: 1px solid var(--Stone-150);
}

.divider {
    height: 1px;
    background-color: var(--Stone-150);
    margin-top: 2.5rem;
}

/*Media Queries*/

@media screen and (max-width: 700px) {
    #recipe-card {
        margin: 0;
        width: 100%;
        border-radius: 0px;
        padding: 0;
    }

    .img-container {
        padding: 0;
    }

    .omelette-img {
        width: 100%;
        border-radius: 0;
    }
}