html, body {
    padding: 0;
    /* margin:0; */
    widows: 100%;
    height: 100%;
}

body {
    font-family: 'Roboto', sans-serif;
    /* margin: 0, 1em, 0, 1em; */
    margin-left: auto;
    margin-right: auto;
}

main {
    margin-top:150px;
    margin-bottom: 1em;
    padding:0.5em;
}


h1, h2, h3, h4, h5 {
    margin: 0;
}

header, nav, footer, section, article, div {
    box-sizing: border-box;
}




/* 
Header
*/

.header {
    /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26); */
    background-color: #fff;
    border-bottom: solid rgba(62, 69, 73, 0.349);
    /* min-height: 40px; */
    transition: min-height 0.3s;
    position: fixed;
    z-index: 100;
    width: 100%;
    height: auto;
    top:0;
}

.header__inner {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 0.5em;
}

.header__logo__div {
    width: 20%;
}

.header__logo {
    width: 80px;
    vertical-align: top;
    margin: 12px 0px 12px 0px;

	-webkit-filter: grayscale(100%);
    filter: grayscale(100%);
     /*-- Animate the article --*/
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.header__logo:hover {
	-webkit-filter: grayscale(0);
	filter: grayscale(0); 
}


.header__title__div {
    width: 80%;
    text-align: right;
}

.header__title{  
    font-family: 'Black Ops One', cursive;
    font-weight: 300;
    font-size: 48px;
    margin: 12px 0px 12px 0px;
    color: #2d3c46;
}

.header__subtitle{
    font-family: 'Black Ops One', cursive;
    font-size: 25px;
    margin: 0em;
    color: rgba(62, 69, 73, 0.349);
}


/* 
Basecamp 
*/

.basecamp {
    width: 100%;
    height: 100%;
    height: auto;
    position: relative;
    background-image: url("../img/Basecamp.jpg");
    background-size: cover;
    /* min-height: 480px; */
    margin: 1.5em 0em 1.5em 0em;
    /*-- Animate the article --*/
    -webkit-transition: 3s ease-in-out;
    transition: 3s ease-in-out;
}

.basecamp article {
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.7);
    position: absolute;
    height: 40%;
    bottom: 0;
    width: 100%;
    color: rgba(233, 224, 224, 0.5);
    padding: 2em 1em 1em 1em;
    /*-- Animate the article --*/
    -webkit-transition: .3s ease-in-out;
	transition: .5s ease-in-out;
}

.basecamp:hover {
    background-position: bottom;
}

.basecamp:hover article {
    background-color: rgba(0, 0, 0, 0.3);
}

.basecamp p {
    color: rgba(255, 255, 255, 0.7);
}



/* 
Featured Projects
*/

.featured-work {
    margin: 1em 0em 5em 0em;
    width: 100%;
    height: auto;
}


.featured-work h1 {
    font-family: 'Sunflower', sans-serif;
    font-size:38px;
    font-weight: 400;
    color: rgba(62, 69, 73, 0.6);
    margin: 1em 0.2em 0.2em 0.2em;
}

.project-board {
    width: 100%;
    height: auto;
    padding-top: 1em;
    padding-bottom: 1em;
}

.project-board a {
    text-decoration: none;
    color: #fff;
}

.project-box {
    width: 33%;
    height: auto;   
    overflow: hidden;
    position: relative;
    display: inline-block;
    min-height: 220px;
    /* margin: 0.4em; */
    padding:0.4em;
}

.project-box__inner{
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-color: grey;
    border: 1px solid rgba(81, 89, 95, 0.3);
    
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

.project-box__inner article {
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    width: 100%;
    height:100%;
    bottom: 0;
    width: 100%;
    color: #fff;
    /* padding-top: 30%; */
    padding: 6em 0.5em 0.5em 0.5em;
    /* font-size: 20px; */
    text-align: center;
    /* Move the article off canvas. */
    opacity: 0;
    /*-- Animate the article --*/
    -webkit-transition: .3s ease-in-out;
	transition: .5s ease-in-out;
}

.pixel-art {
    background-image: url("../img/pixel-art.jpg");
}

.seattle-tech-event{
    background-image: url("../img/seattle-tech-event-finder-full.jpg");
}

.about-me{
    background-image: url("../img/about-me_small.jpg");
}

.project-box:hover article {
    opacity: 1;
}

.project-box:hover .project-box__inner,
.project-box:focus .project-box__inner {
    -ms-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

/* .project-box:hover .project-box__inner:before, 
.project-box:focus .project-box__inner:before {
    display: block;
} */



.copyright {
    width: 100%;
    min-height: 30px;
    color: #919699;
    font-size: small;
    font-weight: normal;
    text-align: center;
    margin-top:100px;
}

.github-mark {
    width: 20px;
    margin: 0.5em 0em 0em 0.5em;
}




/* 
responsive 
*/

.header__inner, .project-board {
    display: flex;
    flex-wrap: wrap;
}


@media screen and (max-width: 470px) {
    .header__logo {
        width: 60px;
    }
    .header__title {
        font-size: 36px;
    }
    .header__subtitle{
        font-size: 17px;
    } 
    .basecamp {
        min-height: 280px;
        margin-bottom: 3em;
    }
    .basecamp p {
        display: none;
    }
    .featured-work h1{
        font-size: 24px;
    }
    .project-box {
        width: 100%;
        min-height: 180px;
        margin-top: 1em;
        margin-bottom: 1em;
    }
}

@media screen and (min-width: 471px) and (max-width:999px) {
    
    .basecamp {
        min-height: 400px;
        margin-bottom: 3em;
    }
    
    .project-box:nth-child(1){
        width: 50%;
        margin-top: 1em;
        margin-bottom: 1em;
    }
    .project-box:nth-child(2){
        width: 50%;
        margin-top: 1em;
        margin-bottom: 1em;
    }
    .project-box:last-child{
        width: 100%;
        min-height: 250px;
        margin-top: 1em;
        margin-bottom: 1em;
    }
}

@media screen and (min-width: 1000px) {
    main, .header__inner {
      width: 1000px;
      margin-left: auto;
      margin-right: auto;
    }
  }