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;
}

section {
    background-color: white;
}

article:nth-child(odd) {
    background-color:#f3f8b4;
}


@media screen and (max-width:400px){
    
    body {
    width:100%;
    font-family: sans-serif;
}

header {
    text-align: center;
    width: 100%; /*960px*/
    padding: 10px 0;
    margin: 0 auto;
    
}

main {
    width:93.75%; /* 900px/960px */
    padding-left:3.125%; /* 30px/960px */
    padding-right:3.125%;
    margin: 0 auto;
}
section {
    width: 50%; /* 450px/900px */
    margin: auto;
    box-sizing: border-box;
    float:left;
}

article {
    width: 47.777778%; /* 215px/450px */
    float:left;
    padding:1.111111%; /* 5px/450px */
}

/* Media Query breakpoints */


@media screen and (max-width:400px) {
    
    body {
        font-size: 150%;
        
    }
    
    
}
    
}