body {
    font-family: Arial, sans-serif;
    margin: 20px;
    text-align: center;
    padding-bottom: 150px; /* Adjust this value based on the height of your footer */
}

footer {
    position: fixed; /* Fixed positioning to keep the footer at the bottom */
    bottom: 0; /* Aligns the footer at the bottom */
    width: 98%; /* Ensures the footer spans the width of the viewport */
    height: 150px; /* Set the height of the footer */
}

footer img {
    width: 100%; /* Make the image fill the footer */
    height: 100%; /* Maintain aspect ratio */
    object-fit: cover; /* Cover the space without distorting the image */
}

.container {
    width: 100%; /* Ensures each container uses the full width */
}

.chart-container {
    display: flex; /* Enable flexbox */
    flex-wrap: nowrap; /* Prevent wrapping to a new line */
    justify-content: space-around; /* Distribute space around items evenly */
    align-items: center; /* Align charts vertically in the middle */
    width: 100%; /* Use 100% of the container width */
}

canvas {
    flex: 1 1 auto; /* Allows each canvas to grow and shrink as needed */
    max-width: 20%; /* Limits the width of each canvas to 20% of the container width */
    height: 400px; /* Set a fixed height */
    margin: 5px; /* Adds some space between charts */
}

h3 {
    color: #333; /* Dark grey color for the text */
    margin: 10px 0; /* Space above and below the title */
    text-align: left; /* Align text to the left */
}