/* Layout container */
.layout {
    display: flex;               /* arrange children in a row */
    flex-wrap: wrap;             /* allows wrapping on smaller screens */
    gap: 20px;                   /* space between columns */
    margin: 20px 0;
}

/* Left sidebar */
#sidebar-left {
    width: 200px;                /* fixed width for sidebar */
    background-color: #f0f0f0;   /* light gray background */
    padding: 10px;
    box-sizing: border-box;
}

/* Right sidebar */
#sidebar-right {
    width: 200px;                /* fixed width for sidebar */
    background-color: #f0f0f0;
    padding: 10px;
    box-sizing: border-box;
}

/* Main content */
.content {
    flex: 1;                     /* fills remaining space */
    background-color: #ffffff;   /* optional, for contrast */
    padding: 10px;
    box-sizing: border-box;
}

/* Responsive: stack columns on smaller screens */
@media (max-width: 800px) {
    .layout {
        flex-direction: column;  /* stack vertically */
    }
    #sidebar-left,
    #sidebar-right,
    .content {
        width: 100%;             /* full width when stacked */
    }
}