body {
  max-width: 60em;
  margin: 1em auto;
  display: flex;
  flex-flow: row wrap;
  background-image: linear-gradient(#f8f0cc, #f8f077);  
color:#000000;
}
header, nav, nav a, article, aside, footer {
  flex: 1 100%;
}
@media all and (min-width: 35em) {
  main {
    flex: 3 1 0%;
  }
  aside {
    flex: 1 1 0%;
  }
  nav {
    flex: 1 1 0%;
  }
}

main, section {
  display: block;
}


* {font-family:Arial,Verdana,Helvetica,sans-serif;}
pre {font-family:"Courier New", Courier, monospace;}
h1,h2,h3,td,th,p,li,ul,ol,dl,dd,dt,blockquote,address {font-family:Arial,Verdana,Helvetica,sans-serif;}
td,th,p,li,ul,ol,dl,dd,dt,blockquote,address,pre,div { font-size:1em; }

h1 {font-size:1.5em;} 
h2 {margin-top:2em;
/*padding-top:2em;
border-top-style:solid; border-width:1px; border-color:#eee;*/
}
section h2:first-child, section p:first-child  {margin-top:0;padding-top:0; border-top-style:none;}

header {width:100%;
/* text-align:center; */
padding:1em;margin:.5em;border-style:solid; border-width:1px; border-color:#ccc;
background-image: linear-gradient(#fe0, #fc0);
}

aside {background-color:#eee;padding:1em;/* border-style:solid; border-width:1px; border-color:#999999; */
  margin:0.5em;}

article 
{padding:0;margin: 0 0 2em 0;} 

main {padding:0.5em;}

main h1 
{font-size:1.8em;background-color:#ffe;padding:0.5em;margin:0 0 1em 0;
 border-style:solid; border-width:1px; border-color:#666;
/* box-shadow: 3px 3px 10px #000;*/
 box-shadow: 2px 3px 5px #333;
 text-align:center;
}


section {background-color:#fff;padding:0.5em;margin-bottom:1em;
 border-style:solid; border-width:1px; border-color:#999;
 box-shadow: 1px 3px 5px #333;
}

section:first-child {border-width:1px;border-color:#666;}



footer {background-color:#eee;padding:1em;
  margin:0.5em;
 border-style:solid; border-width:1px; border-color:#ccc;}



header p, header h1 {font-size:1.1em;font-weight:bold;
margin:0; padding:0; }

li {margin:0.5em 0;}

a:link {color: #0000FF;}
a:visited {color: #000099;}
a:active {color: #FF0000;}
a:hover {background-color:#FFFFFF;text-decoration:none;}
a:focus {background-color:#FFFFFF;}


nav {
/* padding:0.5em; 
*/
 margin:0.5em;
}

nav p {
 font-weight:bold;
 margin:0 0 1em 0; padding:0.5em;
/* display:block;
 background-color:#ffc;
 */
}
nav ul {margin:0;padding:0;}

nav li {
 list-style:none;
 margin:0 0 0.5em 0;
 padding:0;
/*  border-style:solid; border-width:1px; border-color:#000; */
}

nav a
{text-decoration:none;
 background-color:#ffc;
 padding:0.5em;
 margin:0;
 display:block;
 border-style:solid; border-width:1px 3px 3px 1px; border-color:#999;
}

nav a:hover {background-color:#fff;text-decoration:underline;border-color:#00c;}
nav a:focus {background-color:#fff;text-decoration:underline;border-color:#00c;}