style.css

 body {
  /* font-family: 'Source Sans Pro', sans-serif; */
  font-family: 'Roboto Mono', monospace;
  padding: 1em 3em;
}

body header {
  font-family: 'Roboto Slab', serif;
  font-size: large;
  /* text-align: center; */
}

.chart-title {
  font-family: 'Roboto Mono', monospace;
}

select {
  font-family: 'Roboto Mono', monospace;  
}

#dashboard {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 1fr 1fr;
  column-gap: 2em;
  padding-top: 1em;
}
 
 .axis-label {
    font-size: 14px;
    fill: black;
    text-anchor: middle;
    font-family: 'Roboto Mono', monospace;
  }

  .tick {
    font-family: 'Roboto Mono', monospace;
  }
  
  .circles {
    pointer-events: all;
  }

  #explainer {
    grid-row-start: 1;
    grid-row-end: span 1;
  }

  #table {
    grid-row-start: 2;
    grid-row-end: span 2;
  }

  th {
    padding: 0 0.5em;
    color: white;
    background-color: black;
    font-size: 20px;
  }

  .fancy-text {
    color: black;
    background-color: yellow;
  }
  
  tr {
    border-bottom: solid 1px #d3d3d3;
    line-height: 1.75;
  }
  
  td {
    text-align: right;
    padding: 0 0.5em;
    color: black;
    background-color: gray;
  }

  .seven-range {
    fill: #FFFFCE;
  }
  
  .fifteen-range {
    fill: #faf2f2; 
  }

  :root {
    --annotation-context-color: #00796B;
    }

  svg .annotation.rect text {
    fill: var(--annotation-context-color);
    font-size: .6em;
    text-transform: uppercase;
  }

  svg .annotation.callout.rect path.subject{
    fill-opacity: .05;
  }

  svg .annotation.callout.rect path.subject {
    stroke: none;
  }

  .annotation-note-bg {
    fill: rgba(0, 0, 0, 0);
  }

  /* controls color of dashed line */
  .annotation path {
    stroke: var(--annotation-context-color);
  }

  .annotation:not(.above):not(.anomaly) path {
    stroke-dasharray: 1,3;
  }

  .annotation text {
    fill: var(--annotation-context-color);
  }