.start-menu-carousel {
  position: absolute;
  height: 100vh;
  width: 100vw;
  left: 0;
  top:0;
}
.start-menu-carousel img {
  height: 100vh;
  width: auto;
}
@keyframes scroll-elm {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -10000000px 0;
  }
}

@keyframes player-running {
  from {
    left: 50%;
  }
  to {
    left: calc(50% - 10px);
    transform: translateX(0%);
  }
}

.start-menu-background {
  width: 100vw;
  position: absolute;
  left: 0;
}

.far-clouds {
  animation: scroll-elm 400000s linear infinite;
  /* background: url("../test-assets/start-menu/far-clouds.png") repeat-x;
  background-size: auto 100%; */
}

.near-clouds {
  animation: scroll-elm 350000s linear infinite;
  /* background: url("../test-assets/start-menu/near-clouds.png") repeat-x;
  background-size: auto 100%; */
}

.far-mountains {
  animation: scroll-elm 300000s linear infinite;
  /* background: url("../test-assets/start-menu/far-mountains.png") repeat-x;
  background-size: auto 100%; */
}

.mountains {
  animation: scroll-elm 250000s linear infinite;
  /* background: url("../test-assets/start-menu/mountains.png") repeat-x;
  background-size: auto 100%; */
}

.trees {
  animation: scroll-elm 200000s linear infinite;
  /* background: url("../test-assets/start-menu/trees.png") repeat-x;
  background-size: auto 100%; */
}

.floor {
  animation: scroll-elm 130000s linear infinite;
  /* background: url("../test-assets/start-menu/floor.png") repeat-x;
  background-size: auto 100%; */
  bottom: 0;
  top: unset;
  height: 700pt;
}

.character {
  position: absolute;
  bottom: 35px;
  left: 50%;
  transform: translateX(-50%);
  height: 120px;
}


.button {
  margin-bottom: 0pt;
  filter: brightness(100%);
  transition: all 0.4s;
  /* cursor: pointer; */
}

.button:hover {
  margin-bottom: 2pt;
  filter: brightness(120%);
  transition: all 0.4s;
}

.button:active {
  filter: brightness(75%);
  margin-bottom: 0pt;
  transition: all 0.4s;
}