html {
  background-color: #F0EFF4;
  font-family: Arial, Tahoma, Helvetica;
}
body {
  /*margin: 0; */
}

article, aside, footer, header {
  padding: 1rem;
  box-sizing: border-box;
}

header {
  color: #ccc;
  text-align: center;
  background-color: #295579 ;
}
  /*border-bottom: 1px solid;*/

aside {
  background-color: #E9E8ED;
}

/* TOP TOOLBAR - default navigation values */
nav {
  display: flex;
  background-color: #E9E8ED;
  padding: 10px 0;
}
nav a {
  flex: auto;
  text-align: center;
  background: #ccc;
  color: darkgreen;
  /* margin: 0 5px; */
  /* padding: 5px 0; */
  text-decoration: none;
}
nav a:hover {
  outline: 1px solid red;
  color: red;
  text-decoration: none;   /* or underline */
  cursor: pointer;
}


/* larger screen */
@media screen and (min-width: 30rem) {
  body {
    display: flex;
    flex-direction: column;
    max-width: 75rem;
    margin: auto;
  }
  main {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    border-bottom: 0.5rem solid;
  }
  nav, header {
    order: -1;
  }
  article {
    flex: 75%;
  }
  aside {
    flex: 25%;
  }
}
/* 
  font-family: Arial, Tahoma, Helvetica;  not "Century Gothic" sans-serif
  font-family: trebuchet, geneva, sans-serif;
         I added  TRDL
  repeat-x no-repeat
  background-color: transparent; This is default for body
  #ccc for dark bckground  gray #fff=white   #000=black  #936709=#8B3307=brown

      in header :
      background: url("/zinc/img/header.jpg") no-repeat cover #295579 ;

      background: url("/zinc/img/header.jpg") ;
      background-repeat: no-repeat;
      background-size: cover;
      color: gray; 
*/


/* 
         I added  TRDL
*/
h2,h3,h4 {
  color: gray;
}

pre, code, kbd, samp {
  text-align:left;
  white-space: pre-wrap;
  border-style: solid; border-color: lightblue; border-width: 1px 3px 3px 1px; 
  padding: 1px 8px;
  background: white;
  margin-left: 5px;
  margin-right: 5px;
  color:black;
  font-family: courier-prime,'Courier New',Courier,monospace;
  font-size: 1em;
  display: block;
  max-width: 100%;
}
.pgBreakAfter {
  cursor: text;
  filter: Gray;
  page-break-after: always;
}
.pgBreakBefore {
  cursor: text;
  filter: Gray;
  page-break-before: always;
}

/*a {
  flex: auto;
  color: darkgreen;
  text-decoration: none;
} */
  /*padding: 5px 0; */
  /* margin: 0 5px; */
  /*background: #ccc;*/


/*
a:hover {
  outline: 1px solid red;
  color: red;
  text-decoration: none;
  cursor: pointer; 
}
*/
/*text-decoration: underline; or none*/
