* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  position: relative;
}
*::before, *::after {
  content: "";
  display: block;
}

body {
  background-image: linear-gradient(to top, #e3f2fd 0, #e3f2fd 50%, #d9eefc 50%, #d9eefc 70%, #d0e9fc 70%, #d0e9fc 90%, #c6e5fb 90%);
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}

.gust {
  -webkit-animation-name: gust-movement;
          animation-name: gust-movement;
  -webkit-animation-duration: 18s;
          animation-duration: 18s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  background: #fafafa;
  box-shadow: -2px 2px #96adb7;
  width: 20rem;
  height: 5px;
  opacity: 0.75;
  position: absolute;
  -webkit-transform: translate(100rem, 0);
          transform: translate(100rem, 0);
  top: 25rem;
  z-index: 500;
}
.gust__1 {
  -webkit-animation-delay: 6s;
          animation-delay: 6s;
  top: 5rem;
}
.gust__2 {
  -webkit-animation-delay: 12s;
          animation-delay: 12s;
  top: 40rem;
}
.gust::before, .gust::after {
  background: #fafafa;
  box-shadow: -2px 2px #96adb7;
  width: 20rem;
  height: 5px;
  position: absolute;
}
.gust::before {
  bottom: -3rem;
  left: -6rem;
}
.gust::after {
  top: -2rem;
  left: -4rem;
}

.sun {
  border-left: 3rem solid transparent;
  border-right: 3rem solid #fff176;
  border-top: 3rem solid #fff176;
  border-bottom: 3rem solid transparent;
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
}
.sun::before, .sun::after {
  position: absolute;
}
.sun::before {
  border-left: 6rem solid transparent;
  border-right: 6rem solid #fff490;
  border-top: 6rem solid #fff490;
  border-bottom: 6rem solid transparent;
  top: -3rem;
  right: -3rem;
  z-index: -5;
}
.sun::after {
  border-left: 9rem solid transparent;
  border-right: 9rem solid #fff6a9;
  border-top: 9rem solid #fff6a9;
  border-bottom: 9rem solid transparent;
  top: -3rem;
  right: -3rem;
  z-index: -10;
}

.bridge {
  bottom: 15rem;
  left: 0;
  right: 0;
  margin: 0 auto;
  position: absolute;
  width: 100%;
  height: 20rem;
  z-index: 100;
}

.rail {
  border-top: 0.25rem solid #adadad;
  bottom: 2.5rem;
  position: absolute;
  height: 1.5rem;
  width: 100%;
}

.train {
  -webkit-animation-name: train-movement;
          animation-name: train-movement;
  -webkit-animation-duration: 25s;
          animation-duration: 25s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  border-left: 0.25rem solid transparent;
  border-top: 1.25rem solid #e15d5d;
  border-right: 0.25rem solid transparent;
  width: 5rem;
}
.train div {
  width: 1rem;
  border-left: 0.05rem solid transparent;
  border-top: 0.5rem solid #6cbbf5;
  border-right: 0.05rem solid transparent;
  top: -1rem;
  right: 0rem;
  position: absolute;
  z-index: 1;
}
.train::before, .train::after {
  border-left: 0.25rem solid transparent;
  border-right: 0.25rem solid transparent;
  top: -1.25rem;
  position: absolute;
}
.train::before {
  border-bottom: 1.25rem solid #dd4848;
  width: 2rem;
  right: 1rem;
}
.train::after {
  border-bottom: 1.25rem solid #e15d5d;
  width: 1rem;
  right: 2.75rem;
}

.deck {
  background: #b0bec5;
  border-top: 0.25rem solid lightgray;
  border-bottom: 0.5rem solid lightgray;
  width: 100%;
  height: 2.5rem;
  bottom: 4rem;
  position: absolute;
  z-index: 0;
}
.deck::before, .deck::after {
  position: absolute;
  width: 100%;
}
.deck::before {
  background: #b6c3c9;
  border-top: 2px solid #ededed;
  width: 100%;
  height: 50%;
}
.deck::after {
  background: rgba(55, 71, 79, 0.2);
  bottom: -6rem;
  height: 3.5rem;
}

.car-emitter {
  height: 50%;
  width: 150%;
  left: -25%;
  padding-top: 2px;
}
.car-emitter#rtl .car {
  -webkit-animation-direction: normal;
          animation-direction: normal;
}

.car {
  -webkit-animation-name: car-movement;
          animation-name: car-movement;
  animation-direction: reverse;
  -webkit-animation-duration: 30s;
          animation-duration: 30s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  height: 100%;
  width: 3rem;
  position: absolute;
}
.car::before {
  -webkit-animation-name: car-variation;
          animation-name: car-variation;
  -webkit-animation-duration: 20s;
          animation-duration: 20s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  border-left: 0.25rem solid transparent;
  border-right: 0.25rem solid transparent;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 0;
  height: 0;
}
.car.red::before {
  border-bottom: 0.5rem solid #e57373;
}
.car.blue::before {
  border-bottom: 0.5rem solid #7986cb;
}
.car.teal::before {
  border-bottom: 0.5rem solid #4db6ac;
}
.car.orange::before {
  border-bottom: 0.5rem solid #ffb74d;
}
.car.white::before {
  border-bottom: 0.5rem solid #fafafa;
}
.car.silver::before {
  border-bottom: 0.5rem solid #9e9e9e;
}
.car.black::before {
  border-bottom: 0.5rem solid #424242;
}
.car.yellow::before {
  border-bottom: 0.5rem solid #fff176;
}
.car.burntorange::before {
  border-bottom: 0.5rem solid #ff7043;
}
.car.xs::before {
  width: 0.5rem;
}
.car.s::before {
  width: 1rem;
}
.car.m::before {
  width: 1.5rem;
}

.pylon-row {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 50;
}
.pylon-row__back {
  z-index: -50;
  left: 3rem;
  top: -2rem;
}

.pylon {
  width: 500px;
  height: 300px;
}
.pylon svg polygon {
  stroke: #fafafa;
}
.pylon svg line {
  stroke: #CFD8DC;
}
.pylon::before, .pylon::after {
  left: 0;
  right: 0;
  margin: 0 auto;
  position: absolute;
}
.pylon::before {
  background: #546e7a;
  border-right: 0.5rem solid #698998;
  box-shadow: 3px -1px #546e7a;
  width: 0.5rem;
  height: 20rem;
  z-index: 1;
}
.pylon::after {
  border-left: 1rem solid transparent;
  border-right: 1rem solid transparent;
  border-bottom: 3rem solid #37474f;
  position: absolute;
  width: 0;
  height: 0;
  bottom: -2rem;
  z-index: 2;
}

.water {
  background: #64b5f6;
  position: absolute;
  bottom: 0;
  height: 18rem;
  width: 100%;
}
.water svg pattern polygon {
  fill: #64b5f6;
}
.water svg pattern polygon:nth-of-type(1), .water svg pattern polygon:nth-of-type(3) {
  fill: #5fb3f6;
}
.water svg pattern polygon:nth-of-type(2) {
  fill: #69b7f6;
}
.water svg pattern polygon:nth-of-type(6), .water svg pattern polygon:nth-of-type(4) {
  fill: #6ebaf7;
}
.water svg pattern polygon:nth-of-type(5) {
  fill: #5ab0f5;
}

@-webkit-keyframes car-variation {
  33% {
    -webkit-transform: translate(1.5rem);
            transform: translate(1.5rem);
  }
  66% {
    -webkit-transform: translate(-1.5rem);
            transform: translate(-1.5rem);
  }
}

@keyframes car-variation {
  33% {
    -webkit-transform: translate(1.5rem);
            transform: translate(1.5rem);
  }
  66% {
    -webkit-transform: translate(-1.5rem);
            transform: translate(-1.5rem);
  }
}
@-webkit-keyframes car-movement {
  to {
    -webkit-transform: translateX(120rem);
            transform: translateX(120rem);
  }
}
@keyframes car-movement {
  to {
    -webkit-transform: translateX(120rem);
            transform: translateX(120rem);
  }
}
@-webkit-keyframes train-movement {
  0% {
    -webkit-transform: translate(-6rem, 0);
            transform: translate(-6rem, 0);
  }
  50%,
	100% {
    -webkit-transform: translate(calc(100vw + 6rem), 0);
            transform: translate(calc(100vw + 6rem), 0);
  }
}
@keyframes train-movement {
  0% {
    -webkit-transform: translate(-6rem, 0);
            transform: translate(-6rem, 0);
  }
  50%,
	100% {
    -webkit-transform: translate(calc(100vw + 6rem), 0);
            transform: translate(calc(100vw + 6rem), 0);
  }
}
@-webkit-keyframes gust-movement {
  0% {
    -webkit-transform: translate(100rem, 0);
            transform: translate(100rem, 0);
  }
  50%,
	100% {
    -webkit-transform: translate(-25rem, 0);
            transform: translate(-25rem, 0);
  }
}
@keyframes gust-movement {
  0% {
    -webkit-transform: translate(100rem, 0);
            transform: translate(100rem, 0);
  }
  50%,
	100% {
    -webkit-transform: translate(-25rem, 0);
            transform: translate(-25rem, 0);
  }
}

/*
     FILE ARCHIVED ON 03:42:44 Jan 07, 2022 AND RETRIEVED FROM THE
     INTERNET ARCHIVE ON 04:41:28 Sep 20, 2024.
     JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE.

     ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
     SECTION 108(a)(3)).
*/
/*
playback timings (ms):
  captures_list: 0.511
  exclusion.robots: 0.018
  exclusion.robots.policy: 0.008
  esindex: 0.012
  cdx.remote: 19.234
  LoadShardBlock: 117.859 (3)
  PetaboxLoader3.datanode: 68.656 (4)
  PetaboxLoader3.resolve: 69.207 (2)
  load_resource: 101.062
*/