#blog {
    background-image: linear-gradient(
        to bottom,
        #4c1f18 0%, #4c1f18 20%,
        #6d311d 20%, #6d311d 40%,
        #ae681a 40%, #ae681a 60%,
        #dea70d 60%, #dea70d 80%,
        #ffde00 80%, #ffde00 100%
    );
}

#blog > h1:first-child {
    /* Because the topmost colour is dark */
    color: white;
}

#blog > * {
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
}

#blog > article {
    margin: 2rem auto;
}

#blog > article > header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
#blog > article > header > :first-child {
    flex-grow: 1;
}
#blog > article > header > h1, #blog > article > header > h3 {
    margin: .75rem .25rem;
}
#blog > article > header img {
    vertical-align: middle;
    max-height: 3rem;
}

@media only screen and (max-width: 900px) {
    #blog > * {
        max-width: 95%;
    }
}

@media only screen and (max-width: 650px) {
    #blog > article > header {
        display: block;
    }
    #blog > article > header > * {
        text-align: center;
    }
}