@media only screen and (max-width: 800px) {
    #container {
        width: auto;
        margin: 3%;
    }

    img {
        max-width: 100%;
    }

    p > code {
        word-break: break-all;
    }

    .ribbon {
        display: none;
    }

    footer div.presentation {
        width: 60%;
    }

    #toTop,
    #toTopHover {
        visibility: hidden;
    }
}

@media only screen and (max-width: 500px) {
    ul.posts li a.link,
    ul.projects li a,
    ul.books li a {
        color: #fff;
        display: block;
        border-radius: 5px;
        margin: 10px 0 10px 0;
        padding: 5px 15px 5px 15px;
        background: #ff5db1; /* Old browsers */
        background: -moz-linear-gradient(top, #ff5db1 0%, #d33682 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff5db1), color-stop(100%,#d33682)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #ff5db1 0%,#d33682 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #ff5db1 0%,#d33682 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #ff5db1 0%,#d33682 100%); /* IE10+ */
        background: linear-gradient(to bottom, #ff5db1 0%,#d33682 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5db1', endColorstr='#d33682', GradientType=0); /* IE6-9 */
    }

    .hide-on-mobile {
        display: none;
    }

    ul.posts li a:focus,
    ul.posts li a:hover,
    ul.projects li a:focus,
    ul.projects li a:hover,
    ul.books li a:focus,
    ul.books li a:hover {
        text-decoration: none;
    }

    .book-authors {
        color: #fff;
    }
}