#noticeboardandreader {
  display: flex;
  justify-content: flex-end;
}

#trains {
    display: block;
    overflow: hidden; /* Hide the part of the image that moves off-screen */
    position: relative;
    width: 100%; /* Set the width to fit the screen */
    height: 80px; /* Adjust height as needed */
    text-align: center;
    cursor: url("/traingame/pointer.png"), auto;
}

#oyster {    
    touch-action: manipulation;
}

#trains img {
    display: inline-block; /* Ensure images are laid out horizontally */
    width: auto;
    height: auto; /* Adjust height as needed */
    position: absolute;
    left: 50%;
    /* animation: scrollRight 200s ease-in-out infinite; */
    animation: '';
    margin: 0;
    font-family: 'Underground';
    margin:0px;
    margin-top: -10px; 
    transform: translateX(-350%) scale(1.2);
}


#platformcontainer {

    display: flex; 
    align-items: centre; 
    justify-content: space-between; 
    gap: 5px; 
    margin-top: 5px; 
    
}

#noticeboardandplatform {
    transform: translateY(-200%);
    transition: transform 2s ease;

}

#trainplatform {

    margin-top:5px; 
    width:630px; 
    border: 1px solid black; 
    background-image:url('/traingame/brixtonplatform.png');

}

/* train noticeboard  */

#noticeboardcontainer {
    width:630px; 
    display: flex; 
    justify-content: center; 
    align-items:flex-start; 
    gap: 5px; 
    margin-top: 5px; 
    cursor: url('/traingame/pointer.png'), auto;
    overflow:hidden;
    display: block;

}

#muteButton {
  margin-right: 13px;

}

#noticeboard {

    padding: 6px; 
    width: 100%; 
    font-family: 'Underground'; 
    color: #D49A14; 
    background-color: #000000; 
    border:3px solid #4b4949; 
    font-size:9pt;
}

#traintimes {
    display: flex; 
    align-items: centre; 
    justify-content: space-between
}

#clock {
    text-align: center; 
    margin-top: 5px

}

#victoria-status {
    margin-top: 5px
}

#live {
    font-size: xx-small; 
    font-family: Underground; 
    color: green
}

#muteButton {
    font-family: Underground; 
    font-size: xx-small;
}

#debugcontent {
    display: none
}


#cardreadercontainer {
  width: 630px; 
  display: flex; 
  align-items: centre; 
  justify-content: left;
  transform: translateY(-300%);
  transition: transform 2s ease;

}

/* animations  */

@keyframes trainArrive {
  0% {
    transform: translateX(-350%) scale(1.2);
  }
  100% {
    transform: translateX(-50%) scale(1.2);
  }
}

@keyframes trainDepart {
  0% {
    transform: translateX(-50%) scale(1.2);
  }
  100% {
    transform: translateX(400%) scale(1.2);
  }

}

@keyframes grow {
  0% { transform: scale(1);}
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

@keyframes phoneFlash {
  0% { transform: scale(1);}
  50% { transform: scale(1.30); }
  100% { transform: scale(1); }
}