index.css

body {
  margin: 0;
  font-size: 62.5%;
  font-family: "Helvetica Neue", Helvetica;
}
h1 {
  font-size: 4em;
  margin-left: auto;
  margin-right: auto;
  width: 420px;
  color: rgb(176, 126, 75);
}
#chart {
  overflow: hidden;
  margin: auto;
  width: 800px;
}
#legend {
  position: relative;
  left: 365px;
  top: -430px;
  font-size: 1.5em;
  line-height: 1.2em;
  height: 0px;
}
#footer {
  position: fixed;
  bottom: 0px;
  right: 20px;
  font-size: 1.6em;
  line-height: 1.4em;
}
.Months + g .label {
  font-size: 1.5em;
  text-anchor: start;
  color: grey;
}
.Labels + g .label {
  font-size: 1em;
  font-weight: bold;
  text-anchor: start;
  margin-left: 10px;
}
.barGroup.DISTANCE {
  stroke: grey;
  stroke-width: 2px;
}
.barGroup.PACE {
  stroke: rgb(128,93,63);
  stroke-width: 2px;
}
.MIN_MARK_30 circle {
  fill: rgb(128,93,63);
}
.belt {
  stroke: rgba(128, 93, 63, 0.17);
  stroke-width: rgba(128, 93, 63, 0.17);
  fill: none;
}