/* ============================================================================================== */
/* ==== Main */
/* ============================================================================================== */

@font-face {
  font-family: 'Dot Matrix Regular';
  src: url('Dot Matrix Regular.ttf');
}

* {
  font-family: 'Lucida Grande', Arial, sans-serif;
  box-sizing: content-box;
}

body {
  background-color: #333;
  padding: 0;
  margin: 0;
}

div#container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr auto;
  height: 100%;
}
div#container section {
  box-sizing: border-box;
  padding: 8px;
}

/* ============================================================================================== */
/* ==== Trains */
/* ============================================================================================== */

section#trains {
  grid-column: 1;
  grid-row: 1 / span 2;
  background-color: #111;
  color: white;
  overflow: hidden;
}

section#weather {
  grid-column: 2;
  grid-row: 1;
  background-color: #4871a3;
  display: grid;
  height: 100%;
  grid-template-rows: auto 1fr;
}

section#footer {
  grid-column: 2;
  grid-row: 2;
  background-color: #111;
  font-size: 12px;
}

/* ============================================================================================== */
/* ==== 1. Trains  */
/* ============================================================================================== */

#trains h3 {
  color: #888;
  padding: 0;
  margin: 8px 0 4px 0;
}

table.trains {
  width: 100%;
}

table.trains td:first-child {
  width: 60px;
}

table.trains td:nth-child(3) {
  width: 24px;
  text-align: center;
}

table.trains td:nth-child(4) {
  width: 96px;
}

table.trains td {
  font-family: 'Dot Matrix Regular', Andale Mono, monospace;
  font-size: 24px;
}

table.trains td.st {
  color: #8eafd7;
}

table.trains td.destination {
  color: white;
}

table.trains td.platform {
  color: #8f88a5;
}

table.trains td.on-time {
  color: #6ce169;
}

table.trains td.delayed {
  color: #ffda48;
}

table.trains td.cancelled {
  color: #ff7848;
}

table.trains tr.delay-reason td {
  font-family: 'Dot Matrix Regular', 'Tahoma', Arial, sans-serif;
  font-size: 17px;
  padding: 0 0 6px 0;
  color: #aaa;
}


/* ============================================================================================== */
/* ==== 2. Weather  */
/* ============================================================================================== */

#weather h3 {
  color: #fff;
  padding: 0;
  margin: 0 0 8px 0;
}

span#currentWind {
color: #bcdfff;
}

span#currentDateTime {
  color: #fff200;
  text-align: right;
  float: right;
}

#canvas-container {
  background-color: #6ce169;
  position: relative;
}

canvas#canvas-weather {
  background-color: #163860;
  box-sizing: border-box;
  position: absolute;
  width: 100%;
  height: 100%;
}

/* ============================================================================================== */
/* ==== 2. Legend  */
/* ============================================================================================== */

div#last-updates {
  background-color: #111;
  color: #999;
  margin-bottom: 4px;
}

#version {
  text-align: center;
  color: rgba(153, 204, 232, 0.61);
}

section#footer  {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
}

div#legend p {
  grid-column-start: auto;
  margin: 0;
  text-align: center;
}

div#last-updates span {
  color: #d2eecc;
}

div#last-updates span.time {
  color: #cde;
}

div.weather-selector {
  grid-column-start: auto;
  aspect-ratio: 1;
  height: 100%;
  color: #555;
  font-size: 36px;
  text-align: center;
  vertical-align: auto;
  cursor: pointer;
  user-select: none;
}