html {
    font-size: 100%; /* Default 1rem = 16px */
    font-size: clamp(14px, 2vw, 16px); /* Scales with viewport */
}
body {
    margin: 0;
    padding: 0; /* Remove default margins/padding */
}

#top-level-container {
    width: 100%;
    max-width: 100vw; /* Use viewport width to override any max-width constraints */
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box; /* Prevent padding/margins from overflowing */
}

.chart {
    width: 100%;
    max-width: 100%;
    height: 60vh; /* Use viewport height for responsive scaling */
    min-height: 300px; /* Minimum height for smaller screens */
    max-height: 600px; /* Maximum height for larger screens */
    box-sizing: border-box;
}

#chart-description {
    margin: 0 1rem;
    margin-top: 2rem;
    font-family: Arial, sans-serif;
    width: 100%;
    box-sizing: border-box;
}

#lower-container {
    margin-left: 5rem;
    margin-right: 5rem;
}

/* Ensure tabs container is full-width */
#tabs {
    width: 100%;
    box-sizing: border-box;
}

/* Ensure tab content and chart divs are full-width */
.tab-content {
    width: 100%;
    box-sizing: border-box;
}