.chart-container {
     width: 100%;
     max-width: 600px;
     /* Set a maximum width */
     height: 400px;
     /* Adjust height to ensure space for the description */
     background-color: #fff;
     padding: 10px;
     /* Reduced padding */
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     border-radius: 8px;
     text-align: center;
     display: flex;
     flex-direction: column;
     /* Stack content vertically */
     justify-content: space-between;
     /* Space out the contents */
 }

 .chart-container h1 {
     font-size: 18px;
     /* Smaller font size */
     color: #333;
     margin-bottom: 10px;
 }

 .chart-container canvas {
     margin: 0 auto;
     flex-grow: 1;
     /* Allow canvas to take up available space */
     width: 100%;
     max-height: 280px;
     /* Ensure the canvas does not take too much height */
 }

 .chart-container .chart-description {
     font-size: 12px;
     /* Smaller font size */
     color: #555;
     margin-top: 10px;
     margin-bottom: 0;
     /* Remove any bottom margin */
     padding-top: 5px;
     /* Add some padding to separate it from the canvas */
     border-top: 1px solid #eee;
     /* Optional: Add a light border to separate from the chart */
 }