app.css

#root {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
}

.sidebar {
    width: 280px;
    background: #1f033f;
    background-image: var(--bs-gradient);
}

.sidebar .nav-link.active {
    /*background:  #16012e;*/
    background: rgba(0, 0, 0, 0.5);
}

.main {
    display: flex;
    flex-wrap: nowrap;
    flex-grow: 1;
    overflow-x: auto;
    overflow-y: hidden;
}

[data-bs-theme=light] .welcome {
    color: black;
}

[data-bs-theme=light] .welcome .btn {
    color: black;
}

[data-bs-theme=dark] .welcome {
    color: white;
}

[data-bs-theme=dark] .welcome .btn {
    color: white;
}

[data-bs-theme=light] .message {
    background-color: var(--bs-gray-100);
}

[data-bs-theme=dark] .message {
    background-color: var(--bs-gray-800);
}

.markdown pre {
    border-radius: 4px;
    padding: 0.5em;
    width: 75%;
    overflow-x: scroll;
}

[data-bs-theme=light] .markdown pre {
    background-color: var(--bs-gray-200);
}

[data-bs-theme=dark] .markdown pre {
    background-color: var(--bs-gray-700);
}

.markdown blockquote {
    border-left: solid 0.2em var(--bs-gray-500);
    padding-left: 0.5em;
}