styles.css

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh; /* Make body take full viewport height */
    margin: 0; /* Reset default margin */
    color: white;
}

#header, #footer {
    width: 100%;
    flex-shrink: 0; /* Prevents flexbox from shrinking these items */
    background-color: black;
}

#main-content {
    display: flex;
    justify-content: space-between; /* Adjust this as per your design preference */
    align-items: flex-start;
    width: 100%; /* Adjust this to change content width */
    flex-grow: 1; /* Allows this item to grow and take any available space */
    background-color: black;
}

#gameContainer {
    /* Your game container styles, width and height */
    width: calc(100% - 800px);
    height: calc(100% - 400px);
    margin: 200px auto;
    background-color: black;
    flex-shrink: 0; /* Prevents flexbox from shrinking this item */
}

#sidebar-left, #sidebar-right {
    /* Your sidebar styles, width, etc. */
    background-color: black;
}

/* Add media queries for responsive design as necessary */