canvas {
  margin-bottom: 1em;
}

h2 {
  border-bottom: 1px solid #666;
}

h3 {
  color: #666;
  font-size: 1.2em;
}

h4 {
  color: red;
  font-size: 1.2em;
}

.title, body, button, h1, h2, h3, h4, h5, h6, input, select, textarea {
  font-family: Charter, Georgia, serif;
}

.list-item-title > a {
  text-decoration: underline;
}

.list-item-title > a:hover {
  text-decoration: none;
}

code, kbd, samp {
  /* color: #ffcd00; */
  font-size: .8em;
}

.highlight pre {
  /* background: pink !important; */
  border: 1px solid #999;
}

td > code,
h1 > code,
h2 > code,
h3 > code,
h4 > code,
h5 > code,
h6 > code,
li > code,
a > code,
p > code,
blockquote strong,
li strong {
  color: #c31900;
}

pre, pre code {
  border-radius: .3em;
}

pre {
  padding: .5em;
}

.ll-fatal, .awful {
  color: red;
}

.ll-error, .bad {
  color: orange;
}

.ll-warn, .ok {
  color: gold;
}

.ll-info, .good {
  color: green;
}

.ll-debug {
  color: blue;
}

.good, .ok, .bad, .awful {
  font-weight: bold;
}

.night {
  background: #263238;
}

.night .title, .night h1, .night h2, .night h3, .night h4, .night h5, .night h6,
.night a, .night a:visited {
  color: #DDD;
}

.night h3 {
  color: #999;
}

body.night, .night button, .night input, .night select, .night textarea,
.night .main-menu a:hover, .night .social-menu a:hover,
.night a:active, .night a:focus, .night a:hover{
  color: #ccc;
}

.night blockquote strong,
.night td > code,
.night h1 > code,
.night h2 > code,
.night h3 > code,
.night h4 > code,
.night h5 > code,
.night h6 > code,
.night li > code,
.night a > code,
.night p > code,
.night li strong {
  color: #c59e00;
}

input#search {
  width: 100%;
}

#key-achievements ~ ul > li {
  border-bottom: 1px solid #ffcd00;
  list-style: circle;
  margin-bottom: 1em;
  padding-bottom: 1em;
}

/* reset list stylings after 'resume' key achievements */
#key-achievements ~ h2 ~ ul > li {
  border: none;
  list-style: disc;
  margin: 0;
  padding: 0;
}

.image-caption {
  margin-top: -1em;
}

em {
  color: #C97747;
  font-weight: bold;
}

blockquote code {
  font-style: normal;
}

.credit {
  margin-bottom: 1em;
  margin-top: -1em;
  text-align:center;
}

.post-img {
  border: 1px solid #666;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1em;
  width: 100%;
}

.post-img-small {
  width: 50%
}

.img-caption {
  display: block;
  text-align: center;
  font-weight: bold;
  margin-bottom: 2em;
}

.home-advert-apology {
  margin-top: 4rem;
}

.advert {
  position: relative;
  top: -7px;
  width: 100%;
}

.advert-post {
  top: 0px;
}

.advert-post a {
  border-bottom: 0;
  margin-bottom: 1.5rem;
}

.advert a {
  display: block;
  font-size: 1.5rem;
  padding: 1rem 2rem 2.5rem;
  position: relative;
  top: 12px;
  text-align: center;
}

.box {
  position: relative;
  display: block;
  margin: auto;
  max-width: 800px;
}
.box__inner:before, .box__inner:after {
  content: '';
  position: absolute;
  display: block;
  height: 12px;
  width: 100%;
  background: #cb5a5e;
  background: repeating-linear-gradient(-45deg, red, red 12px, transparent 10px, transparent 23px);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-bottom: 0;
}
.box__inner:before {
  top: 0;
}
.box__inner:after {
  bottom: 0;
}

.profile {
  border: 10px solid #000000;
}
.night .profile {
  border-color: #CCCCCC;
}