body {

  margin: 0;
  padding: 0;
  width: 100%;
 /* font-family: 'Roboto', sans-serif;*/
 font-family: 'Roboto Slab', serif;

}


header,
nav,
footer,
section,
article,
div {

  box-sizing: border-box;

}

/*
*
* Header
*
*/
.header-container {

	display: flex;
	justify-content: space-between;
	min-height: 100px;
	box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.2);
	margin: 0.625em;

}


.header-container .logo img {

	height: 100px;
	margin-top: 1em;
	margin-right: 1em;

}


.header-container .title {

	text-align:center;
	padding-right: 10px;
	line-height: 2.5em;

}


.header-container .title h1 {

	font-weight: lighter;;
}


f
.header-container .title h3 {

	color: #757575;
}

/*
*
* nav
*
*/
.nav {
	margin:20px;
}


.nav-flex-wrapper {

	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%

}


.nav-flex-box {

	text-transform: uppercase;
	text-align: center;
	padding:5px;

}


.nav-flex-box a:link {

	text-decoration: none;
	color: #9E9E9E;

}


.nav-flex-box a:hover {

	text-decoration: underline;
	color: #212121;

}


/*
*
* image section
*
*/

.front-image img {

	width: 100%;
	height: 350px;

}

/*
*
* featured-work
*
*/

.featured-work-header {

	text-align: center;
	margin:10px;

}


.featured-work {

	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;

}


.fw-box {


	background: linear-gradient(#000, white) no-repeat;
	border: 1px solid #ccc;
	margin:10px;
	width: 25%;
	height: 300px;
	max-height: 300px;
	position:relative;
	font-family: 'Lobster', cursive;
	color: white;

}


.fw-box > p {

	margin-top: 30%;
	text-align: center;
	vertical-align: middle;
	font-size:35px;
}


.fw-box-footer {

	position: absolute;
	bottom: 0;
	left: 0;
	border: 1px solid #000;
	height: 30%;
	width: 100%;
	text-align: center;
	line-height: 0.5em;
	background-color: rgba(0, 0, 0, 0.7);
	color:white;
 	font-family: 'Roboto Slab', serif;

}


.fw-box-footer a:link {

	text-decoration: none;
	color: #ccc;

}


.fw-box-footer a:visited {

	color: red;

}


.fw-box-footer a:hover {

	color: #f80;

}


.portfolio {

	background: url(../images/portfolio.png);
	background-repeat: no-repeat;
    background-size: cover;
	opacity: 0.5;
	transition:all 0.5s ease;
}


.portfolio:hover {

	opacity: 1;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);

}

.memory-game {

	background-image:  url(../images/mg.png);
	background-repeat: no-repeat;
    background-size: cover;
	cursor: pointer;
	opacity: 0.5;
	transition:all 0.5s ease;
}


.memory-game:hover {

	opacity: 1;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);

}


.arcade-game {

	background-image:  url(../images/arcade-game.png);
	background-repeat: no-repeat;
    background-size: cover;
	cursor: pointer;
	opacity: 0.5;
	transition:all 0.5s ease;

}


.arcade-game:hover {

	opacity: 1;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);


}


.feed-reader {

	background-image:  url(../images/feed_reader.png);
	background-repeat: no-repeat;
    background-size: cover;
	cursor: pointer;
	opacity: 0.5;
	transition:all 0.5s ease;
}


.feed-reader:hover {

    opacity: 1;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);


}


.restaurant-reviews {
    background-image:  url(../images/restaurants_review.png);
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
    opacity: 0.5;
    transition:all 0.5s ease;


}

.restaurant-reviews:hover {

    opacity: 1;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);


}


.book-app-tracking {
    background-image:  url(../images/myreads.png);
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
    opacity: 0.5;
    transition:all 0.5s ease;


}


.book-app-tracking:hover {

    opacity: 1;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);


}


.neighborhood-map {

    background-image:  url(../images/neighborhood_small.png);
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
    opacity: 0.5;
    transition:all 0.5s ease;


}


.neighborhood-map:hover {

    opacity: 1;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);


}
/*
*
* footer
*
*/
footer .container {

	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content:space-between;
	/*if i just set height,then the stacked containers don't take the background color*/
	min-height: 100px;
	width: 100%;
	background: #2d3c49;
	color:#02b3e4;
	font-family: 'Roboto Slab', serif;

}


.footer-box {

	text-align: center;
  	line-height: 0.5em;
  	padding:10px;

}


.fab {

	font-size: 2em;
	margin-right: 10px;

}

/* https://stackoverflow.com/questions/34637113/changing-font-awesome-icon-link-color-after-its-visited/34637210
*/
.remlink:link .fab {

	color:#02b3e4;

}


.remlink:visited .fab {

	color:#ccc;

}


.remlink:hover .fab {
	color: #ff8800;

}