body {
  font-family: 'Roboto', sans-serif;
  text-align: center;
  margin: 0;
}

.trim {
  color: white;
  font-size: 200%;
  background-color: purple;
  padding: 20px;
  box-shadow: 0 5px 5px #888888;
}

nav {
  box-shadow: 0 1px 5px #888888;
  padding: 10px 0 10px;
}

nav a {
  color: purple;
  padding: 5px 15px;
  margin: 0px 20px;
  text-decoration: none;
}

nav a.selected {
  color: white;
  border-radius: 10px;
  background-color: purple;
}

.h1, .destinations, .destination, .trim {
  margin: 0 auto;
}

.walktime {
  font-size: 150%;
}

.no-trains {
  margin: 20px;
  font-size: 175%;
}

.service-direction {
  font-size: 175%;
  margin-top: 30px;
}

.destination, .service {
  width: 50%;
  max-width: 600px;
  padding: 10px 10px 30px 10px;
  margin: 10px 10px 0;
  border: 2px solid black;
  display: inline-block;
}

.destination-name, .service-name {
  font-size: 160%;
  padding-bottom: 20px;
  margin: 10px;
}

.destination .time, .train {
  color: white;
  padding: 20px;
}

.destination .time {
  margin: 10px;
}

footer {
  text-align: center;
  position: absolute;
  bottom: 0;
}

.credit {
  margin-top: 10px;
}

@media only screen and (min-device-width: 737px) {
  .train {
    margin: 10px;
  }

  .destination .time.blue, .train.blue {
    background-color: blue;
  }

  .destination .time.green, .train.green {
    background-color: green;
  }

  .destination .time.yellow, .train.yellow {
    background-color: orange;
  }

  .destination .time.red, .train.red {
    background-color: red;
  }
}

@media only screen and (max-device-width: 736px) {
  .destination, .service {
    width: 90%;
  }

  .destination:last-of-type, .service:last-of-type {
    margin-bottom: 10px;
  }

  .destination-name, .service-name {
    color: white;
  }

  .destination.blue, .service.blue{
    background-color: blue;
  }

  .destination.green, .service.green {
    background-color: green;
  }

  .destination.yellow, .service.yellow {
    background-color: orange;
  }

  .destination.red, .service.red {
    background-color: red;
  }

  .time:first-of-type {
    font-size: 160%;
  }

  .train:first-of-type {
    font-size: 130%;
  }

  .credit {
    display: none;
  }
}