/* Reset some default styles */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: Arial, sans-serif;
}

/* Container for the windows */
.container {
    display: flex; /* Use flexbox for layout */
    height: 100vh; /* Full viewport height */
}

/* Style for each window */
.window {
    flex: 1; /* Equal width for both windows */
    overflow-y: auto; /* Scrollbar for overflowing content */
    padding: 20px;
    box-sizing: border-box; /* Include padding in element's total width and height */
}

/* Specific styles for left and right windows */
.left-window {
    background-color: white; /* Light grey background */
    border-right: 5px solid black; /* Thick border between left and right windows */
}

.right-window {
    background-color: white; /* Slightly darker grey background */
}

/* Responsive design for smaller screens */
@media (max-width: 768px) {
    .container {
        flex-direction: column; /* Stack windows vertically */
        border-right: none; /* Remove right border in mobile view */
        border-bottom: 5px solid black; /* Add a thick bottom border between top and bottom windows */
    }
    
    .window {
        height: 50vh; /* Half of the viewport height for each window */
        border-bottom: 5px solid black; /* Add bottom border between stacked windows */
    }

    .window:last-child {
        border-bottom: none; /* Remove bottom border from the last window */
    }
}