.key-code-helper {
  background-color: #389e98;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  font-family: sans-serif;
  line-height: 1.5;
}

.keycode-helper__code-container {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-around;
  margin-bottom: 15%;
  margin-top: 10%;
}

.keycode-helper__instructions {
  font-style: italic;
  margin: 1em 0;
  text-align: center;
}

.keycode-helper__child {
  font-size: 5em;
  text-align: center;
}

@media (max-width: 600px) {

  .keycode-helper__code-container {
      flex-grow: 0;
      margin: 0 1em;
  }

  .keycode-helper__child {
      font-size: 2em;
      text-align: left;
  }
}