/* include the CSS file with the Solarized colours */
@import url("solarized.css");

/* Blog post styles */
#blog-post {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

#blog-post header {
    text-align: center;
    margin-bottom: 2rem;
}

#blog-post h1 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

/* center the iamge and the caption */
#blog-post img {
    display: block;
    margin: 0 auto;
    margin-bottom: 1rem;
    /* set a max with to be the container width */
    max-width: 80%;
}

#blog-post figcaption {
    text-align: center;
    font-size: 0.8rem;
    color: var(--base1);
}

#blog-post time {
    font-size: 1rem;
    color: var(--base1);
}

/* Responsive styles */
@media (max-width: 768px) {
  #blog-post {
    padding: 2rem 0.5rem;
  }

  #blog-post h1 {
    font-size: 1.5rem;
  }

  #blog-post img {
    max-width: 100%;
  }

  pre[class*=language-] {
    overflow-x: scroll;
    white-space: nowrap;
  }
}