/* Global styles */

* {box-sizing: border-box;} /* added the universal selector to apply box-sizing since there are floating elements involved */

body {color: #000;} /* made the font color darker to add better contrast for accessibility */

#content {padding: 1%;} /* content is an id, not a class. changed . to # */

#wrapper > section > footer {  /* added section child dependency before footer, wrapper was changed to an id, since only used once, changed the . to a #  */
  color: #FFF;
  background-color: #BC7277;
  padding: 0 2em; /* condensed the footer for top and bottom using 0, then the 2em for left and right */
  text-align: center;
}

/* text styles */
header > h1 {
  background-image: url(../images/awesomeco_logo_mobile.png); /* added .. at the beginning to go back one folder and then forward into images */
  background-position: center; /* positioned the background */
  background-repeat: no-repeat; /* changed none to no-repeat */
  background-size: contain; /* added background size */
  text-indent: -9999px;
}

h2 {
  border-bottom: 1px solid #BC7277;
  text-align: center;
}

/* link styles */
a {color: #BE2B38;}

a:visited {color: #701515;} /* changed the color from #999 to a darker red for better contrast for accessibility */

a:hover, a:focus {color: #bd5057;} /* moved underneath a:visited to function properly */

/* Navigation styles */
nav {
  float: left;
  width: 100%;
  margin-bottom: 1em;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav > ul > li { /* added the rest of the path to li ( > ul ) */
  border: 1px solid #999;
  text-align: center;
}

nav a { /* removed the child selector >, making this work for all a within nav */
  display: block;
  text-decoration: none;
  width: 100%;
}

nav a:hover, nav a:focus {background-color: #DDD;} /* added nav a:focus for accessibility */

/* reversed the order of the media queries from smallest to largest */

/* Small screens 480px and lower */
@media only screen and (max-width: 480px) {
  
  header > h1 {background-size: contain;} /* changed background-size from 80% to auto */

  section > img {display: none;} /* removed hyphen before the > sign */

  nav a {
    padding: 0.5em; /* added after submitted, makes the buttons bigger for smartphones.  Easier to press with fingers. */
  }

}

/* small screens up to tablets */
@media only screen and (min-width: 480px) and (max-width: 768px) { /* added min-width also */
  h1 {
    /* removed the mobile background image, and placed it in the h1 selector at the beginning */
    height: 60px;
  }

  section img {
    display: block; /* fixed spelling from dispaly to display */
    margin: 0px auto;
  }

  header {
    margin: 0 auto;
    width: 90%;
  }

  nav a {
    padding: 0.5em; /* added after submitted, makes the buttons bigger for smartphones.  Easier to press with fingers. */
  }

  nav li {
    width: 50%;
    margin: 2px auto;
  }

  h3 {text-align: center;} /* fixed spelling, from aling to align */
}



/* Tablet and up */
@media only screen and (min-width: 769px) { /* changed to 769 from 768px as the small ends at 768, avoids combining the 2; changed after submitted */
  h1 {
    background-image: url(../images/awesomeco_logo.png); /* added ../ to go to the correct folder */
    background-position: 2%;
    height: 100px;
  }

  section img {
    float: left;
    margin-right: 1%;
  }

  nav {
    border-top: 1px solid #999;
    border-bottom: 1px solid #999;
    text-align: center;
  }

  nav > ul > li { /* fixed greater than sign, not a less than sign, then added > ul before the > li for the correct path to li. */
    border: none;
    display: inline-block; /* added display inline block for the links to be horizontal instead of vertical */
    /*float: left;/* /* another option instead of display: inline-block, does the same, however went with display due to the 3rd link being centered a bit better */
    margin-right: 0;
    width: 32.95%; /* changed to 32.5% with using the inline-block, else can stay at 33% if using float-left;changed after submitted */
  }

  /* removed the following, as I do not find it necessary with the current display 
  nav li:last-child {width: 33.3%;} */

  nav a {padding: 1%;}

  nav a:hover, nav a:focus {background-color: #ddd;} /* added nav a:focus for accessibility */

  ul {overflow: hidden;}   /* added overflow to handle bullets appearing over floated images */
}

/* Large screen sizes - desktops */
@media only screen and (min-width: 960px) { /* should be parentheses, not brackets, and no semi-colon */
 
  body {background-color: #DDD;}

  #wrapper {
    background-color: #FFF;
    box-shadow: 3px 3px 3px #999;
    margin: 0 auto;
    width: 960px;
  }
 }