@font-face {
    font-family: "Avenir Next";
    src: url("../../static/fonts/AvenirNext-Medium.ttf");
    font-weight: 400;
}

@font-face {
    font-family: "Avenir Next";
    src: url("../../static/fonts/AvenirNext-Demi.ttf");
    font-weight: 600;
}

@font-face {
    font-family: "Avenir Next";
    src: url("../../static/fonts/AvenirNext-Bold.ttc");
    font-weight: 900;
}

:root {
    --aspect-ratio: calc(16/9);
    --game-width: calc(100vh * var(--aspect-ratio));
    --outline:
        2px 0px 0 black,
        1px 1px 0 black,
        0px 2px 0 black,
       -1px 1px 0 black,
       -1px 0px 0 black,
      -1px -1px 0 black,
       0px -1px 0 black,
       1px -1px 0 black;
}

@media only screen and (orientation:portrait){
    #wrapper { display:none; }
    #warning-message { display:block; }
}
@media only screen and (orientation:landscape){
    #warning-message { display:none; }
}

.pink {
  transition: 0.5s;
  background-color: #ff4cc4;
  opacity: 0;
}

.plus18 {
  width: 10vh;
  height: 10vh;
  position: absolute;
  left: 165vh;
  bottom: 3vh;
}

body {
    background-color: black;
    margin: 0px;
    /* left: 50%; */ /* center game window */
    /* transform: translate(-50%, 0); */
    left:0;
    right:0;
    margin: auto;
    font-family: Avenir Next;
    user-select: none;
    overflow-x: hidden;
    /* overflow-y: hidden; */
}

.full-window {
    position: absolute;
    height: 100vh;
    width: var(--game-width);
}

.hidden {
    display: none;
}

.dialog {
  transition: 0.7s ease;
  position: absolute;
  height: 11vh;
  padding: 2vh 1vh;
  margin: auto;
  border: 2px solid #00000045;
  width: 68%;
  background-color: rgba(0, 0, 0, 0.35);
  /* display: none; */
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  bottom: 4vh;
  cursor: pointer;
  border-radius: 0.5vh;
}

.name {
  font-weight: 400;
  color: white;
  font-size: 4vh;
  margin-top: -9vh;
  position: absolute;
  text-shadow: var(--outline);
  left: 2vh;
}

.text {
  font-weight: 400;
  color: white;
  font-size: 3.5vh;
  /* display: none; */
  margin-top: 0.5vh;
  margin-left: 2vh;
  width: 114vh;
}

.blackout_all_game {
  /* display: none; */
  z-index: 100500;
  /* visibility: hidden; */
  transition: 0.5s;
  background-color: black;
  opacity: 0.0;
}

.choices {
    display: flex;
    position: absolute;
    flex-direction: column;
    bottom: 25vh;
    justify-content: center;
    margin-left: calc(1/2 *(var(--game-width) - 90vh));
}

.choice-button {
  width: 90vh;
  background-color: rgba(0, 0, 0, 0.54);
  margin-bottom: 3vh;
  font-size: 3.5vh;
  text-align: center;
  cursor: pointer;

  padding: 1vh;
  border-radius: 0.8vh;
  transition: 0.5s;
  color: white;
  border: 0.2vh solid #00000045;
}

.choice-button:hover {
    width: 95vh;
}

.disappear  {
    animation: disappearing .5s;
    animation-fill-mode: both
}


.disappear_slow  {
    animation: disappearing 1s;
    animation-fill-mode: both
}


.disappear_delay  {
    animation: disappearing .5s;
    animation-fill-mode: both;
    animation-delay: .25s;
}

@keyframes disappearing {
    from {
        opacity:1
    }
    to {
        opacity:0
    }
}

.blackout {
  transition: 0.5s;
  background-color: black;
  opacity: 0;
}

.lightning {
  transition: 0.5s;
  background-color: white;
  opacity: 0;
}

.active_effect {
  opacity: 1;
}

.new_sprite {
  animation: appearing .5s;
  animation-fill-mode: both
}

.new_sprite_delay {
  animation: appearing .5s;
  animation-fill-mode: both;
  animation-delay: .25s;
}

.hidden_sprite {
  opacity: 0;
}


@keyframes appearing {
    from {
        opacity:0
    }
    to {
        opacity:1
    }
}

.new_sprite_disappear {
  animation: appearing .5s;
  animation-fill-mode: both;
}

.interactive_object {
  opacity: 1.0;
  transition: 0.5s;
  position: absolute;
  cursor: pointer;
}

.unscalable_object {
  opacity: 1.0;
  transition: 0.5s;
  position: absolute;
  cursor: pointer;
}

.unscalable_object:hover {
  filter: brightness(1.2);
}

.interactive_object:hover {
  filter: brightness(1.2);
  transform: scale(1.15);
}

.hide_interactive {
  opacity: 0.0;
}

.menu {
  visibility: hidden;
  opacity: 0.0;
}

.game {
  visibility: hidden;
  opacity: 0.0;
  /* overflow: hidden; */
}

.skip_intro {
  visibility: hidden;
  opacity: 0.0;
  text-align: center;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  width: 15vh;
  position: absolute;
  font-weight: 600;
  padding: 1vh;
  bottom: 4vh;
  right: 5vh;
  font-size: 2.5vh;
  border-radius: 1vh;
  border: #f9ffbd3b 0.3vh solid;
  box-shadow: 0.2vh 0.2vh 1vh #00000059;
}

.skip_intro:hover {
  background-position: right center;
  width: 18vh;
}

.hidden_object {
  opacity: 1.0;
  position: absolute;
}