:root {
  --main-bg: #222222;
  --main-bg-tr: #22222200;
  --main-fg: #dddddd;

  --gauge-width: 6%;
  --needle-width: 4px;

  /* better use attr if it works someday */
  --gauge-angle: 0deg;
}

body {
  background-color: var(--main-bg);
  color: var(--main-fg);
  font-family: sans-serif;
  text-align: center;
  margin: 0;
}

button {
  color: inherit;
  background: none;
  border: none;
  outline: none;
}
button:hover {
  filter: brightness(80%);
}
button:active {
  filter: brightness(50%);
}

h1 {
  font-size: 2.3rem;
}

#gauge-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

button.day {
  font-size: 3rem;
  padding: 1.5rem;
}
button.time {
  font-size: 3rem;
  font-weight: bold;
  padding: 1rem;
  margin: 0 .5rem;
}

#gauge {
  /* Make sure we keep a 1:1 aspect ratio */
  width: calc(100vw - 10rem);
  height: calc(100vw - 10rem);
  max-width: 25rem;
  max-height: 25rem;
  min-width: 15rem;
  min-height: 15rem;

  font: bold 2.2rem sans-serif;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  /* render a gauge in the background */
  background:
    radial-gradient(var(--main-bg) calc(68% - var(--gauge-width)), transparent calc(68% - var(--gauge-width) + 0.5%)),
    radial-gradient(transparent 68%, var(--main-bg) 68.5%),
    conic-gradient(green 0%, orange 30%, red 37%, var(--main-bg-tr) 47%, var(--main-bg-tr) 65%, red 75%, orange 88%, green);
  position: relative;
}

/* the needle on the gauge */
#gauge::after {
  content: "";
  position: absolute;
  width: var(--needle-width);
  height: 50%;
  top: 0;
  left: calc(50% - var(--needle-width)/2);

  background:
    linear-gradient(0deg, transparent calc(92% - var(--gauge-width)/0.7), var(--main-fg) calc(92% - var(--gauge-width)/0.7));
  transform: rotate(var(--gauge-angle));
  transform-origin: 50% 100%;
  backface-visibility: hidden; /* fix anti-aliasing issues in chrome */
}

#gauge > small {
  font-size: 1rem;
}

#graph {
  width: calc(100vw - 2rem);
  max-width: 40rem;
  height: 20rem;
  margin-top: 3rem;
}

#graph .line {
  stroke: var(--main-fg);
  stroke-width: 2px;
  fill: none;
}

#graph .axis {
  stroke: #999999;
  stroke-width: 1px;
  fill: none;
}

#graph .axis-mark {
  stroke: #444444;
  stroke-width: 1px;
  fill: none;
}

#graph .axis-mark.important {
  stroke: #555555;
  stroke-width: 2px;
}