/* Choropleth CSS code */
body {
    font-family: sans-serif;
    background-color: wheat;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#mainHeader {
    margin: 0.3em 0;
}

h2 {
    font-size: medium;
}

#year {
    display: flex;
    margin-bottom: 1em;
}

#yearSlider {
    width: 20em;
}

#yearLabel {
    font-weight: bold;
    padding-left: 1em;
}

.selectorLabel {
    margin-right: 0.5em;
}

#hcSpan {
    margin: 0 1em;
}

#choropleth {
    background-color: white;
    border: solid;
    margin: 1em 0; /* Margin on the top and bottom of charts */
}

/* Position line chart in middle of screen */
#lineChart {
    position: fixed; /* Fixed position */
    background-color: white;
    border: solid;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding-right: 1%; /* Add some space between the right of the graph and the border */
}

/* Title for the line chart */
#lineChartHeader {
    padding: 0 1em; /* Add padding on the left and right of the title */
    text-align: center; /* Put the title in the middle of the chart */
}

/* Make lines look nicer */
.line {
  /* Make it actually a line */
  fill: none;
  /* Clear border */
  stroke: steelblue;
}

.linePoint {
    fill: white;
    stroke: steelblue;
}

footer {
    font-family: serif;
    color: rgb(70, 70, 70);
}