body {
    width:100%; 
    background-color:tan;
    font-family: sans-serif;
    font-size: 1em;
}

h1 {
    text-align: center;
    font-size: 1.8em;
    width: 100%; 
    padding: 10px 0;
    margin: 0 auto;
    background-color:darkslateblue;
    color:aliceblue;
}

h2 {
    font-size: 1.3em;
}

section {
    width:93.75%;
    padding-left:2.125%; 
    padding-right:2.125%;
    margin: 2%;
    box-sizing: border-box;
    float:left;
}

article {
    width: 30%; 
    height: 450px;
    float:left;
    padding:1.111111%; 
    border: 1px dashed navy;
    background-color: antiquewhite;
}
 
img {
    width: 65%;
    height: auto;
    /*float: left;*/
    position: static;
    margin-left: 16%;
    margin-top: 0.5%;
    margin-bottom: 0.5%;
    padding: 1%;
}


footer {
    background-color:lightblue;
    height: auto;
    width:93.75%;
    padding-left:2.125%; 
    padding-right:2.125%;
    margin: 2%;
    box-sizing: border-box;
    text-align: center;
    float: left;
}
    
/* Media Query breakpoints */


@media screen and (max-width:590px) {
    
        body {
            background-color:tan;
            font-size:100%;
            font-family: sans-serif;
        }

        h1 {
            font-size:2.5em;
        }

        h2 {
            font-size:1.5em;
            padding-bottom: 5px;
            padding-top:10px;
        }

        article:nth-child(odd) {
            background-color:cadetblue;
        }
    
        img {
        width: 45%;
        height: auto;
        }
    
    /*
        .image1[data-src-590px] {
            content: attr(data-src-590px, url(../images/sci-fi-590px.png));
        }
    
         .image2[data-src-590px] {
            content: attr(data-src-590px, url(../images/star-trek-logo-590px.png));
        }
    
        .image3[data-src-590px] {
            content: attr(data-src-590px, url(../images/doctor_who_logo-590px.png));
        }
    */
}

@media print {
    
        body {
        width:960px;
        background-color: white;
        color: black;
        }

        header {
        width:690px;
        height:100px;
        margin:15px;
        background-color: dimgray;
        float:left;
        }

        article {
        width: 210px;
        height: 430px;
        background-color: dimgray;
        margin:15px;
        float:right;
        }

        footer {
        background-color:dimgray;
        height: auto;
        width:93.75%; 
        margin:15px;
        text-align: center;
        float:left;
        }

        img {
        display: none;
        }
    
    
    
}