.app {
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-columns: 1fr 5fr 1fr;
    height: 100vh;
}

.top-menu {
    grid-column: span 3;
}

.left-bar {
    grid-column: 1;
}

.main-canvas{
    grid-column: 2;
}

.right-bar {
    grid-column: 3;
}


/* DARK MODE */

.dark-mode {
    background-color: #111; /* Dark background */
    color: #fff; /* Light text */
}

.dark-mode .hoverable-area {
    border: 4px solid white;
}

.dark-mode .top-menu,
.dark-mode .right-bar,
.dark-mode .left-bar {
    background-color: #111;
    color: #fff; /* Light text for specific sections */
}

.dark-mode .top-menu button,
.dark-mode .right-bar button,
.dark-mode .left-bar button,
.dark-mode .main-canvas button {
    color: #fff; /* Light text for buttons */
}