.trainViewport {
    width: 100dvw;
    min-height: 100dvh;
    overflow: hidden;
    position: relative;
}
.trainBackground {
    width:100%;
    object-fit: contain;
}
@keyframes trainmove {
    from {
        left:100dvw;
    }
    to {
        left:0dvw;
    }
}
.trainContainer {
    position: absolute;
    top:27.5dvw;
    left:0dvw;
    width:100dvw;
    animation-duration:5s;
    animation-name:trainmove;
    animation-timing-function: ease-out;
}
.trainCar {
    float:left;
    position: relative;
    padding-left:1.5dvw;
    width:95dvw;
}
.trainCar img {
    object-fit: contain;
    width:100%;
}



#TrainButtonOne {
    left:5dvw;
}
#TrainButtonTwo {
    left:35dvw;
}
#TrainButtonThree {
    left:65dvw;
}

.trainButton,  .trainButton:link, .trainButton:visited {
    position:absolute;
    padding:0dvw;
    width:22dvw;
    top:38dvw;
    font-family: 'Newsreader', serif;
    font-size: 3dvw;
    text-align:center;
    background-color: black;
    color: white;
    margin:2dvw;
    padding:2.5dvw;
    /*border-style: solid;
    border-width:0.2dvw;
    border-color:white;*/
    border-radius:1dvw;
    text-decoration: none;
    box-shadow: 0dvw 0dvw 3dvw 1dvw darkgray;
    animation-duration:5s;
    animation-name:slowlyappear;
}

.titleText {
    position:absolute;
    top:10dvw;
    left:20dvw;
    font-family: 'Newsreader', serif;
    font-size: 7dvw;
    font-weight:500;
    color: black;
    text-shadow: 0dvw 0dvw 10dvw white;
}

@keyframes slowlyappear { 
    0% {
      opacity: 0;
    }

    40% {
        opacity: 0;
    }
  
    100% {
      opacity: 1;
    }
  }