/*
GENERAL
*/

body {
    font-family: "Open Sans", sans-serif; 
    /*font below overrides body since it's below (cascading)*/
}


a {
    text-decoration: none; /*removes all underlines from links on a page*/
}

#wrapper {
    max-width:940px;
    margin: 0 auto; /*0 = center in browser; auto = automatically filled in as margin for the rest of the width*/
    padding: 0 5%; /* 5% of the total width of the wrapper element*/
    /*need to add some spacing called padding to prevent the text from going right up to the 
    edge of the browser window*/
}



a {
    color: #6ab47b;
}

img {
    max-width: 100%;
}


/*
HEADING
*/

/* green header*/


header {
    float:left; 
    margin: 0 0 30px 0; /*removes problematic margin at top*/
    padding: 5px 0 0 0; /* padding on top to separate text without adding margin to top*/
    width: 100%; /* since this is now a float item,
    it will otherwise float with the images. this line as a result 
    makes the header stretch across entire page and not interfere with images*/
}

#logo {
    text-align: center;  /*align text to center. */
    margin:0; /*no spacing around the edges of the element*/
}

h1 {
    font-family: 'Changa One', sans-serif; /*font falls back to generic sans serif font*/
    margin: 15px 0; /*margin has space above and below, but none on left/right*/
    font-size: 1.75em; /*em's are a relative unit of measurement 1em = 16 size default font size*/
    font-weight: normal; /*no bolding*/
    line-height: .8em;  /*adjust spacing between lines*/
}

h2 {
    font-size: .75em;
    margin: -5px 0 0; /*negative margin: sets top, want elements to be tighter together*/
    font-weight: normal;
}

h3 {
    margin: 0 0 1em 0; /*separates it a bit from other text*/
}


/*
NAVIGATION
*/


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

nav ul {
    list-style: none;
    margin:0 10px; /*top and then 10px left and right*/
    padding: 0;
}

nav li {
    display: inline-block; 
    /*make nav links inline, but have block properties
    block means it fills the browser width and wraps nicely
    */

}

nav a {
    font-weight: 800;
    padding: 15px 10px; /*padding on all sides of links, making click targets easier*/

}

/*
FOOTER
*/

footer {
    font-size: .75em;
    text-align: center;
    clear: both; /*prevents float from being applied on either side*/
    padding-top: 50px;
    color: #ccc;
}

.social-icon {
    width: 20px; /*these are about half the size of the icons,
    creating more info in a smaller display area, add more detail*/
    height: 20px;
    margin: 0 5px;
}



/*
PAGE:PORTFOLIO
*/

#gallery {
    margin: 0; /*takes out any kind of spacing*/
    padding: 0;
    list-style: none; /*takes out bullet points*/
}


#gallery li { /*select list items in gallery*/
    float: left; /*float items appear side by side*/
    width:45%; /* each image only takes 45% of browser, with 10% left of space*/
    margin: 2.5%; /*each image has a margin on each side of 2.5% = 10%, fills extra 10% of space*/
    background-color: #f5f5f5; /*background for each caption*/
    color: #bdc3c7; 
}

#gallery li a p {
    margin: 0;
    padding: 5%;
    font-size: .75em;
    color: #bdc3c7;
}


/* PAGE ABOUT*/

.profile-photo {
    display:block; 
        /*usually only either block or inline
        block: starts on new line and takes up full width available;
        inline: only takes up as much width as necessary;

         */


        /*use auto-margins to center on page. we  don' want it to be displayed
        in-line. why not align it center? it wouldn't give us flexibiliy later
        on when we create desktop display*/
    max-width:150px;
    margin: 0 auto 30px; /*0 auto centers it, and then 30px to bottom*/
    border-radius: 100%;
        /*add rounded corners to a radius. set to 100%, so that picture will just 
        be a circle.*/
}

/*CONTACT*/

.contact-info {
    list-style:none;
    padding:0;
    margin:0;
    font-size: .9em;
}



.contact-info a{
    display:block;
    /*each image will take up space. so images have place to be displayed*/

    min-height: 20px;

    background-repeat: no-repeat;
    /*background images in css will always
    repeat by default. so only display once. no repeat*/

    background-size: 20px 20px;
    /* sizing down will make them look sharper */

    /*padding: 0 0 0 30px;*/
    /*creae space to the left*/

    margin: 0 0 10px;

}

.contact-info li.phone a{
/*no space before phone because 'phone' isn't nested inside*/
    background-image: url('../img/phone')
    /*have to use '..' because we have to step up one level since
    main.css is in css folder*/
}

.contact-info li.mail a{
/*no space before phone because 'phone' isn't nested inside*/
    background-image: url('../img/mail')
    /*have to use '..' because we have to step up one level since
    main.css is in css folder*/
}

.contact-info li.twitter a{
/*no space before phone because 'phone' isn't nested inside*/
    background-image: url('../img/twitter')
    /*have to use '..' because we have to step up one level since
    main.css is in css folder*/
}




/*
COLORS
*/

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

h1,h2 { /*style h1 and h2 elements in same style rule*/
    color:#fff;
}

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

/*nav links*/
nav a, nav a:visited { /*nav a:visited is a pseudoclass. so what this does is
    make the links stay white even if they've been visited*/
    color: #fff;
}
/*selected nav links*/
nav a.selected, nav a:hover {  /*only select those with class 'selected
    also used pseudoclass to affect hover.*/
    color: #32673f