* {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

body {
  background-image: url(xcf/V1_Town_shop_view.png);
  background-repeat: repeat;
  background-size: cover;
  background-position: center;
  -webkit-backdrop-filter: blur(2px) brightness(60%);
          backdrop-filter: blur(2px) brightness(60%);
  margin: 0;
  height: 100vh;
  width: 100vw;
  overflow: scroll;
  transition: 1s;
}

h1, h2, p, button, a {
  margin: 0;
  font-family: "VT323", monospace;
  font-weight: 400;
  font-style: normal;
}

img {
  image-rendering: pixelated;
}

.CUT {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.holdup {
  width: 100vw;
  height: 100vh;
  background-color: rgb(9, 0, 43);
  filter: opacity(90%);
  z-index: 70;
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.holdup h1 {
  color: #ffffff;
}
.holdup h2 {
  color: #e0e0e0;
}
.holdup__buttons {
  display: flex;
  gap: 10px;
  justify-content: space-between;
}
.holdup__buttons a {
  text-decoration: none;
  color: #353535;
  background-color: #c2c2c2;
  padding: 5px;
  font-size: 4vw;
  border: 10px groove #ffffff;
}
.holdup__buttons a:hover {
  color: black;
  background-color: white;
}
.holdup__buttons button {
  text-decoration: none;
  padding: 5px;
  background-color: #c2c2c2;
  color: #353535;
  font-size: 4vw;
  background-color: #e0e0e0;
  border: 10px groove #ffffff;
}
.holdup__buttons button:hover {
  color: black;
  background-color: white;
}
.holdup--hidden {
  display: none;
}

.startPopup--hidden {
  pointer-events: none;
  background-color: transparent !important;
  color: transparent !important;
  border-width: 0 !important;
  transition: 1s !important;
  pointer-events: none !important;
  text-decoration: none !important;
  cursor: default !important;
}

.startText {
  position: absolute;
  width: calc(100vw - 100px);
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  z-index: 60;
  padding: 50px;
}
.startText h1 {
  padding: 0;
  margin: 0;
  filter: opacity(100%);
  font-size: 6vw;
  color: #e0e0e0;
  text-align: center;
}
.startText h2 {
  padding: 0;
  margin: 0;
  filter: opacity(100%);
  font-size: 12vw;
  border: 10px groove rgb(112, 203, 255);
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.7333333333);
  text-align: center;
}
.startText hr {
  color: black;
  border: 10px inset white;
  width: calc(100% - 20px);
}
.startText p {
  font-size: 2vw;
  color: #ffffff;
  text-align: center;
}
.startText button {
  border: none;
  font-size: 10vw;
  cursor: pointer;
}
.startText a {
  margin-top: 10px;
  text-align: center;
  width: 100%;
  border: none;
  cursor: pointer;
  background-color: #e0e0e0;
  text-decoration: none;
  color: black;
  font-size: 5vw;
}

.startScreen {
  position: absolute;
  width: 100vw;
  height: 1000vh;
  background-color: rgb(9, 0, 43);
  filter: opacity(50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 50;
}

.TEMP {
  position: absolute;
  width: 100vw;
  height: 100vh;
  color: white;
  z-index: 50;
}

.tranistion {
  position: absolute;
  z-index: 40;
  background-color: black;
  transition: 1s;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}
.tranistion--hidden {
  background-color: rgba(0, 0, 0, 0);
}

.place {
  z-index: 10;
  position: absolute;
  width: calc(100vw - 20px);
  top: 0;
  background-color: rgba(0, 0, 0, 0.7333333333);
  text-align: center;
  padding: 10px;
  pointer-events: none;
}
.place h1 {
  color: #ffffff;
  font-size: max(3rem, 5vw);
  background-color: rgba(105, 105, 105, 0.7333333333);
  border-radius: 10px;
  margin-bottom: 10px;
}
.place p {
  color: #e0e0e0;
  font-size: max(1.5rem, 2vw);
  background-color: rgba(105, 105, 105, 0.7333333333);
  border-radius: 10px;
}
.place--open {
  transform: scaleY(1) scaleX(1) translateY(0);
  transition: 1s ease-out;
}
.place--closed {
  transform: scaleY(0) scaleX(2) skewY(20deg) translateY(-200px);
  transition: 1s ease-in;
}

.diologue {
  z-index: 15;
  position: absolute;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7333333333);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 10px;
  padding: 20px 10vw 50px;
  width: 80vw;
  cursor: pointer;
}
.diologue span {
  display: flex;
  background-color: rgba(105, 105, 105, 0.7333333333);
  align-items: end;
  height: 50px;
  gap: 10px;
  border-radius: 10px;
  padding: 10px;
}
.diologue span img {
  border-radius: inherit;
  width: 50px;
  height: 50px;
}
.diologue span h1 {
  color: #e0e0e0;
  font-size: 2rem;
}
.diologue--open {
  transform: scaleY(1) scaleX(1) translateY(0);
  transition: 1s ease-out;
}
.diologue--closed {
  transform: scaleY(0) scaleX(2) skewY(-20deg) translateY(200px);
  transition: 1s ease-in;
}
.diologue__text {
  display: flex;
  gap: 10px;
  width: 100%;
}
.diologue__text p {
  border-radius: 10px;
  padding: 10px;
  background-color: rgba(105, 105, 105, 0.7333333333);
  color: #ffffff;
  overflow: hidden;
  font-size: max(1.5rem, 2vw);
  width: 50%;
}
.diologue__text__buttons {
  width: 50%;
  gap: 10px;
  display: flex;
  flex-direction: column;
}
.diologue__text__buttons button {
  background-color: rgba(105, 105, 105, 0.7333333333);
  color: #ffffff;
  font-size: max(1.5rem, 2vw);
  border-radius: 10px;
}

.backpack {
  cursor: grab;
  width: 200px;
  position: absolute;
  display: block;
  z-index: 13;
  bottom: 0;
  padding-bottom: 100px;
}
.backpack img {
  position: absolute;
  width: 200px;
  display: block;
}
.backpack__slots {
  position: relative;
  top: 50px;
  left: 40px;
  width: 100px;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.backpack--closed {
  transform: translateX(-130px) rotateZ(90deg);
  transition: 1s ease-out;
}
.backpack--open {
  transform: translateY(-100px);
  transition: 1s ease-out;
}

.mainScene {
  position: relative;
  width: 100vw;
  height: 100vh;
  z-index: -5;
  -o-object-fit: contain;
     object-fit: contain;
  transition: 0s;
}
.mainScene--img {
  position: absolute;
  width: 100vw;
  height: 100vh;
  -o-object-fit: contain;
     object-fit: contain;
  top: 0;
  left: 0;
}
.mainScene__center {
  position: absolute;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mainScene__center__center {
  position: relative;
  width: 100vw;
  height: 56.8421052618vw;
}
@media (min-aspect-ratio: 95/54) {
  .mainScene__center__center {
    width: 175.92592593vh;
    height: 100vh;
  }
}
.mainScene__center__center--interactable {
  height: auto;
  position: absolute;
  cursor: grab;
}
.mainScene__center__center--interactable:hover {
  filter: drop-shadow(0px 0px 10px #eeff00);
}
.mainScene__center__center--doorOutside {
  transform: translateX(45%) translateY(50%);
  width: 50%;
  clip-path: rect(0% 75% 60% 50%);
}
.mainScene__center__center--ladderOutside {
  transform: translateX(80%) translateY(0%);
  width: 45%;
  clip-path: rect(0% 100% 100% 75%);
}
.mainScene__center__center--snowMobile {
  transform: translateX(-23%) translateY(20%);
  width: 45%;
  clip-path: rect(70% 75% 100% 25%);
}
.mainScene__center__center--guid_outside {
  transform: translateX(1150%) translateY(120%);
  width: 8%;
}
.mainScene__center__center--snowpile_1 {
  transform: translateX(120%) translateY(240%);
  width: 20%;
  clip-path: rect(0% 35% 50% 0%);
  opacity: 70%;
}
.mainScene__center__center--coin_start {
  transform: translateX(300%) translateY(30%);
  height: 17.592592593%;
  width: 10%;
}
.mainScene__center__center--shop_shop_front {
  width: 100%;
  height: 100%;
  height: auto;
  position: absolute;
  z-index: 1;
  pointer-events: none;
}
.mainScene__center__center--shopkeep {
  transform: translateX(100%) translateY(10%);
  width: 25%;
}
.mainScene__center__center--coin_tower {
  transform: translateX(50%) translateY(30%);
  height: 17.592592593%;
  width: 10%;
}
.mainScene__center__center--coin {
  pointer-events: none;
  width: 600%;
  height: auto;
}

.hand {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 64px;
  height: 128px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-right: 20px;
  z-index: 0;
  padding-bottom: 100px;
}
.hand input {
  z-index: 18;
  cursor: pointer;
}

.snowstorm {
  position: absolute;
  width: 100vw;
  height: 100vh;
  z-index: 5;
  pointer-events: none;
}/*# sourceMappingURL=style.css.map */