/*
 * Custom CSS
 */

 :root {
    --bs-body-bg: var(--bs-gray-100);
  }

  @font-face {
    font-family: Fira;
    src: url(fonts/FiraSansCondensed-ExtraLight.ttf) format("ttf");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: Transit;
    src: url(fonts/TransitWeb.woff) format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: Transit;
    src: url(fonts/TransitWeb-Bold.woff) format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: Transit;
    src: url(fonts/TransitWeb-Black.woff) format("woff");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: Transit Italic;
    src: url(fonts/TransitWeb-BoldItalic.woff2) format("woff2"),
         url(fonts/TransitWeb-BoldItalic.woff) format("woff");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
  }

body {
  font-family: Transit, sans-serif;
}

  
  table tr {
    /* height: calc(19vh - 11px); */
    padding: 0; 
    margin: 0;
  }
  
  table td {
    vertical-align: middle;
    padding: 0; 
    margin: 0;
  }
  

.tram-cell {
  font-size: 12vh; 
  text-align: start;
  width: 12%;
}

.direction-cell {
    font-size: 6vh; /* set line-height to match the height of the images in column one */
    text-align: start;
    width: 56%;
  }

  .time-cell {
    font-size: 12vh;
    text-align: center;
    width: 22%;
  }

  .img-cell {
    text-align: center;
    width: 10%;
  }

.tram-img{
    height: 12vh;
}

.navbar { 
    max-height: 50px;
}

/* 
#tram-counter {
    animation: blink 1.7s infinite;
}
*/

#occupancy-image{
  vertical-align: 0em;
}

@keyframes blink {
  0% {
      opacity: 1;
  }
  50% {
      opacity: 0;
  }
  100% {
      opacity: 1;
  }
}

@keyframes animate {
  0% {
    background-color: #7c7a7a;
    color: white;
  }
  50% {
    background-color: #ffff3be8;
    color: black;
  }
  100% {
    background-color: #7c7a7a;
    color: white;
  }
}

.time-cell.animate {
  animation: animate 4s infinite;
}



@keyframes changeLetter {
  0% {
    content: "NOW";
  }
  50% {
    content: "JETZT";
  }
  100% {
    content: "NOW";
  }
}

.now.animate::after {
    animation: changeLetter 4s infinite;
    display: inline;
    content: "NOW";
}