style.css

html {
  background: #ebeff1;
  padding: 20px;
}

body {
  background: #fff;
  padding: 20px auto;
  margin: 30px auto;
  max-width: 900px;
  border-width: 0 2px 2px 0;
  border-color: #c7d4da;
  border-style: solid;
  color: #2A2A2A;
}

body,
.markdown-css {
  font-family: Lora, serif;
}

a,
.markdown-css a {
  color: #0C7AC4;
}

a:hover,
.markdown-css a:hover {
  background: #0C7AC4;
  color: white;
}

.markdown-css h1 {
  font-weight: normal;
  font-size: 48px;
  margin-top: 40px;
}

.markdown-css h2,
.markdown-css h3 {
}

.markdown-css img + em {
  color: #2A2A2A;
}

header,
footer {
  padding: 20px;
}

header a {
  padding: 12px 4px;
  line-height: 2.8em;
}

header img {
  margin-left: 8px;
}

.md-pages {

  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;

}

.md-pages a {
  text-decoration: underline;
}

.md-pages p img {
    margin: 0 auto;
    display: block;
}

/* for inline images - bold them - hack */
.md-pages em img {
  display: inline;
}

.youtube-video-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin-bottom: 20px;
}

.youtube-video-container::after {
  display: block;
  content: "";
  padding-top: 56.25%;
}

.youtube-video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}