/* Responsive tweaks */

/* Lock body to height of iframe */
html, body {
    height: 100%;
    overflow: hidden; /* Prevents scrollbars inside the iframe */
}

/* Turn main container into vertical flex column */
.container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* Target wrapper div of h2 and svg and allow flex children to shrink below content size */
.container > div:nth-of-type(1) {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 0;
}

/* Allow SVG container to expand/shrink dynamically */
.responsive-svg-container {
    width: 100%;
    max-width: 1200px;
    flex-grow: 1;
    min-height: 0; 
    display: flex;
    align-items: center; /* Centers the chart vertically */
    justify-content: center;
}

/* 5. Force SVG to obey new flex constraints */
#line-chart,
#line-chart svg {
    width: 100%;
    height: 100%;
    max-height: 100%;
}

.responsive-svg-container.small {
  margin: 0 auto;
  max-width: 30rem;
}