html {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 10px;
  margin: 20px;
}

/* Create positioning declarations (padding, margin, display, float, position, width, height, etc.) for the Header, 
   Nav, Main, Footer sections on your main index.html page */

h1, nav, main, footer {
  width: 140rem; 
  padding: 2rem;
}

header {
  position: fixed;
  top: 0;
}

/* For the header nav ul and header nav ul li, turn it into a horizontal navigation bar */

/* Create a rule for the list items in the navigation, using the nav ID you created earlier. You've already set up navigation to be horizontal, so this is just moving that CSS to the rule for the ID, and maybe adjusting things a little.
   Set the display for the list items to be inline-block
   Use padding and maybe a border-right or border-left to make the navigation look okay.
   Set a uniform width for the list items in your navigation. */

  #bit112-nav ul {
    display: inline-block;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: black;
  }
  
 #bit112-nav li {
    float: left;
    font-size: 1.8rem;
    border-right-style: solid;
    border-right-color: white;
    width: 15rem; 
  }
  
 #bit112-nav li a {
    display: block;
    color: white;
    text-align: center;
    padding: 1.4rem 1.6rem;
    text-decoration: none;
  }

  #bit112-nav li a:hover {
    background-color: darkgrey;
  }

/* Reports */

  #reports-nav ul {
    display: inline-block;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: black;
  } 
  
 #reports-nav li {
    float: left;
    font-size: 1.8rem;
    border-right-style: solid;
    border-right-color: white;
    width: 25.4rem; 
  }
  
 #reports-nav li a {
    display: block;
    color: white;
    text-align: center;
    padding: 1rem 1rem;
    text-decoration: none;
  } 

  #reports-nav li a:hover {
    background-color: darkgrey;
  } 

/* Website */

#website-nav ul {
  display: inline-block;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: black;
} 

#website-nav li {
  float: left;
  font-size: 1.5rem;
  border-right-style: solid;
  border-right-color: white;
  width: 25rem; 
}

#website-nav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 1.4rem 1.6rem;
  text-decoration: none;
} 

#website-nav li a:hover {
  background-color: darkgrey;
} 

/* Create styles for section containers that will be on your main page: text, color, and padding, at a minimum. */

main {
  font-size: 1.5rem;
  color: black;
  padding-top: 20rem;
}

p {font-size: 1.8rem;}

/* Dress up the header some. Color, padding, background-color, whatever */

h1 {
    font-size: 2.4rem;
    border: .5rem solid blue;
    background-color: lightskyblue;
    height: 3rem;
    text-align: center;
  }

 h2 { font-size: 2.1rem; }

  h2#main-purpose { border-bottom: .3rem solid blue; }

section#report-list {
    border: .25rem solid blue;
    background-color: lightskyblue;
    padding: 1rem;
}

  /* Create styles for the main page's footer: text, color, and padding, at a minimum */

  footer {
    padding: 1rem;
    margin: 2rem;
  }

  footer p {
    color: blue;
    font-size: 1.1rem;
  }