/* Distinguish links by colour */
a:link    { color: blue; } /* unvisited link */
a:visited { color: purple; } /* visited link */
a:active  { color: red; } /* selected link */

#site-header h1 {
    width: 75%;
}

#site-navigation {
    width: 20%;
}

/* Add an up-arrow before the back link */
#site-navigation .back:before {
    content: '\2191';
}

#content-wrapper>:first-child {
    margin-top: 0;
}

#content-wrapper>:last-child {
    margin-bottom: 0;
}

#content-wrapper {
    margin-bottom: 1em;
}

.copyright {
    font-size: 0.8em;
    color: #888;
    margin: 0.1em;
    text-align: center;
}

/* Fade links in the copyright section */
.copyright a:link    { color: #77c; } /* unvisited link */
.copyright a:visited { color: #c7c; } /* visited link */
.copyright a:hover   { color: blue; } /* mouse over link */
.copyright a:active  { color: red; } /* selected link */

@media all and (max-width: 56em) {
    #site-header h1 {
        display: inline-block;
        margin: 0.2em 0 0 0;
        padding: 0 0 0 0.5em;
    }
  
    #site-navigation {
        display: inline-block;
        margin: 0;
        padding: 0;
        text-align: right;
    }
}

@media all and (max-width: 31em) {
    /* No changes needed */
}