p.caption {
  color: #777;
  margin-top: 10px;
}
p code {
  white-space: inherit;
}
pre {
  word-break: normal;
  word-wrap: normal;
}
pre code {
  white-space: inherit;
}

/* -----------div tips custom box------------- */

div.puzzle, div.fyi, div.demo, div.note {
  padding: 1em;
  margin: 1em 0;
  padding-left: 100px;
  background-size: 70px;
  background-repeat: no-repeat;
  background-position: 15px center;
  min-height: 120px;
  color: #1f5386;
  background-color: #bed3ec;
  border: solid 5px #dfedff;
}

div.puzzle {
  background-image: url("Your-turn.png");
}

div.fyi {
 background-image: url("fyi.png");
}

div.demo {
  background-image: url("Live-code.png");
}

div.note {
  background-image: url("lightbulb.png");
}