* {
  box-sizing: border-box;
}

body {
  background-color: black;
  color: #fff;
}

a {
  color: white;
}

#game-container {
  position: relative;
  display: inline-block;
  width: 412px;
  height: 652px;
}

#game,
#arcana,
#dialogue-left,
#dialogue-right,
#flasher,
#level-select,
#loading {
  position: absolute;
  width: 400px;
  height: 640px;
  margin: 4px;
}

#flasher {
  background-color: white;
  display: none;
}

#game {
  cursor: pointer;
}

#level-select {
  display: none;
  padding: 20px;
}

#level-select a {
  display: block;
}

#loading {
  background: url('../images/loading.png');
  background-repeat: no-repeat;
  background-position: center;
}

#logo-pk {
  background-image: url('../images/bh-logo-pk.png');
  width: 402px;
  height: 176px;
}

#logo-yl {
  background-image: url('../images/bh-logo-yl.png');
  width: 402px;
  height: 176px;
}

.info ul {
  list-style-type: none;
  padding-left: 25px;
  font-family: monospace;
}

#cutscene {
  margin: 4px;
  overflow: hidden;
  position: relative;
}

#cutscene .dialogue {
  position: absolute;
  top: 466px;
  left: 14px;
  width: 380px;
}

#cutscene .dialogue h2 {
  line-height: 19px;
}

#cutscene .dialogue p {
  line-height: 14px;
}

#cutscene .character-left {
  position: absolute;
  top: 259px;
  left: 4px;
  /* left: -50px; */
}

#cutscene .character-right {
  position: absolute;
  top: 259px;
  right: 4px;
}

#cutscene .triangle {
  position: absolute;
  bottom: 14px;
  right: 14px;
}