/* Reset */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Subway colors */

.color-a,
.color-c,
.color-e {
  background: #2850ad;
}

.color-b,
.color-d,
.color-f,
.color-m {
  background: #ff6319;
}

.color-g {
  background: #6cbe45;
}

.color-j,
.color-z {
  background: #996633;
}

.color-l {
  background: #a7a9ac;
}

.color-n,
.color-q,
.color-r,
.color-w {
  background: #fccc0a;
  color: #0b0b0b !important;
}

.color-s {
  background: #808183;
}

.color-1,
.color-2,
.color-3 {
  background: #ee352e;
}

.color-4,
.color-5,
.color-6 {
  background: #00933c;
}

.color-7 {
  background: #b933ad;
}

/* Layout */

body {
  display: grid;
  grid-template-rows: min-content auto;
  gap: 1vw;

  width: 100svw;
  height: 100svh;
  margin: 0 auto;
  padding: 1.5vw;

  background: #0b0b0b;
  color: #ffffff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

  cursor: none;
}

.header {
  display: flex;
  justify-content: flex-end;

  padding: 2vw;
}

.main {
  display: grid;
  grid-template-columns: min-content auto;
  grid-template-rows: min-content;
  grid-auto-rows: 1fr;
  gap: 1vw;
}

/* Clock */

.time {
  align-content: center;

  font-size: 3vw;
}

.time_bold {
  font-weight: 900;
}

.time_thin {
  font-weight: 500;
}

/* Trains header */

.trains_header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2vw;

  padding: 2vw;

  background: #303030;
  border-radius: 0.5vw;
}

.trains_header_spacer:empty,
.trains_header:empty {
  padding: 0;
}

.trains_header_stop_name {
  width: 8vw;

  color: #ddd;

  font-size: 2.25vw;
  font-weight: 800;
  text-align: center;
}

/* Stop name */

.stop_name {
  padding: 2vw;

  color: #ddd;
  background: #303030;
  border-radius: 0.5vw;

  font-size: 2.25vw;
  font-weight: 800;
  text-align: right;
  writing-mode: vertical-rl;

  transform: rotate(180deg);
}

/* Trains container */

.trains {
  display: flex;
  flex-direction: column;
  gap: 1vw;
}

/* Train row */

.train {
  display: grid;
  grid-template-columns: auto;
  grid-auto-flow: column;
  grid-auto-columns: min-content;
  align-items: center;
  gap: 2vw;

  min-height: min-content;
  flex: 1 0 auto;

  padding: 1vw 2vw;

  background: #1a1a1a;
  border-radius: 0.5vw;
}

.train_name {
  display: flex;
  gap: 1.5vw;

  min-width: 0;
  margin: auto 0;
}

.train_bullet {
  display: grid;
  place-items: center;

  width: 5.5vw;
  height: 5.5vw;
  flex: 0 0 5.5vw;
  margin: auto 0;

  border-radius: 50%;
  color: #ffffff;

  font-size: 4vw;
  font-weight: 900;
}

.train_direction_container {
  display: flex;
  flex-direction: column;
  gap: 0;

  min-width: 0;
}

.train_direction {
  font-size: 3vw;
  font-weight: 900;
}

.train_destination {
  font-size: 2vw;
  font-weight: 800;
}

/* Train times */

.train_departure_time {
  font-size: 5.25vw;
  font-weight: 800;
  text-align: center;
}

.train_arrival_times {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 1.5vw;
}

.train_arrival_time {
  width: 8vw;

  color: #a0a0a0;

  font-size: 3vw;
  font-weight: 600;
  text-align: center;
}