html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* Prevent scrolling on the body */
}

body {
    display: flex;
    flex-direction: column;
}

header, footer {
    text-align: center;
    position: absolute;
    width: 100%;
    left: 0;
    z-index: 10;
}

header {
    top: 0;
}

footer {
    bottom: 0;
}

main {
    position: absolute;
    top: 60px; /* Adjust based on header height */
    bottom: 40px; /* Adjust based on footer height */
    width: 100%;
    overflow: auto; /* Allow scrolling within main content */
    display: flex;
    flex-direction: column;
}

#controls {
    padding: 10px;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.canvas-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    scroll-behavior: smooth; /* Smooth scrolling for the canvases */
    overflow: auto; /* Allow scrolling within the canvas container */
}

canvas {
    flex-grow: 1;
    margin: 5px 0;
    /* Adjust height dynamically if necessary */
    border:solid 1px #000;
}

/* Ensure the canvases are not too small */
canvas:not(:last-child) {
    margin-bottom: 10px;
}