/****** Fonts ******/

@font-face {
	font-family: "Copperplate Gothic Light";
	src: url("../fonts/CopperplateGothicLight.ttf");
}

/****** Elements ******/

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	color: #45435E;
}

h1,
h2,
h3 {
	font-family: 'Copperplate Gothic Light', sans-serif;

}

h1 {
	font-weight: 100;
	font-size: 5em;
	text-align: center;
	margin-bottom: 0;
}

h2 {
	font-size: 2em;
	text-align: center;
	background: rgb(201,100,72);
	background: linear-gradient(180deg, rgb(78, 70, 171) 40%, rgba(255,255,255,1) 100%);
	-webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

li,
h4,
p {
	font-family: 'Avenir Next', 'Helvetica';
	font-weight: 400;
}

h3 {
	font-size: 3em;
	color: #2B275E;
	text-align: center;
}

h4 {
	font-size: 1.5em;
	text-align: center;
}

main {
	text-align: center;
}

ul {
	list-style: none;
	display: flex;
	justify-content: center;
}

li {
	padding-right: 20px;
}

a {
	color: #585858;
	text-decoration: none;
	font-weight: 400;
}

button {
	background-color: transparent;
	border: none;
	font-family: 'Avenir Next', 'Helvetica';
	font-weight: 300;
	color: #4E46AB;
	font-size: 1em;
	padding: 5px 10px;
	cursor: pointer;
}

footer {
	text-align: center;
}

svg {
	display: block;
	margin: 0 auto;
	padding-bottom: 2em;
	
}

footer i {
	padding-right: 10px;
	color: #4E46AB;
}

footer a {
		color: #4E46AB;
}

hr {
	color: #4E46AB;
	width: 75%;
	opacity: .5;

}

/****** Main Section ******/

#about,
#portfolio,
.skills,
section{
	padding-top: 3em;
}


.name-plate {
	padding-top: 5em;
	padding-bottom: 10vh;
}

#headshot {
	width: 80vw;
}

.navbar {
	overflow: hidden;
	position: fixed;
	top: 0;
	width: 100%;
	margin: 0 auto;
	padding: 30px;
	transition: .6s;
	z-index: 5;
	text-align: center;
	color: #45435E;
}

.navbar.sticky {
	padding: 20px;
	background-color: #45435E;
}

.navbar.sticky a {
	color: white;
}

.project-text,
.skills,
.web,
.graphic {
	opacity: 0;
	transform: translateY(30px);
	transition: .75s all ease-in-out;
}

.project-appear {
	opacity: 1;
	transform: translateY(0px);
}


.project img:hover {
	transform: scale(1.05);
	transition: .75s;
}

.about-text {
	margin: 1em 2em;
	text-align: left;
}

#scroll-top {
	cursor: pointer;
}

/* Project tiles */

.psydao,
.book-finder,
.boston-weather,
.employee-direct,
.ken,
.budget-me,
.registration,
.secondlife,
.opp-for-inclusion,
.dashboard,
.crisis,
.ibank
 {
	padding: 4em 0;

}

.project p {
	padding: 0 1em;
}

.project img {
	margin-left: auto;
	margin-right: auto;
	display: block;
	max-width: 80%;
	box-shadow: 1px 0px 22px -2px rgba(0,0,0,0.7);
}

.ibank img,
.secondlife img {
	box-shadow: none;
}



/******* Sub navigation *********/

.sub-nav {
	display: none;
}

.sub-nav-appear {
	display: block;
}

.sub-nav-list {
	list-style: none;
	display: block;
	padding-top: 10px;
	margin: 0 auto;
	font-size: .90em;
}

/******* Media Break at 768px *********/

@media (min-width: 768px) {
	
	h1 {
		font-size: 8em;
	}
	
	h2{
		text-align: center;
	}
	
	.skills-wrapper {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: 1fr 1fr 1fr;
		margin: 0 auto;
	}
	
	#headshot {
		width: 50vw;
	}
}

/******* Media Break at 1055px *********/

@media (min-width: 1055px) {
	
	h1 {
		font-size: 7em;
	}
	
	h2{
		margin-top: 0;
		padding-left: 52%;
	}
	
	#headshot {
		max-width: 25vw;
	}
	
	.about-section {
		display: flex;
		justify-content: center;
	}

	.about-text {
		max-width: 700px;
	}
	
	.project {
		display: grid;
		grid-template-columns: 1fr 1fr;
		padding: 5rem;
	}
	
	.project-img {
		grid-column-start: 1;
		grid-column-end: 2;
	}
	
	.project-info {
		grid-column-start: 2;
		grid-column-end: 3;
	}
	
}