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

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


h1{
    font-weight: normal;
    color: #FF5;
}
/* adjacecnt selcector */
header + nav {
background-color: #000;
padding: 8px;
margin: 16px 0px 0px 0px; /* top right bottom and left */
text-align: center;
}
header + nav a {
    text-decoration: none;
    color: #FFF;
}
section.hero {
    background-color: white;
    min-height:300 px;
    background-image: url(../images/spooky.jpg);
    background-size: 100%;
}
p {
    margin: 8px; /* all four sides */
    line-height: 1.6;
font-size: 90%;
}

main{
/* border: 2px solid green; */
display: flex; /* makes a flexbox parent */
flex-flow: row wrap; /* row, unless they don't fit */
}

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

}

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

footer > section.special{
    color:hotpink;
}




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