/* Basic CSS resets -- leveling slight inconsistencies in browsers */
html, body {
	margin:0px;
	padding:0px;
	height:100%;
}

html {
		/* Standard text-settings below */
	font-size: 1em;
    line-height: 1.4em;
}


header{
    color: #114B5F;
}

body {
  font-family: Copperplate, serif;
  background: rgb(130, 192, 154);
    /* background color, week 6, october 9th,
    background: red url(insert file here); (that makes tiled background,,, but to make it just a single one, then say no-repeat like this
    
    body {
      background: color url(../img/pathway.xxx) no-repeat fixed center;
      background-size: cover;}
    
    and it can be in body or anything! in div container, in header, in footer, etc! */
  color: rgb(29, 21, 46);
  margin: 10px; 
}

#container{
    border: 5px solid rgb(147, 219, 175);
    background: rgb(147, 219, 175);
    width: 85%;
    max-width: 900px;
    margin: auto;
}

nav ul{
    /*border: 1px solid green;*/
    list-style: none;
    padding-left: 0px;
}


nav.horizontal li{   
    display: inline;
}

nav a{
    color: rgb(241, 242, 237);
    text-decoration: none;
    background:rgb(29, 21, 46);
    padding: 5px;
    margin: 5px;
    display: inline-block;
    width: 175px;
    text-align: center;
    border-radius: 5px;
}

nav a:hover {
    background: orange;
}


figure{
    margin: 0px;
}

figure img{
    width: 100%;
}

figcaption, footer{
    font-size: 0.75em;
}

/* Minimum width for desktop screens. 
@media all and (min-width: 1024px) {

    body {
        
        background: lime; 
        
    }
    
    #container {
        width: 650px;
        background: pink;
        
    }

} /* closes 1024px+ */