.pretty-code {
  background: #fff9c4;
  font-family: Roboto Mono;
  font-size: 13px;
  border-radius: 5px;
  padding: 1px 8px;
  overflow: scroll;
  overflow-wrap: break-word;
  white-space: pre-wrap; }

.callout {
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 20px;
  background-color: #f0f8ff;
  border: 1px solid #b0c4de; }
  .callout h4 {
    text-transform: uppercase; }
  .callout p {
    margin-top: 10px; }
  .callout.note {
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 20px;
    background-color: #f0f8ff;
    border: 1px solid #b0c4de; }
    .callout.note h4 {
      text-transform: uppercase; }
    .callout.note p {
      margin-top: 10px; }
  .callout.warning {
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 20px;
    background-color: #fff3cd;
    border: 1px solid #ffeeba; }
    .callout.warning h4 {
      text-transform: uppercase; }
    .callout.warning p {
      margin-top: 10px; }
  .callout.tip {
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 20px;
    background-color: #d4edda;
    border: 1px solid #c3e6cb; }
    .callout.tip h4 {
      text-transform: uppercase; }
    .callout.tip p {
      margin-top: 10px; }