.game {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  visibility: hidden;
  width: 100vw;
  height: 100vh;
  filter: opacity(0);
  transform: scale(0.9);
  transition: filter 0.1s, transform 0.1s;
}

.game-open{
  transform: scale(1);
  filter: opacity(1);
  visibility: visible;
}

.bg-img {
  object-fit: fill;
}

.action-buttons {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  box-sizing: border-box;
  position: absolute;
  padding: 0;
  left: 0;
  right: 0;
  bottom: 0%;
  z-index: 2;
}

.btn-letin {
  background-color: rgb(111, 148, 56);
  font-family: 'Courier New', Courier, monospace;
  font-size: 35px;
  font-weight: bold;
  height: 100px;
  min-width: 275px;
  border-radius: 10px;
  margin-bottom: 80px;
}

.btn-letin:hover {
  color:rgb(163, 22, 22);
  background-color: rgb(108, 172, 108)
}

.btn-letin:active {
  color:rgb(0, 0, 0);
  background-color: rgb(53, 90, 53);
  transform: scale(0.9);
}

.btn-shoo {
  height: 300px;
}

.btn-shoo:hover {
  filter: brightness(200%) sepia(100%) saturate(500%);
  transform: scale(1.1);
}

.btn-shoo:active {
  filter: brightness(200%);
  transform: scale(1);
}

.btn-shoot {
  height: 300px;
}

.btn-shoot:hover {
  filter: brightness(200%) sepia(100%) hue-rotate(-40deg) saturate(500%);
  transform: scale(1.1);
}

.btn-shoot:active {
  filter: brightness(200%);
  transform: scale(1);
}

#character-sprite {
  position: absolute;
  bottom: 80px;
  right: -150vw;
  height: 80vh;
  width: auto;
  transition: right 3s ease-out;
  z-index: 1;
}


#character-sprite.walk-in {
  right: 37vw;
}

#character-sprite.walk-out {
  right: -150vw;
}

#dialogue-box {
  position: absolute;
  bottom: 200px;
  left: 50%;
  transform: translate(-50%);
  background-color: white;
  color: black;
  font-family: 'Courier New', Courier, monospace;
  font-size: 20px;
  max-width: 500px;
  min-height: 60px;
  border-radius: 10px;
  z-index: 3;
}