svg#radar {
  max-width: 100%;
  margin: 0 auto;
  display: block;
}

@media screen and (min-width: 1300px) {
  svg#radar {
    max-height: 100vh;
    position: relative;
    z-index: 10;
  }
}

#title {
  font-family: var(--font-graph);
  font-size: 2.5rem;
  font-weight: bold;
  fill: var(--color-accent);
}
#date {
  font-family: var(--font-graph);
  font-size: 1rem;
  fill: var(--color-lowaccent);
}
#footer {
  font-family: var(--font-graph);
  font-size: 0.7rem;
  fill: var(--color-lowaccent);
}

#tooltip {
  opacity: 0;
  pointer-events: none;
  user-select: none;
}
#tooltip > rect {
  fill: #333;
}
#tooltip > text {
  fill: #fff;
  font-size: 10px;
  font-family: sans-serif;
}
#tooltip > path {
  fill: #333;
}

#grid > circle {
  fill: none;
  stroke-width: 1;
}
#grid > text {
  opacity: 0.35;
  font-family: var(--font-graph);
  font-size: 42px;
  font-weight: bold;
  pointer-events: none;
  user-select: none;
}

.point > text {
  fill: #fff;
  font-family: var(--font-graph);
  font-size: 8px;
  pointer-events: none;
  user-select: none;
}