:root {
  --spacing: 2rem;
  --max-speedo-width: 400px;
}

code {
  font-family: "Courier New", Courier, monospace;
}

.tab-content a,
.tab-content a:hover {
  color: #117e68;
  text-decoration-line: underline;
}

.tab-content a {
  text-decoration-style: dotted;
}

.tab-content a:hover {
  text-decoration-style: solid;
}

.tab-content {
  padding: 0 var(--spacing);
}

.vis-wrapper {
  display: flex;
  flex-direction: column;
  row-gap: var(--spacing);
  margin-top: var(--spacing);
  align-items: center;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  column-gap: calc(2 * var(--spacing));
  row-gap: 1rem;
  background-color: #222222;
  width: fit-content;
  padding: 0.5rem var(--spacing);
  font-weight: bold;
  font-size: 20px;
}

/* In browsers that support :has, hide legend when no speedometers showing */
body:has([id="data_speed-vis"]:empty) .legend {
  display: none;
}

.legend .last {
  color: red;
}

.legend .average {
  color: white;
}

[id="data_speed-vis"] {
  display: grid;
  column-gap: var(--spacing);
  row-gap: var(--spacing);
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  padding-bottom: var(--spacing);
}

[id="data_speed-vis"] > * {
  width: var(--max-speedo-width);
  max-width: 100%;
}

.tab-content [data-value="About"] {
  max-width: 80ch;
}

@media (max-width: 800px) {
  [id="data_speed-vis"] {
    grid-template-columns: repeat(2, auto);
  }
}

@media (max-width: 600px) {
  [id="data_speed-vis"] {
    grid-template-columns: repeat(1, auto);
  }

  .legend {
    width: var(--max-speedo-width);
    max-width: 100%;
    padding: 0.5rem calc(0.5 * var(--spacing));
    column-gap: var(--spacing);
    justify-content: space-between;
  }
}