body {
    display: flex;
    overflow-x: auto; /* Allow scrolling left/right */
    justify-content: center;
    align-items: center;
    height: fit-content;
    margin: 0;
    background-color: #ececec;
    
    overflow-y: hidden; /* Prevent vertical scrolling */
}

.train-container {
    display: flex;
    overflow-x: auto; /* Enable horizontal scrolling */
    width: 100vw; /* Take full width of the viewport */
}

.rail-line {
    position: relative;
    top: 40px;
    width: max-content;  /* Ensures content does not get cut */
    min-width: 1000px;   /* Prevents it from shrinking */
    height: 500px;
    background: url('background_non_stopping_area.png') no-repeat center center;
    background-size: contain; /* Prevents background from being cut */
    white-space: nowrap; /* Ensures elements stay in a single row */
}

#train {
    position: absolute;
    top: 39%;
    left: 0;
    width: 56px; /* Increase width by 40% (40px * 1.4) */
    transform: translateY(-50%);
    transition: left 1s; /* Update transition time to 2 seconds */
}

.screen {
    width: 600px; /* Increase width by 40% (300px * 1.4) */
    height: 600px; /* Increase height by 40% (300px * 1.4) */
    margin-left: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0; /* Prevent shrinking when zooming */
}

#driverScreen {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Ensure the image is not distorted */
}