#busPage #kello {
  font-size: 20vh;
}
#busPage .time-schedules {
  width: 100%;
  height: calc(100% - min(8vw, 14vh));
  align-self: flex-start;
  display: flex;
}
#busPage .left {
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  display: flex;
}
#busPage .right{
  flex-grow: 2;
  display: flex;
}

#busPage .bus {
  width: 50%;
  text-align: center;
  font-size: 6vh; 
  padding-top: 1em;
}
#busPage .stop {
  font-weight: bold;
}
#busPage .bus ul {
  padding-left: 0;
  margin-top: 0.5em;
  list-style-type: none;
}

#busPage .bus li {
  text-align: right;
}
#busPage .bus li.realtime {
  color: rgb(144, 238, 144);
}

#busPage .bus {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

@media (max-aspect-ratio: 14/10) {
  /* vertical display */
  #busPage #kello {
    font-size: 16vh;
  }
  #busPage .time-schedules {
    flex-direction: column;
  }
  #busPage .right{
    flex-grow: 1;
  }
  #busPage .bus {
    font-size: 5vw; 
    justify-content: flex-start;
    padding-top: 0;
    
  }
}

#busPage .explanations {
  position: fixed;
  bottom: 0;
  font-size: min(3vw, 5vh); 
  height: min(14vw, 20vh);
  width: 100%;
  text-align: center;
}
#busPage .explanation div {
  display: inline-block;
}
#busPage #walktime {
  margin-left: 0.3em;
}
#busPage #stopName {
  margin-left: 0.3em;
}
#busPage #color {
  display: block;
  clear: both;
}