body {
  display: flex;
  flex-direction: row;
  height: 100vh;
  margin: 0;
  font-family: "Sofia Sans Condensed", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 3.75vh;
}

@media (aspect-ratio < 1.2) {
  body {
    flex-direction: column;
    font-size: 2vh;
  }
}

#departure-board {
  flex: 1 1 0;
  overflow-y: auto;
  padding: 12px;
}

#map {
  flex: 1 1 0;
  height: 100%;
}

div.departure-line {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

span.line {
  padding: 0.4em;
  font-weight: 800;
  font-size: 2em;
  color: rgb(88, 245, 138);
  background-color: rgb(41, 40, 67);
  align-content: center;
}

div.direction {
  flex: 1;
}

div.platform {
  color: rgb(147, 151, 143);
}

div.times {
  font-size: 2em;
  align-content: center;
  font-weight: 200;
}

div.direction:has(.tracking) + div.times {
  font-weight: 400;
}

#current-time {
  float: right;
  width: 3.1em;
  font-weight: 400;
  color: #777;
}

span.delay {
  display: inline-block;
  font-size: 0.85em;
  width: 1.4em;
  color: red;
  font-weight: 800;
}

span.tracking {
  display: inline-block;
  margin-right: 0.5em;
}

span.tracking-marker {
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  border-color: var(--marker-color);
  border-width: 2px;
  border-style: solid;
  background-color: var(--marker-color);
  margin-right: 0.2em;
  border-radius: 100%;
}

span.last-stop-info {
  display: inline-block;
  background-color: var(--last-stop-color);
  color: white;
  padding: 0.2em 0.5em;
  opacity: 0.7;
}