body {
  color: black;
  background-color: white;
  min-width: 1200px;
}
@media (prefers-color-scheme: dark) {
  body {
    color: white;
    background-color: black;
  }
}

.data-label-text {
  /* color provided programmatically in element attribute */
  font-size: 4pt;
  text-shadow: 0 0 5px white, 0 0 5px white, 0 0 8px white, 0 0 8px white;
}
@media (prefers-color-scheme: dark) {
  .data-label-text {
    text-shadow: 0 0 5px black, 0 0 5px black, 0 0 8px black, 0 0 8px black;
  }
}

.data-line {
  /* color provided programmatically in element attribute */
  fill: none;
  stroke-width: 1px;
}

.grid-label-text {
  font-size: 3pt;
}
@media (prefers-color-scheme: dark) {
  .grid-label-text {
    fill: white;
  }
}

.grid-label-text-midnight {
  font-size: 4pt;
}
@media (prefers-color-scheme: dark) {
  .grid-label-text-midnight {
    fill: white;
  }
}

.grid-line {
  stroke: lightgray;
  stroke-width: 0.2px;
}
@media (prefers-color-scheme: dark) {
  .grid-line {
    stroke: darkgray;
  }
}

.grid-line-vert-midnight {
  stroke: lightgray;
  stroke-width: 0.5px;
}
@media (prefers-color-scheme: dark) {
  .grid-line-vert-midnight {
    stroke: darkgray;
  }
}

.current-hour-highlight {
  fill: black;
  opacity: 10%;
}
@media (prefers-color-scheme: dark) {
  .current-hour-highlight {
    fill: white;
    opacity: 20%;
  }
}

.chart-title {
}
@media (prefers-color-scheme: dark) {
  .chart-title {
    color: white;
  }
}

.weathercondition-marker {
  stroke: black;
  stroke-width: 0.5px;
  fill: none;
}
@media (prefers-color-scheme: dark) {
  .weathercondition-marker {
    stroke: white;
  }
}

.weathercondition-label {
  font-size: 3pt;
}
@media (prefers-color-scheme: dark) {
  .weathercondition-label {
    fill: white;
  }
}

:root {
  --color-temperature: purple;
  --color-apparent-temperature: red;
  --color-relative-humidity: green;
  --color-probability-of-precipitation: blue;
  --color-quantitative-precipitation: darkgreen;
  --color-snowfall-amount: purple;
  --color-sky-cover: gray;
  --color-wind-speed: goldenrod;
  --color-wind-gust: peru;
}
@media (prefers-color-scheme: dark) {
  :root {
    --color-temperature: orchid;
    --color-apparent-temperature: red;
    --color-relative-humidity: green;
    --color-probability-of-precipitation: deepskyblue;
    --color-quantitative-precipitation: forestgreen;
    --color-snowfall-amount: purple;
    --color-sky-cover: gray;
    --color-wind-speed: goldenrod;
    --color-wind-gust: peru;
  }
}