.main {
  background-color: #202124;
  color: white;
  width: calc(min(1000px, 100% - 100px));
  display: flex;
  align-items: center;
  flex-direction: column;
  margin: 10px 0 50px 0;
  border-radius: 30px;
}
.container {
  position: absolute;
  top: 0;
  left: 0;
  align-items: center;
  flex-direction: column;
  display: flex;
  width: 100%;
  height: 100%;
  overflow: scroll;
}
body {
  height: 100%;
  background-color: #00538a;
  position: absolute;
  margin: 0;
  width: 100%;
  overflow: hidden;
}
.train-tracks {
  --tracks: #ffcc15;
  z-index: -1;
  position: relative;
  top: 0;
  background-image: repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 16px,
      /* gap above top rail */ var(--tracks) 16px,
      var(--tracks) 23px,
      /* top rail (14px tall) */ transparent 23px,
      transparent 51px,
      /* gap between rails */ var(--tracks) 51px,
      var(--tracks) 58px,
      /* bottom rail (14px tall) */ transparent 58px,
      transparent 110px /* gap to next track */
    ),
    repeating-linear-gradient(
      to right,
      transparent 0px,
      transparent 10px,
      var(--tracks) 10px,
      var(--tracks) 21px,
      transparent 21px,
      transparent 28px
    );

  /* Mask the crossties to only show within the track's vertical span */

  mask-image: repeating-linear-gradient(
    to bottom,
    transparent 20px,
    transparent 27px,
    /* above crossties */ black 27px,
    black 87px,
    /* crosstie visible zone */ transparent 87px,
    transparent 130px
  );
  background-position: 0px 20px;

  /* width: 100%; */
  height: 100%;
}
html {
  height: 100%;
  overflow: hidden;
}
      #map { width: 400px; height: 400px; }