* {
    box-sizing: border-box;
}

/* Looks bad. And it is! Workaround for having no control over
 * how the markdown python module renders the post.
 */
.post > article > p > img {
    /* Prevent images in blog posts from getting too big */
    max-width: 800px;
}

.profile-picture {
    max-width: 200px;
}

h1, h2, h3, h4 {
    color: #9b59b6;
}

.post-list {
    padding: 10px;
}

.post-list-item {
    display: block;
    max-width: 800px;
}

.post-list-item-title {
    color: #3498db;
}

.post {
    display: block;
    width: 100%;

    padding: 10px;

    font-size: 21px;
}

.text {
    font-size: 21px;
}

.text-content {
    max-width: 1000px;
}

.stretch-horizontally {
    width: 100%;
}

@media only screen and (max-width: 768px) {
    .page-title {
        /* The page header title otherwise overflows the page on small screens */
        font-size: 8vw;
    }

    .text-content {
        /* Otherwise the page content overflows the page */
        max-width: 100%;
    }

    .text {
        /* A smaller font looks better on smaller devices */
        font-size: 19px;
    }

    .post {
        /* A smaller font looks better on smaller devices */
        font-size: 19px;

        /* Otherwise the entire page overflows for some reason */
        width: 100%;
    }

    p > img {
        /* This should match all images used inside blog posts */
        width: 100%;
    }
}

code {
    display: inline-block;
    padding: 0 3px;
    border-radius: 3px;

    background-color: black;
    line-height: 1.5;
}

pre > code {
    background-color: black;
    line-height: 1.5;
    border-radius: 3px;

    padding: 10px;

    width: 100%;
    overflow-x: auto;
}