styles.css

.desc-container{
    margin-bottom: 2em;
}
.tool-desc{
    text-align: justify;
}
#viewDiv{
    width: 100%;
    height: 100%;
}
.map-container{
    width: 100%;
    height: 600px;
}
.chart-container{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 600px;
    margin-top: 2em;
    margin-bottom: 5em;
}
.chart{
    height: 50%;
    display: flex;
    flex-direction: column;
}
.index-title{
    font-size: 16pt;
    font-weight: 900;
}
.chart-desc-hide{
    display: none;
}

.chart {
    width: 100%;
    position: relative;
    align-items: center;
}    
.chart-canvas {
    position: absolute;
    height: 200px;
    width: 100%;
}
footer{
    margin-top: 5em;
}

@media only screen and (min-width: 1200px) {
    .map-container{
        width: 50%;
    }
    .container{
        display: flex;
        flex-direction: row;
        gap: 2em;
    }
    .chart-container{
        width: 50%;
        margin-top: 2em;
    }
    footer{
        margin-top: 0em;
    }
    
}
#prompt-text{
    font-family: 'Courier New', Courier, monospace;
    font-size: 8pt;
    color: #666;
}
.chart-desc{
    font-size: 10pt;
}