body {
    font-family: verdana;
    /* border: 10px solid hotpink; */
    background-color: #234;
    background-image: linear-gradient(#234, #222);
    color: #EEE;
    min-height: 100vh;
    /* min-width: 100vw; */
}

header {
    text-align: center;
    padding-top: 20px;
}

h1 {
    font-weight: normal;
    color: #FF5;
}

/*adjacent selector*/
header + nav {
background-color: #000;
padding: 8px;
margin: 16px 0px 0px 0px; /* 4px units top right bottom and left */
text-align: center;
}

header + nav a {
    text-decoration: none;
    color: #FFF;
}

section.hero {
    background-color: white;
    min-height: 400px;
    background-image: url(../images/cartoon.png);
    background-size: 100%; 
}

p {
    margin: 8px; /* 1 px unit is all 4 sides */
    line-height: 1.6;
    font-size: 90%;
}

main {
    /* border: 4px solid green; */
    display: flex; /*makes a flex box parent*/
    flex-flow: row wrap; /*this will make a row unless they don't fit*/
}

main > section {
    border: 2px solid #004;
    flex: 1 0 40%; /*flex grow, shrink, basis(width)*/
    margin: 16px;
    padding: 8px;
    border-radius: 4px;
}

main > section.special {
    color: #FFC;
}

footer > section.special {
    color: hotpink;
}

footer {
    background-color: #004;
    color: #CCC;
    text-align: center;
    padding: 2px;
}