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




body {
  text-align: justify;
}

.title {
  color: firebrick;
}

h1,h2,h3,h4,h5 {
  text-align: left;
}


.warning {
  padding: 1em 1em 1em 4em;
  margin-bottom: 10px;
  background: #FFF2AE 5px center/3em no-repeat;
  border: 2px solid #FFF2AE;
  border-radius: 10px;
}

.warning {
  background-image: url("img/blocks/warning.svg");
}


.advanced {
  padding: 1em 1em 1em 4em;
  margin-bottom: 10px;
  background: #E6F5C9 5px center/3em no-repeat;
  border: 2px solid #E6F5C9;
  border-radius: 10px;
}

.advanced {
  background-image: url("img/blocks/rocket.svg");
}


.tip {
  padding: 1em 1em 1em 4em;
  margin-bottom: 10px;
  background: #B3E2CD 5px center/3em no-repeat;
  border: 2px solid #B3E2CD;
  border-radius: 10px;
}

.tip {
  background-image: url("img/blocks/secret.svg");
}


.think {
  padding: 1em 1em 1em 4em;
  margin-bottom: 10px;
  background: #FDCDAC 5px center/3em no-repeat;
  border: 2px solid #FDCDAC;
  border-radius: 10px;
}

.think {
  background-image: url("img/blocks/brain.svg");
}


.reading {
  padding: 1em 1em 1em 4em;
  margin-bottom: 10px;
  background: #CBD5E8 5px center/3em no-repeat;
  border: 2px solid #CBD5E8;
  border-radius: 10px;
}

.reading {
  background-image: url("img/blocks/reading.svg");
}