body {
  margin: 0;
  font-family: sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f0f0f0;
}

svg {
  background: #f7f7f7;
}

.map-title {
  font-family: "DM Serif Display", sans-serif;
  font-size: 2.8rem;
  font-weight: 400;
  line-height: 1;
  fill: black;
  dominant-baseline: text-after-edge;
}

.map-subtitle {
  font-family: "DM Serif Display", sans-serif;
  font-size: 1.74rem;
  font-weight: 400;
  line-height: 1;
  dominant-baseline: text-after-edge;
}

.referenceText tspan {
  font-size: 0.775rem;
  fill: #949494;
  font-family: "DM Sans", sans-serif;
}

/* hyperlinks within the referenceText class */
.referenceText a {
  text-decoration: none;
  fill: #5a5a5a;
  cursor: pointer;
}

/* Change the appearance on hover */
.referenceText a:hover {
  fill: #222A71;
}

/* legend */
.legendText {
  font-size: 0.775rem;
  fill: #5a5a5a;
  font-family: "DM Sans", sans-serif;
}

.legend g.tick line {
  stroke: #f7f7f7;
  stroke-width: 1;
}

.legend .domain {
  stroke: #f7f7f7;
  stroke-width: 1;
}

.legend g.tick text {
  fill: #666;
  font-family: "DM Sans", sans-serif;
  font-size: 0.625rem;
}