div.tooltip {
    position: absolute;
    text-align: center;
    padding: 0.5rem;
    background: #ffffff;
    border: 1px solid #313639;
    border-radius: 8px;
    pointer-events: none;
    font-size: 12pt;
  }
body {
    font-family: Sans-serif;
    font-size: 12pt;
    background-color: rgb(153, 205, 153);
}

/* make .mapslider a flexbox so everything is on the same row */
.map-pie {
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* credits center it horizontally */
.credits {
    background-color: lightblue;
}

.piecharts {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
/* if the screen is too small then let piecharts become a column */
@media (max-width: 1500px) {
    .piecharts {
        flex-direction: column;
    }
}

/* make piechart div a column flexbox and align items in the center */
.piechartdiv {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.header-row {
    display: flex;
    /* add margin and padding between items */
    justify-content: space-between;
}

.credits-under {
    display: flex;
    justify-content: space-between;
    margin: 10px;
    margin-right: 50px;
}