:root {
  --bg-color: #d5d5d5;
}

body {
  margin: 0;
}

story-root {
  height: 100vh;
  display: flex;  
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

story-scene {
  min-height: 75vh;
  width: 80ch;
  padding: 4px;
  display: none;
  flex-direction: column;
  align-items: center;
  background-color: var(--bg-color);
}

story-scene.active {
  display: flex;
}

story-choice > button {
  cursor: pointer;
  color: #4d53d1;
  border: none;
  background-color: transparent;
}

story-pre {
  white-space: pre-wrap;
}

.hidden {
  display: none;
}

story-dialogue {
  margin-top: 8px;
  background-color: #ffffff80;
  align-self: stretch;
}

story-dialogue .speaker {
  color: #57a849;
  padding-right: 4px;
}

story-dialogue .speaker::after {
  color: initial;
}