/* General setup */

* {
    box-sizing: border-box;
  }
  
  body {
    margin: 0 auto;
    min-width: 1000px;
    max-width: 1400px;
  }
  
  /* Layout */
  
  section {
    float: left;
    width: 50%;
  }
  
  aside {
    float: left;
    width: 30%;
  }
  
  nav {
    float: left;
    width: 20%;
  }
  
  footer {
    clear: both;
  }
  
  header, section, aside, nav, footer {
    padding: 20px;
  }
  
  /* header and footer */
  
  header, footer {
    border-top: 5px solid #a66;
    border-bottom: 5px solid #a66;

  }
  /*
  Google's solution 
  https://korra.dawsoncollege.qc.ca/learning-area/css/styling-text/typesetting-a-homepage-finished/ 
  */  
  My changes for the exercise, skipping font
  pmcampbell
  2020-09-01
  */
  /* GENERAL TEXT STYLING  */
  /*  Give the page a site-wide font-size of 10px. */
  * {
    font-size: 10px;
  }
  /*
  Give your headings and other element types appropriate font-sizes defined using a suitable relative unit.
  */
  h2 {
      font-size: 120%
  }
  h1 {
    font-size: 150%;
  }
  /* Give your body text a suitable line-height. */
 body {
    line-height: 17px;
 }
/*  Center your top level heading on the page. */
/* Give your headings a little bit of letter-spacing to make them not too too squashed, and allow the letters to breathe a bit. */
h1, h2, h3, h4, h5 {
  letter-spacing:  5px;
}
/* Give your body text some letter-spacing and word-spacing, as appropriate. */
body {
    letter-spacing:  2px;
    word-spacing: 3px;
}
/* Give the first paragraph after each heading in the <section> a little bit of text-indentation, say 20px. */
h2 + p {
   text-indent: 20px;
}
/* LINKS */
/* Give the link, visited, focus, and hover states some colors that go with the color of the horizontal bars at the top and bottom of the page. */
/* I used a colour picker to choose similar to #a66 from header & footer */
a:link {
  color: #ed8c8c;   
}
a:visited {
  color: #6b3f3f;   
}
a:hover {
  color: #944040;    
}
/*  Make it so that links are underlined by default, but when you hover or focus them, the underline disappears.  */
a {
  text-decoration: underline;
}
a:hover, a:focus {
    text-decoration-line: none;
}
/*  Remove the default focus outline from ALL the links on the page. tbd*/
a {
  outline: none;
}

/* Give the active state a noticeably different styling so it stands out nicely, but make it still fit in with the overall page design. */
a:active {
   text-decoration: crimson wavy underline overline;
}
 /* 
 Make it so that external links have the external link icon inserted next to them.
 this is a bit messy  (size) 
 regex ^ begins with
*/
a[href^='http'] {
    background: transparent url(external-link-52.png) center right no-repeat;
    padding-right: 18px;
    background-size: 16px; 
    /* height: 16px;
    width: 16px; */
} 
/* LISTS */
/* tbd Make sure the spacing of your lists and list items works well with the styling of the overall page.
Each list item should have the same line-height as a paragraph line, and each list should have the same spacing at its top and bottom as you have between paragraphs. */
li {
     line-height: 17px;
}
/*  Give your list items a nice bullet, appropriate for the design of the page. It is up to you whether you choose a custom bullet image or something else. */
li {
    list-style-image: url(dawson-favicon.ico);
}
/* NAVIGATION MENU */
/* Style your navigation menu so that it has an appropriate look for the look and feel for the page. */
/* tbd trying https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_vertical_gray
and maybe https://www.webucator.com/how-to/how-create-vertical-navigation-menu-with-css.cfm */
nav > ul {
  list-style-type: none;
  list-style-image:  none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: green;
}

nav > li > a {
  list-style-image: none;
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

/* Change the link color on hover */
nav > li , nav > a:hover {
  list-style-image:  none;
  background-color: #555;
  color: white;
}