/* this is the stylesheet for project3 */

body {
  background-color: #ff3030;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

#container {
  min-width: 700px;
  width: 80%;
  margin: auto;
  color: black;
  background-color: #ff672b;
  font-family: calibri, arial, sans-serif;
  overflow: hidden;
  /* while content and nav are floating they are pulled from the flow
  of the site, if a footer is added it will trigger the box size. Another way without a footer is overflow-this is a trick to contain the elements
    within*/
}

#content {
  font-family: calibri, arial, sans-serif;
  background-color: #ffa02b;
  float: left;
  /* with no defined width the float will take up all the space it can */
  width: 72%;
  padding-left: 5px;
  height: 300px;
}

#nav {
  font-family: calibri, arial, sans-serif;
  background-color: #ffc72b;
  float: left;
  width: 25%;
  padding-left: 5px;
  padding-right: 5px;
  height: 300px;
}

#nav ul {
  padding-left: 20px;
  list-style: none;
}

footer {
  clear: both;
}