/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {	
	margin: 0;	
	padding: 0;	
	border: 0;	
	font-size: 100%;	
	font: inherit;	
	vertical-align: baseline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1.5;}
ol, ul {list-style: none;}
blockquote, q {	quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: '';	content: none;}
table {border-collapse: collapse;	border-spacing: 0;}	 /* end reset*/

/*color pallet - 000000-Black, FFFFFF-White, 8a00e6-Bright Purple, AAAAAA-Grey, 2C3133-Dark Gray, DCDCDC-Light Grey*/

body {
	font-family: 'Berkshire Swash', cursive;
	font-family: 'Source Sans Pro', sans-serif;
	font-family: 'Source Code Pro', monospace;
	/*background-image: url("img/bkg.jpg")*/
}

header {

}

#grid-container {
/* aka wrapper*/
    width: 100%;
    max-width: 1000px;
 	margin:  auto;
}

h1	{
    font-family: 'Berkshire Swash', cursive;
    font-size:6.8em;
    /*padding: .5%;*/
    text-shadow: 2.5px 2.5px 1px black;
	color: #8a00e6;
	text-align: center;
}

h2  {
	font-family: Source Sans Pro, sans-serif;
	font-size: 2.0em;
	font-weight: normal;
	padding: 1%;
	text-shadow: 2px 2px 1.5px #DCDCDC;
	color: #000000;
	text-transform: capitalize;

}

h3	{
	font-family: Source Code Pro, monospace ;
	font-size: 1.4em;
	color: #000000;
	text-shadow: 2px 2px 1.5px #DCDCDC;
	text-align:center;
}

p {
	font-family: Source Code Pro, monospace;
	font-size: 16px;
	color: #000000;
}

/*grid-area: nav;*/
#nav ul {
	background: white;
	display:grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	grid-gap: 1%;
	padding: 1%;
	text-align: center;
}

#nav li {
	
}
#nav li a {
	display: block;
}
#nav a:hover {
	background-color: #DCDCDC;
}	/*grid-area: nav;*/


/* main body of pages*/


#me {
/*grid-area: me*/
	display:grid;
	grid-template-columns: 1fr;
	grid-gap: 1%;
	padding: 3%;
	background-color: #c2c0bf;
}
/*end : me*/

#about {
/*grid-area: about*/
	display:grid;
	grid-gap: 1%;
	padding: 3%;
	background-color: #c2c0bf;
}
/*end : about*/



#resume {
/*grid-area: resume tab*/
	background-color: #c2c0bf;
	display:grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 1%;
	padding: 1%;
	text-align: center;
}

/*end : resume */


#button	{
	background-color: #aaaaaa;
  	cursor: pointer;
  	font-size: 20px;
  	font-family: 'Source Sans Pro', sans-serif
}

/* resume button*/
#button1	{
	background-color: #aaaaaa;
  	cursor: pointer;
  	font-size: 20px;
  	font-family: 'Source Sans Pro', sans-serif
}

/*projects button */
#button2	{
	background-color: #aaaaaa;
  	cursor: pointer;
  	font-size: 20px;
  	font-family: 'Source Sans Pro', sans-serif
}

#button1 a:hover {
  	font-size: 115%;
}	

#button2 a:hover {
  	font-size: 115%;
}	

/* light background on mouse-over */


#works {
/*grid-area: works*/
	background: #1b1742;
	display:grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 1%;
	padding: 3%;
	margin-bottom: 50px !important;
}
/*end : works*/

/* styles the works boxes*/

.boxa {
	width: 82%;
	background: white;
	padding: 1%;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	margin-bottom: 25px;
	padding: 10px 10px;
	text-align: center;
	position: relative;
	border-radius: 15px;
}

.boxa:hover .overlay {
  opacity: 1;
}




.imagea {
  display: block;
  width: auto;
  height: auto;
  border-radius: 15px;
  align-self: center;
}

/* sets the slide feature to show more info*/
.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 88%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #AAAAAA;
}


.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

/*grid-area: contact*/
#contact {
	background: #FFFFFF;
	display:grid;
	grid-gap: 1%;
	padding: 5%;
}
/*end : contact*/

/* style boxes*/

.box1 {
	width: 95%;
	background: white;
	border: 1px solid white;
	margin-bottom: 25px;
	padding: 10px 10px;
}

.box2 {
	width: 95%;
	background: #c2c0bf;
	margin-bottom: 25px;
	padding: 20px 20px;
}
/* end style boxes*/

.social img {
	width:40px;
}

#top {
/*button to return to top when viewing site */ 	
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 100px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: gray; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: .4% 3%; /* Some padding */
  font-size: .7em; /* Increase font size */
  opacity: 65%;
  font-family: 'Source Sans Pro', sans-serif;
}

#top:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}
/*end of return to top button*/

footer {
		font-size: .8em;
		text-align: center;
		background: white;
		padding: 1%;
		border: 0px solid black;
		text-align: center;
}


/* links styles*/			
a:link {
	color: #000000; 
	background-color: transparent; 
	text-decoration: none;
	font-weight: bold;
  	}

a:visited {
	  color: #8a00e6;
	  background-color: transparent;
	  text-decoration: none;
	  }

a:hover {
	  color: #8a00e6;
	  background-color: #DCDCDC;
	  text-decoration: none;
	  }

a:active {
	color: #000000;
	background-color: transparent;
	text-decoration: none;
	}
/* end of links styles*/

img {
		max-width: 90%;
		height: auto;
		background-color: white;
	}

img.b {
	max-height: 500px;
	max-width: 950px;
	}


/* MEDIA STYLES */

/* extra small styles */
@media only screen and (min-width: 100px) and (max-width: 499px) {

	#works {
		grid-template-columns: 1fr;
		margin-bottom: 908px !important;
	}

	#contact {
		grid-template-columns: 1fr;
	}

	#me {
		padding-top: 3%;
		margin-top: 208px !important;
	}

	h1	{
	    font-size:3em;
	    padding: .5%;
	    text-shadow: 1px 1px .5px black;
	}

	h2  {
		font-size: 1.3em;
		font-weight: normal;
		padding: 1%;
		text-shadow: 1px 1px .5px #DCDCDC;
	}

	h3	{
		font-size: 1em;
		text-shadow: 1px 1px .75px #DCDCDC;
	}

	p {
		font-size: 12px;
	}

}


/* mobile styles */
@media only screen and (min-width: 500px) and (max-width: 668px) {

	#works {
		grid-template-columns: 1fr;
		margin-bottom: 808px !important;
	}

	#contact {
		grid-template-columns: 1fr;
	}

	#me {
		padding-top: 2%;
		margin-top: 208px !important;
	}

	#resume {
			padding-left: 5%;

	}

	h1	{
	    font-size:3.8em;
	    padding: .5%;
	    text-shadow: 1.5px 1.5px .5px black;
	}

	h2  {
		font-size: 1.6em;
		font-weight: normal;
		padding: 1%;
		text-shadow: 1px 1px .75px #DCDCDC;
	}

	h3	{
		font-size: 1.2em;
		text-shadow: 1px 1px .75px #DCDCDC;
	}

	p {
		font-size: 14px;
	}
}
	
/* tablet styles */
@media only screen and (min-width: 669px) and (max-width: 960px) {
	#works {
		grid-template-columns: 1fr 1fr;
		margin-bottom: 308px !important;
	}

	#contact {
		grid-template-columns: 1fr;
	}

	#me {
		padding-top:1%;
	}

	h1	{
	    font-size:3.8em;
	    padding: .5%;
	    text-shadow: 1.5px 1.5px .5px black;
	}

	h2  {
		font-size: 1.6em;
		padding: 1%;
		text-shadow: 1px 1px .75px #DCDCDC;
	}

	h3	{
		font-size: 1.2em;
		text-shadow: 1px 1px .75px #DCDCDC;
	}

	p {
		font-size: 14px;
	}
	}
/* normal desktop styles */
@media only screen and (min-width: 961px) {

	#works {
	grid-template-columns: 1fr 1fr 1fr;
	margin-bottom: 150px !important;
	}
	
	#contact {
	grid-template-columns: 1fr;
	}
	
}