@media (orientation: landscape) {
  :root {
    --unit-size: 1vh;
  }
}

@media (orientation: portrait) {
  :root {
    --unit-size: 1vw;
  }
}

body {
  background: black;
  color: white;
  font-family: "Arial", sans-serif;
  font-weight: bold;

  margin: 0;
}

#container {
  width: 100%;
}

body.view-new #trains {
  max-width: calc(85*var(--unit-size));
}

body.view-old #trains {
  width: 100%;
}

.train {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;

  margin: calc(2*var(--unit-size));
  /*margin-bottom: calc(5*var(--unit-size));*/
}

body.view-new .train {
  margin-bottom: calc(8*var(--unit-size));
}

.train * {
  align-self: center;
}

.train .logo {
  text-align: center;
}

body.view-old .train .logo {
  padding: calc(1*var(--unit-size));
  margin-right: calc(2*var(--unit-size));

  line-height: calc(11.5*var(--unit-size));
  width: calc(11.5*var(--unit-size));
  height: calc(11.5*var(--unit-size));
}

body.view-new .train .logo {
  padding: calc(0.25*var(--unit-size));
  margin: calc(1*var(--unit-size)) calc(1.5*var(--unit-size)) calc(1*var(--unit-size)) 0;

  line-height: calc(11*var(--unit-size));
  width: calc(11*var(--unit-size));
  height: calc(11*var(--unit-size));
}

.train .destination {
  flex-grow: 1;
}

body.view-old .train .destination {
  font-size: calc(6.75*var(--unit-size));
  margin-left: calc(2*var(--unit-size));
}

body.view-new .train .destination {
  font-size: calc(5.5*var(--unit-size));
  margin-bottom: calc(3*var(--unit-size));
}

.train .time {
  min-width: calc(19.25*var(--unit-size));
  margin: 0 calc(2*var(--unit-size));

  font-size: calc(6.5*var(--unit-size));
  text-align: left;
}