:root {
  color-scheme: light dark;
  --primary-colour: CanvasText;
  --primary-background: Canvas;
  --hightlight-colour: red;
}

html,
body {
  height: 100%;
  font-family: system-ui, sans-serif;
  font-weight: normal;
  font-size: 3vh;
}

header {
  position: fixed;
  bottom: 85vh;
  left: 0;
  width: 100%;
  margin-bottom: 2vh;
}

#bearing {
  width: 100%;
  text-align: center;
  font-weight: 600;
  /* font-size: 10vh; */
  font-size: 4vh;
  margin-left: 0.33ch;
}

#bearing p {
  margin: 0;
}

p#bearing-value:after {
  content: "°";
}

#location {
  z-index: 20;
  position: fixed;
  background-color: var(--primary-background);
  color: var(--primary-colour);
}

@media (orientation: landscape) {
  #location {
    inset: 80vh 0 0 0;
    width: 70vw;
    height: 10vh;
    padding: 3vmin;
    margin: auto;
  }
}

@media (orientation: portrait) {
  #location {
    inset: 20vh 0 0 0;
    width: 80vw;
    height: 10vh;
    padding: 3vmin;
    margin: auto;
  }
}

#location table {
  width: 100%;
  text-align: center;
  font-weight: normal;
  font-size: larger;
}

#location th {
  font-weight: normal;
}

#location td {
  font-weight: 600;
}

#compass {
  /* transform: rotate(-285deg); */
  position: fixed;
  top: 15vh;
  left: -40vw;
  width: 180vw;
  height: 180vw;
  border-radius: 50%;
}

#compass-graphic line.degree {
  stroke: var(--primary-colour);
}

#compass-graphic text.degree,
#compass-graphic text.direction {
  fill: var(--primary-colour);
}

#compass-graphic line.north {
  stroke: var(--hightlight-colour);
}

#compass-graphic polygon.north,
#compass-graphic text.north {
  fill: var(--hightlight-colour);
}