/* Imports. */
@import url("pygment.css");
@import url("https://fonts.googleapis.com/css?family=Roboto");
@import url("https://fonts.googleapis.com/css?family=Playfair+Display");

/* Get rid of the default padding around the edges of the page. */
html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    /* This is the background the inner header-and-content box rests on. */
    background-image: url('../images/worn-graph-paper-background.jpg');
    background-color: #EEEEEE;
}

a {
    /* Blue links are ugly. */
    color: #000000;
}

a:visited {
    /* Maybe this is breaking the Web too much...
     *      TODO: In the future, define this to be a color that works. */
    color: #000000;
}

/* A global div containing both the header and content global divs. */
.header-and-content {
    width: 700px;
    margin: 0 auto;
    margin-top: 50px;

    padding-left: 80px;
    padding-right: 80px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    border-top: solid 1px #CCCCCC;
    border-left: solid 1px #CCCCCC;
    box-shadow: 2px 2px 2px #888888;
    margin-bottom: 20px;
}

/* The global header div. In articles, it includes the title and image. */
.header {
    text-align: center;
    padding: 0;
    margin: 0;
}

/* Inside .header, only exists in articles. */
.article-header {
    padding-top: 20px;
    padding-bottom: 10px;
}

/* The global content div. In articles, it includes the body and comments. */
.content {
    width: 700px;
    margin: 0 auto;
    font-size: 13pt;
    line-height: 1.4em;
    padding-bottom: 10px;
}

/* The global footer div. */
.footer {
    width: 700px;
    margin: 0 auto;
    padding-top: 20px;
    padding-bottom: 50px;
    margin-bottom: 50px;
}

/* Categories section of the footer. */
.footer-left {
    float: left;
}

/* Website links section of the footer. */
.footer-right {
    float: right;
}

/* Middle "BQP" section of the footer. */
.footer-middle {
    text-align: center;
}

.footer-middle a {
    color: #000000;
    text-decoration: none;
}

.footer-middle a:visited {
    color: #000000;
}

/* The article title h1. */
.article-title {
    padding: 0;
    margin: 0;
    font-family: 'Playfair Display', serif;
}

.article-title a {
    color: #000000;
    text-decoration: none;
}

.article-title a:visited {
    color: #000000;
}

/* The article img (may not be present always). */
.article-image {
    /* box-shadow: 2px 2px 2px #888888; */
    margin-top: 20px;
    border-radius: 5px;
}

/* A div with the date, author, and category. */
.article-metadata {
    font-size: 10pt;
    color: #555555;
    text-align: right;
}

.article-metadata a {
    color: #000000;
    text-decoration: none;
}

.article-metadata a:visited {
    color: #000000;
}

.entry-title {
    font-size: 14pt;
}

.entry-title a {
    color: #000000;
}

.entry-title a:visited {
    color: #000000;
}

.entry-content {
    font-style: italic;
    color: #555555;
    padding-left: 20px;
    padding-right: 20px;
}

/* Markdown things. */

/* Code blocks. */
.highlight {
    font-family: "Courier New", Courier, monospace;
    line-height: normal;
    background-color: #e5f8ff;
    padding: 10px;
    padding-left: 20px;
}

/* Backtick code. */
code {
    font-family: "Courier New", Courier, monospace;
    background-color: rgba(0, 0, 0, 0.04);
    margin: 0px;
    padding: 0.2em 0px;
}

/* Block quotes. */
blockquote {
    line-height: normal;
}

.twitter-tweet {
    margin: 0 auto;
}