code {
    font-size: 1rem;
}

div.breadcrumbs {
    font-size: smaller;
    color: #666666;
    padding: 0.5rem 1rem;
}

div.breadcrumbs a {
    text-decoration: none;
    color: inherit;
}

div.breadcrumbs a:hover {
    text-decoration: underline;
    color: #369; /* no idea where this color comes from */
}

div.breadcrumbs ul {
    display: flex;
    margin: 0;
    padding: 0;
    flex-direction: row;
    list-style-type: none;
}

div.breadcrumbs span.arrow {
    padding: 0 1ex;
}

div.breadcrumbs li.current {
    color: #005bbb;
}

img.wrap-image-right {
    float: right;
    margin: 1rem;
}

img.avatar {
    max-width: 50%;
}

@media screen and (min-width: 721px) {
    nav#top-nav {
        border-bottom-style: dotted;
        border-bottom-color: black;
        border-bottom-width: 1px;
    }

    nav#top-nav > ul {
        display: flex;
        flex-direction: row;
        margin: 0;
        padding: 0;
        list-style-type: none;
    }

    nav#top-nav > ul > li {
        padding: 0.5rem 1rem;
        border-color: #2f9fd0;
        border-width: 0 0 0.5ex 0;
        border-style: solid;
    }

    nav#top-nav > ul > li.current {
        border-width: 0.5ex 0 0 0;
        box-shadow: 5px 0 5px -2px rgba(0,0,0,0.33),
                    -5px 0 5px -2px rgba(0,0,0,0.33);
    }

    nav#top-nav a {
        text-decoration: none;
    }
}

@media screen and (max-width: 720px) {
    nav#top-nav > ul {
        margin: 1rem auto 0 auto;
        padding: 0 1rem;
        list-style-type: none;
    }

    div.breadcrumbs ul {
        flex-direction: column;
    }
}