body {
    font-family: sans-serif;
    transition: background-color 0.3s, color 0.3s;
}

.container {
    display: grid;
    grid-template-areas:
        "header header"
        "suggester candidates"
        "history history"
        "footer footer";
    grid-gap: 20px;
    padding: 20px;
}

h1 {
    grid-area: header;
    text-align: center;
}

.meal-suggester {
    grid-area: suggester;
    text-align: center;
}

.meal-suggestion img {
    max-width: 100%;
    height: auto;
    margin-top: 20px;
}

.candidate-list {
    grid-area: candidates;
}

.meal-history {
    grid-area: history;
}

#theme-toggle {
    grid-area: footer;
}


/* Light Mode */
body.light-mode {
    background-color: #f0f0f0;
    color: #333;
}

body.light-mode button {
    background-color: #333;
    color: white;
}

/* Dark Mode */
body.dark-mode {
    background-color: #333;
    color: #f0f0f0;
}

body.dark-mode button {
    background-color: #f0f0f0;
    color: #333;
}