body {
    font-family: 'Grandstander', cursive;
    margin: 10px;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1e5799+0,7db9e8+5&1+0,0+11 */
background: -moz-linear-gradient(top,  rgba(30,87,153,1) 0%, rgba(125,185,232,0.55) 5%, rgba(125,185,232,0) 11%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(125,185,232,0.55) 5%,rgba(125,185,232,0) 11%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(30,87,153,1) 0%,rgba(125,185,232,0.55) 5%,rgba(125,185,232,0) 11%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#007db9e8',GradientType=0 ); /* IE6-9 */
    background-attachment: fixed;
}
h1 {
    text-decoration: underline;
    font-size: 3.0em;
}
h2 {
    text-shadow: 0 0 10px #fff;
    border-bottom: 1px solid #000;
}
nav ul {
    padding: 0;
}
nav ul li {
    display: inline-block;
}
a {
    color: #000;
}

article {
    margin: 15px;
    padding: 11px;
}
aside {
    padding: 11px;
    background-color: #eee;
    display: inline-block;
    box-sizing: border-box;
    margin: 5px;
}
aside figure {
    margin: 0;
}
@media (max-width: 599px) {
    body {
        margin: 15px 15px;
    }
    iframe {
        width: calc(100% - 15px);
    }
}
@media (min-width:600px) {
    article p {
        width: 47%;
        vertical-align: top;
        display: inline-block;
        margin: 10px 5px 10px 0;
    }
}
@media (min-width:850px) {
    article {
        margin: 35px;
    }
    aside {
        float: right;
        margin-top: 50px;
    }
    .center {
        display:flex;
        justify-content: center;
    }
}
/*

Although this is technically correct, it looks awful

@media (min-width: 1281px) {
    html {
        background: url(images/bg-1920x722.jpg) no-repeat center center fixed; 
    }
}
@media (min-width: 961px) {
    html {
        background: url(images/bg-1280x722.jpg) no-repeat center center fixed; 
    }
}
@media (min-width: 601px) {
    html {
        background: url(images/bg-960x720.jpg) no-repeat center center fixed; 
    }
}
@media (max-width: 600px) {
    html {
        background: url(images/bg-453x736.jpg) no-repeat center center fixed; 
    }
}
html { 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
*/