html, body {
  background-color: #000;
  background-image: url('assets/sprites/background/tile.png');
  text-align: center;
}

@font-face {
  font-family: 'DeterminationMono';
  src: url('assets/fonts/determination-mono.ttf');
}

.dialogueText .typewritten-text_character::after,
.dialogueText .typewritten-text_start::after {
  border-right: none;
}

.dialogueTextNOAS .typewritten-text_character::after,
.dialogueTextNOAS .typewritten-text_start::after {
  border-right: none;
}

feature {
  border: 30px solid transparent;
  border-image: url("assets/sprites/background/border.png") 64 round;
  image-rendering: pixelated;
  width: 100vw;
  height: 75vw;
  max-height: 90vh;
  max-width: 120vh;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  cursor: url('https://github.com/basarat/demo-custom-cursor/blob/master/src/cursors/nyan-cursor.png'), auto;
}

#shopFace {
  position: absolute;
  background-color: #000;
  background-image: url("assets/sprites/shop/background.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  image-rendering: pixelated;
  top: 0px;
  left: 0px;
  height: 50%;
  width: 100%;
}

.faceSprite {
  image-rendering: pixelated;
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translate(-50%);
}

#temmieidle {
  /*transform: translate(-60%, -100px);*/
  height: 50%;
}

#temmiebox {
  height: 25%;
}

#div100 {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  position: absolute;
  text-align: left;
  background-color: #000;
  top: 50%;
  left: 0px;
  height: 50%;
  width: 100%;
  max-height: 50%;
  max-width: 100%;
  border: 10px solid #fff;
}

#div70 {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  position: absolute;
  text-align: left;
  background-color: #000;
  top: 50%;
  left: 0px;
  height: 50%;
  width: 70%;
  max-height: 50%;
  max-width: 70%;
  border: 10px solid #fff;
  border-right-style: none;
}

#div30 {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  position: absolute;
  text-align: left;
  background-color: #000;
  top: 50%;
  left: 70%;
  height: 50%;
  width: 30%;
  max-height: 50%;
  max-width: 30%;
  border: 10px solid #fff;
}

#divPop {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  position: absolute;
  text-align: left;
  background-color: #000;
  left: 70%;
  height: 30%;
  width: 30%;
  max-height: 30%;
  max-width: 30%;
  border: 10px solid #fff;
  border-bottom-style: none;
}

.dialogue {
  word-wrap: break-word;
  text-indent: -2em;
  margin: 20px;
  margin-top: 20px;
  padding-left: 40px;
  padding-top: 0%;
  max-height: 100%;
  max-width: 100%;
}

.dialogueNOAS {
  word-wrap: break-word;
  margin: 20px;
  margin-top: 20px;
  padding-left: calc(40px-2em);
  padding-top: 0%;
  max-height: 100%;
  max-width: 100%;
}

.interaction {
  word-wrap: break-word;
  margin: 20px;
  margin-top: 20px;
  padding-left: 40px;
  padding-top: 0%;
  max-height: 100%;
  max-width: 100%;
}

.interactionOption {
  font-size: 40px;
  max-width: 95%;
  color: #fff;
  font-family: 'DeterminationMono';
  background-color: #00000000;
  border: none;
}

.soul {
  image-rendering: pixelated;
  width: 27px;
}

#div30Soul {
  position: absolute;
  left: 20px;
  top: 30px
}

#div70Soul {
  position: absolute;
  left: 20px;
  top: 30px
}

#money {
  position: absolute;
  bottom: 100px;
  left: 100px;
}

.dialogueText {
  font-size: 30px;
  max-width: 95%;
  color: #fff;
  font-family: 'DeterminationMono';
}

.dialogueTextNOAS {
  font-size: 30px;
  max-width: 95%;
  color: #fff;
  font-family: 'DeterminationMono';
}

.staticText {
  font-size: 30px;
  max-width: 95%;
  color: #fff;
  font-family: 'DeterminationMono';
}