:root {
  --orange: #DC6F54;
  --green: #76A98F;
  --blue: #353851;
  --yellow: #F0C584;
}

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

.book .book-header h1 {
  opacity: 1;
  text-align: left;
}

#header .title {
  margin-bottom: 0em;
}
#header h4.author {
  margin: 0;
  color: #666;
}
#header h4.author em {
  font-style: normal;
}

.small_right, .small_left {
  display: inline-block;
  width: 25%;
  max-width: 200px;
}
.small_right { float: right; margin: 10px 0;}
.small_left { float: left; }
.small_right img, .small_left img { max-width: 100%; }

.nowyou, .info, .overview, .iseng, .research, .thought {
  padding: 1em 1em 0.25em 3.5em;
  margin: 10px 0;
  background-color: hsla(0, 0%, 100%, .1);
  background-position: 0.5em 0.5em;
  background-size: 2.5em;
  background-repeat: no-repeat;
  border-radius: 5px;
}

body {
  margin-top: 24px;
  box-shadow: 0 -3px 0 0px var(--green),
              0 -6px 0 0px var(--green),
              0 -9px 0 0px var(--green),
              0 -12px 0 0px var(--green),
              0 -15px 0 0px var(--green),
              0 -24px 0 0px var(--green);
}

.nowyou {
  background-image: url("img/nowyou.png");
  background-color: #DFD8D7;
  border: 1px solid var(--green);
}

.overview {
  background-image: url("img/info_small.png");
  background-color: #76A98F;
  border: 1px solid var(--orange);
}

.iseng {
  background-image: url("img/website_small.png");
  background-color: #F0C584;
  border: 1px solid var(--orange);
}

.research {
  background-image: url("img/research_small.png");
  background-color: #353851;
  border: 1px solid var(--orange);
}

.thought {
  background-image: url("img/thought_small.png");
  background-color: #353851;
  border: 1px solid var(--orange);
}

img { max-width: 100%; }

body { background: #f4f2e4 }