/* -------------------------------------------------------------------------------- */
/*  Custom changes I've made to McLuhan theme.
/* -------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------------- */
/*  Homepage
/* -------------------------------------------------------------------------------- */

.site-header, .social-menu.desktop {
  background: #282B2F;
}

@media ( max-width: 1050px ) {
  .site-header {
    width: 340px;
    padding: 80px auto 144px;
  }

  body {
    padding-left: 340px;
  }
}

@media ( max-width: 1000px ) {
  .site-header {
    width: 100%;
  }

  body {
    padding-left: 0;
  }

  header img {
    display: none;
  }
}

/* Content area */
.section-inner {
  max-width: 880px;
}

.site-description {
  line-height: 1.5;
}

.posts .list-title {
  color: rgba( 0, 0, 4, 0.4 );
}

.posts a.list-title:hover {
  text-decoration-color: #ccc;
}

.post-preview {
  border-top: none;
  border-bottom: 1px solid rgba( 0, 0, 4, .125 );
}

header img {
  border-radius: 50%;
  margin-bottom: 40px;
  width: 150px;
}

/* Gap between blocks of posts */
#posts ul {
  margin-bottom: 60px;
}

#posts ul.two_column {
  overflow: hidden;
}

#posts ul.two_column li {
  border: 1px solid #e4e4e5;
  border-radius: 4px;
  width: 47%;
  float: left;
  display: inline;
  margin-right: 2%;
  margin-bottom: 2%;
  padding: 16px;
}

#posts ul.two_column li:hover {
  background-color: #f9f9f9;
}

.project a {
  padding: 0px;
  font-size: 90%;
}

a.project_description {
  font-size: 90%;
  line-height: 1.5em;
  color: #586069;
  margin-top: 8px;
}

/* -------------------------------------------------------------------------------- */
/*  Post
/* -------------------------------------------------------------------------------- */
.entry-header {
  margin: 60px auto 40px;
}

.meta {
  margin-top: 16px;
}

.meta > * + * {
  margin-left: 2px;
}

.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6 {
  margin: 50px 0 30px;
}

.meta.bottom.credits {
  line-height: 1.6;
  color: #7d7d7d;
}

.meta.bottom.credits a {
  border-bottom: 1px solid #ccc;
  color: inherit;
}

.meta.bottom.credits a:hover {
  border-bottom: 1px solid #666;
}

/* -------------------------------------------------------------------------------- */
/* Prism.js code highlighting
/* -------------------------------------------------------------------------------- */
pre, pre[class*="language-"] {
  border-radius: 0.4em !important;
  overflow: auto;
  padding: 1em;
  margin: 2em 0;
}

code, pre, pre[class*="language-"] {
  background: #F1F3F4;
  border-radius: 0.2em !important;
}

code .token {
  background: none !important;
}

.line-highlight {
  background: #BCBFC033;
  margin-top: .8em;
  padding-bottom: 0.4em;
}

.line-highlight::before, .line-highlight::after {
  display:none;
}

code, code[class*="language-"], pre[class*="language-"] {
  font-family: "Hack", "Menlo", "Roboto Mono", Monaco, "Courier New", monospace;
}

code {
  font-size: 15px;
}

/* -------------------------------------------------------------------------------- */
/* Media
/* -------------------------------------------------------------------------------- */
.entry-content p, video {
  margin-bottom: 25px;
}

.content-video {
  width: 100%;
  max-width: -moz-available;
  max-width: -webkit-fill-available;
}