/****************
GENERAL
*****************/


body {
  font-family: 'Open Sans', sans-serif;

}


#wrapper  {
  max-width:  940px;
  margin: 0 auto;
  padding: 0 5%;

}

a {
  text-decoration: none;
}

img {
  max-width: 100%;  /*fill the width of the container*/
}

h3 {
  margin: 0 0 1em 0;  /*make sure margin is added under h3 titles*/
}





/******************************
HEADING
*******************************/

header {
  float: left;
  margin: 0 0 30px 0;  
  padding: 5px 0 0 0; 
  width: 100%;  /* since float, need to specify width */
}

#logo {
  text-align: center;
  margin: 0;
}

h1 {
  font-family: 'Changa One', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}

h2 {
  font-size: 1em;
  margin: -5px 0 0;
  font-weight: normal;
}

/******************************
NAVIGATION
*******************************/

nav {
  text-align: center;
  padding: 10px;
  margin: 20px 0 0;
}

nav ul {
  list-style: none;  /* safely remove any unwanted bullets*/
  margin: 0 10px;
  padding: 0;
  
}

nav li {
  display: inline-block;  /*allows inline behaviour but still size/width */
}

nav a {
  font-weight: 800;  /*selects font weight from fonts available*/
  padding: 15px 10px;  /*spaces the links to make them easier to select*/
}

/******************************
FOOTER
*******************************/

footer {
  font-size: 0.75em;
  text-align: center;
  clear: both;  /* clears both sides so it doesn't float up into images*/
  padding-top: 50px;
  color: #ccc;
}


.social-icon {
  width: 20px;
  height: 20px;
  margin: 0 5px;
}



/******************************
PAGE PORTFOLIO
*******************************/

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;  /* removes bullets from list items*/
}

#gallery li {   /*grab the list items in gallery*/
  float: left;  /* position elements side by side */
  width: 45%;  /* images take up 45% of container */
  margin: 2.5%;  /* each image gets 2.5% on both sides, 10% total */
  background: #6ab47b;  /* background of captions */
  color: #bdc3c7;  /* backup color, actually shows linked color*/
  
}

#gallery li a p {
  
  margin: 0;
  padding: 5%;
  font-size: 1.5em;
  font-family: 'Changa One', sans-serif;
  color: #FFF;
}



/******************************
PAGE ABOUT
*******************************/



.profile-photo {
 /* display: block; */   /*won't display picture with this included*/
  max-width: 150px;
  margin: 0 auto 30px;   
  border-radius: 100%;  /* border-radius adds rounded corners to picture */
}


/******************************
PAGE CONTACT
*******************************/



.contact-info {
  list-style: none;  /*removes bulletpoints*/
  padding: 0;
  margin: 0;
  font-size: 0.9em;
}

/*select each of the list anchored elements for this*/
.contact-info a {
  display: block;
  min-height:  20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;  
  padding 0 0 0 30px;  
  margin: 0 0 10px;
  
}

/* select the list element with the class phone (no space) */
.contact-info li.phone a {
  /* use ../ to go up the directory tree */
  background-image: url('../img/phone.png');
}
.contact-info li.mail a {
  /* use ../ to go up the directory tree */
  background-image: url('../img/mail.png');
}
.contact-info li.twitter a {
  /* use ../ to go up the directory tree */
  background-image: url('../img/twitter.png');
}






/****************
COLORS
*****************/

/* site body */
body {
  background-color: #545454;
  color: #FFF;
}

/* green header */
header {
  background: #6ab47b;
  border-color: #599a68;
}

/* nav background on mobile */
nav {
  background: #599a68;
}

/* logo text */
h1, h2 {
  color: #fff;
}

/* link color */
a {
  color: #6ab47b;

}



/* nav links */
nav a, nav a:visited {
  color:  #fff;
}

/* selected nav link */
nav a.selected, nav a:hover {
  color: #32673f; 
}