html {
  font-size: 18px;
  font-family: 'Courier Prime', monospace;
}

body {
  width: 364px;
  margin: 0 auto;
  margin-top: 24px;
}

#bus-screen-pin {
  font-size: 24px;
  vertical-align: middle;
  margin-left: -4px;
}
#dream-destination {
  width: 228px;
  margin-left: -7px;
  height: 24px;
  font-size: 16px;
  font-family: 'Courier Prime', monospace;
}
#refresh-destination {
  font-size: 16px;
  vertical-align: middle;
  margin-left: -12px;
  padding: 4px 6px;
  user-select: none;
}

#refresh-destination:hover {
  cursor: pointer;
}
#start-screen {
  border: 1px solid #989898;
  padding: 48px 32px;
  margin: 0 auto;
}

#go {
  font-size: 24px;
  font-family: 'Courier Prime', monospace;
  width: 100%;
  padding: 12px 20px;
  background-color: #0000EE;
  border: 1px solid #0000EE;
  color: white;
  margin-top: 28px;
}

#go:hover {
  cursor: pointer;
  background-color: white;
  color: #0000EE;
  border: 1px solid #0000EE;
}

#bus-screen {
  margin: 0 auto;
  margin-top: 12px;
}

#bus-screen-destination {
  color: blue;
  font-weight: 700;
  font-size: 14px;
}

#caught-bus-container {
  font-size: 18px;
  margin-top: 12px;
  text-align: center;
  padding-bottom: 20px;
}

#missed-the-bus {
  margin-top: 36px;
  visibility: hidden;
  color: red;
}

#sudden-delay {
  color: red;
  margin-top: 36px;
  display: none;
}

#random-time {
  white-space: nowrap;

}
#caught-the-bus {
  display: none;
  color: green;
}

#bus-screen, #run, #walk, #replay {
  display: none;
}

#home, #bus, #bus-stop {
  font-size: 28px;
}

#bus-stop {
  margin-left: 2px;
}

#bus {
  text-align: right;
  opacity: 0;
}
#departures {
  color: #989898;
  font-size: 14px;
  margin-top: 4px;
}
button {
  font-family: 'Courier Prime', monospace;
}

.button-container {
  margin-top:24px;
}

.button-container button {
  background-color: white;
  border: 1px solid #0000EE;
  color: #0000EE;
  padding: 20px 16px;
  width: 364px;
  margin-top: 16px;
  font-size: 14px;
}

.button-container, button, #road-container, #footer, #refresh-destination {
  touch-action: manipulation;
}
.button-container button:hover {
  background-color: #0000EE;
  border: 1px solid #0000EE;
  color: white;
  cursor: pointer;
}

#min-walk {
  margin-top: 24px;
  font-size: 14px;
}

#you {
  margin-bottom: -24px;
}

#footer {
  font-size: 14px;
  text-align: center;
  margin-top: 36px;
  padding-bottom: 8px;
}
#replay {
  background-color: white;
  border: 1px solid green;
  color: green;
}

#replay:hover {
  background-color: green;
  border: 1px solid green;
  color: white;
}

.emph {
  font-weight: 700;
}

.deemph {
  color: #989898;
  font-size: 14px;
}

.time-animation {
	animation: 2s ease-out 0s 1 slideFadeUp;
  animation-fill-mode: both;
  color: red;
  font-weight: 700;
  user-select: none;
  pointer-events: none;
  background-color: yellow;
  position: absolute;
}

.time-animation:hover {
  cursor: pointer;
}

.red-text {
  color: red !important;
}

.green-text {
  color: green !important;
}

.yellow-highlight {
  color: black;
  animation: 1s ease-in 0s 1 colorChangeNeutral;
}

.change-color-on-time {
  color: green;
  animation: 1s ease-in 0s 1 colorChangeOnTime;
}

.change-color-delayed {
  color: red;
  animation: 1s ease-in 0s 1 colorChangeDelayed;
}

.change-color-early {
  color: chocolate;
  animation: 1s ease-in 0s 1 colorChangeEarly;
}

.fade-away {
  animation: 2s ease-in 0s 1 fadeAway;
}

@keyframes slideFadeUp {
	0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-100%);
    opacity: 0;
  }
}

@keyframes fadeAway {
	0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes colorChangeNeutral {
	0% {
    color: blue;
    background-color: yellow;
  }
  100% {
    color: black;
    background-color: none;
  }
}

@keyframes colorChangeOnTime {
	0% {
    color: blue;
    background-color: yellow;
  }
  100% {
    color: green;
    background-color: none;
  }
}

@keyframes colorChangeDelayed {
	0% {
    color: blue;
    background-color: yellow;
  }
  100% {
    color: red;
    background-color: none;
  }
}

@keyframes colorChangeEarly {
	0% {
    color: blue;
    background-color: yellow;
  }
  100% {
    color: chocolate;
    background-color: none;
  }
}