body, html {
  padding: 0;
  margin: 0;
  background: rgba(0, 0, 0, 0.9);
  font-family: Verdana;
}

h2 {
  margin-bottom: 0;
  white-space: nowrap;
}

canvas {
  display: block;
  margin: auto;
}

.dialogue-container {
  box-sizing: border-box;
  padding: 1rem 2rem;
  display: block;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  position: fixed;
  bottom: 0;
  height: 15rem;
  left: 0;
  align-items: stretch;
}

.dialogue-box {
  box-sizing: border-box;
  padding: 1rem;
  /* width: 70%; */
  color: white;
}

.answer-box {
  box-sizing: border-box;
  padding: 1rem;
  /* width: 30%; */
  color: white;
}

.answer-box button {
  display: block;
  color: white;
  background: rgba(0,0,0,0.5);
  padding: 0.5rem;
  margin: 0.5rem;
  border: 1px solid white;
  outline: none;
  transition: 200ms all ease;
}

.answer-box button:hover {
  background: rgba(0,0,0,0.9);
  cursor: pointer;
}

@media only screen and (min-width: 428px) {
  .dialogue-container {
    height: 10rem;
    padding: 1rem 2rem;
    display: flex;
  }

  .dialogue-box {
    width: 70%;
  }
  
  .answer-box {
    width: 30%;
  }
}