/*****Resets *****/
* { box-sizing: border-box; }

h1, h2, h3, p, ul, ol {
	margin: 0;
	padding: 0;
}

nav ul, nav ol { list-style-type: none; }

a { text-decoration:none;}

img { max-width:100%; }

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/***** END Resets *****/

:root {
	--clr-green:#aed9ca;
	--clr-purple:#4b519f;
	--clr-black:#252526;
	--clr-gray:#f2f2f2;
	--clr-white:#fff8f8;
}

body {
    background-color: var(--clr-gray);
    font-family: 'Open Sans', sans-serif;
    color: var (--clr-black);
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 400;
    letter-spacing: 0.25px;
}

h1, h2, h3 {
	font-family: 'Inconsolata', monospace;
	font-size: 1.8rem;
	line-height: 2.5rem;
	font-weight: 400;
}

a {
	color:var(--clr-purple);
	font-size: clamp(1rem, 1.2rem, 1.6rem);
}

.logo {
	display:flex;
	align-items: center;
}

.logo-line {
	background-color:var(--clr-purple);
    width: 40px;
    height: 1px;
    margin-left: 8px;
}

.maxContainer {
	max-width:1300px;
	margin:auto;
}

/******Header******/


header {
	padding: 10px 20px;
}


/******Hamburger Menu******/

.burger-menu {
	width:32px;
	height:24px;
	display:flex;
	justify-content: space-between;
	flex-direction: column;
	align-items:flex-end;
	cursor:pointer;
}

.burger-menu .line1,
.burger-menu .line2,
.burger-menu .line3 {
	background-color:var(--clr-purple);
	height:2px;
}

.burger-menu .line1 {
	width:100%;
}

.burger-menu .line2 {
	width:50%;
}

.burger-menu .line3 {
	width:75%;
}

.section-title {
	display:flex;
	align-items:center;
}

.section-title-projects {
	display:grid;
	place-items:center;
}

.section-line {
	width: 70px;
	height: 2px;
	background-color: var(--clr-purple);
	margin-left: 20px;
}

.section-line-projects {
	width: 50px;
	height: 2px;
	background-color: var(--clr-purple);
}

#menu, #close {
    position: absolute;
    top: 0;
    right: 0;
	background-color:var(--clr-green);
	padding:25px;
}

#close {
	color:var(--clr-purple);
	font-size:1.8rem;
	font-weight:300;
}

#sidenav {
    position: absolute;
    top: 0;
    width: 50vw;
    background-color: var(--clr-green);
    min-height: 100vh;
    box-sizing: border-box;
    padding: 20px;
	z-index:1;
	position: fixed;
}

#sidenav ul {
	margin-top:45px;
	margin-left:45px;
	font-family:'Inconsolata', monospace;
	font-size:3vw;
	font-weight:600;
}

#sidenav ul li {
	padding-bottom:10px;
}

#sidenav ul a:link, #sidenav ul a:visited {
    color: var(--clr-purple);
}

#sidenav ul a:hover, #sidenav ul a:active  {
    color: var(--clr-white);
}

.offscreen {
    right: -50vw;
    transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000); /* easeOutExpo */

}

.onscreen {
    right: 0;
    transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000); /* easeOutExpo */
	background-attachment: fixed;
	
}
/******End Hamburger Menu******/

.buttons {
	font-family: 'Inconsolata', monospace;
    border-width: 2px;
    border-style: solid;
	border-color: var(--clr-purple);
	padding: 10px 45px;
	margin:20px auto;
}

.buttons:hover {
	background-color:var(--clr-purple);
	color:var(--clr-white);
}
.buttons-box {
	display:grid;
	place-items: center;
	margin-top: 20px;
}

/****** Hero Section ******/

#heroHome {
	width: 100%;
	position:relative;
	display:grid;
	grid-template-columns: 
	minmax(1em, 1fr)
	repeat(3, minmax(10rem,30rem))
	minmax(1em, 1fr);
	gap:2em;
}

#heroHome .hero-text {
	padding: 70px 15px 0 15px;
	grid-column: 2 / 4;
}
.main-headline h1, .main-headline h2 {
	font-size:2rem;
}
.main-headline {
	position:relative;
	align-self:start;
	justify-self:start;
}

.main-headline::after {
	content:"";
	position:absolute;
	background:var(--clr-green);
	opacity:.6;
	height:.6rem;
	width:70%;
	left:0;
	top:55%;
	z-index:-1;
}
#heroHome p{
	padding-top:20px;
}

.scroll {
	display: flex;
	font-family: 'Inconsolata', monospace;
	padding-top: 20px;
}

.scroll img{
	padding-left: 10px;
	width:1.2rem;
}

.heroImgBlock {
	position:relative;
	min-height:450px;
	grid-column: 3/5;
}

.heroPattern {
	background-image: url("images/pattern-green.svg");
	background-size: 25px;
	position:absolute;
	grid-column: 3/5;
	top: 70px;
	right: 40px;
	left:-95px;
	bottom:-120px;
	z-index:-1;
}

.headshot {
	position:absolute;
	max-width:320px;
	right:40px;
}

/****** About Page Hero ******/

.aboutHero {
	margin:70px auto 0px auto;
	padding:45px;
}

.aboutHero img {
	display:block;
	margin: 65px auto 0 auto;
}

.aboutText {
	margin-top:3%;
}

.projectsText {
	margin-top:3%;
}

.aboutText p {
	padding-top: 25px;
	font-weight:400;
}

.projectsText p {
	padding-top: 25px;
	font-weight:400;
}


/****** About What I Do Section ******/

#aboutWhatIDo {
    padding: 70px;
    margin: 45px auto;
    background-color: rgba(174,217,202,0.47);
}

#aboutWhatIDo h3 {
	font-size: 1.6rem;
	color:var(--clr-purple);
	order:2;
}

#aboutWhatIDo p {
	margin-top:21px;
}

#aboutWhatIDoItems {
	display:grid;
	place-items:center;
}

.about-whatIDoTitle {
	display:flex;
	align-items:center;
}

.about-line {
    width: 36px;
    height: 2px;
    background-color: var(--clr-purple);
    margin-right: 15px;
}

/****** Projects Page ******/

.projectsText {
	margin-top:3%;
}

.projectsText p {
	padding-top: 25px;
	font-weight:400;
}


/****** What I Do Section ******/
#whatIDo {
	padding: 30px;
	margin: 120px auto 45px auto;
}

#whatIDo h2 {
	font-size:1.8rem;
	padding-top:30px;
	padding-bottom:30px;
}

#whatIDo h3 {
	font-size: 1.6rem;
	margin-bottom:30px;
	text-align:center;
}
#whatIDoItems {
	display:grid;
	place-items:center;
}

/****** Projects Section ******/

#projects {
	position:relative;
}

#projectsPattern {
	background-image: url("images/pattern-green.svg");
	background-size: 21px;
	width: 27vw;
	height:55vh;
	position:absolute;
	top:0;
	left:0;
	z-index:-1;
	opacity:.7;
}

#projectsPattern2 {
	background-image: url("images/pattern-green.svg");
	background-size: 21px;
	width: 23vw;
	height:65vh;
	position:absolute;
	bottom:-10px;
	right:0;
	z-index:-1;
	opacity:.7;
}


#projectsPattern3 {
	background-image: url("images/pattern-green.svg");
	background-size: 21px;
	width: 23vw;
	height:65vh;
	position:absolute;
	top:-10px;
	right:0;
	z-index:-1;
	opacity:.7;
}


#projects h2 {
	font-size:1.8rem;
	padding-top:30px;
	padding-bottom:30px;
}

#projects h3 {
	font-size: 1.4rem;
}

#graphicProjects h2, #webProjects h2 {
	font-size:1.7rem;
	text-align: center;
}

#graphicProjects h2, #webProjects h2{
    border-bottom: 3px solid var(--clr-green);
}

#graphicProjects h3, #webProjects h3 {
	font-size: 1.2rem;
}

.projectsItems {
	display:grid;
	place-items:center;
}

.each-project {
	margin-bottom:30px;
}

.project-line {
    width: 36px;
    height: 2px;
    background-color: var(--clr-purple);
    margin-left: 15px;
}

.project-title {
	display:flex;
	align-items:center;
}

.projects-title {
    flex-direction:row-reverse;
	text-align: right;
}

.projects-title h2 {
    margin-left: 15px;
}

/******Graphic Section******/

.projectsHero {
	margin:70px auto 30px auto;
	padding:45px;
}

#graphicProjects {
	padding: 45px;
	margin:0 auto 0 auto;	
	position:relative;
}

#graphicProjects .projectsItems {
	margin-top: 45px;
}

/******Web Section******/

#webProjects {
	padding: 75px;
	margin:45px auto 0 auto;	
	position:relative;
}

#webProjects .projectsItems {
	margin-top:45px;
}
/******Contact Section******/

.contact {
	position:relative;
}

.contactContainer {
	display:grid;
	place-items:center;
	margin:150px auto;
	max-width: 1300px;
}

#contactPattern {
	position:absolute;
	top:-40px;
	left:0px;
	background-image: url("images/pattern-green.svg");
	background-size:21px;
	width: 27vw;
	height:33vh;
	opacity:.7;
}

.contactContainer h2 {
	padding-left: 20px;
	font-size:1.8rem;
	text-align:center;
}

.contact-headline::after {
    content:"";
    position:absolute;
    background:var(--clr-green);
    height: .7rem;
    opacity: .6;
    width: 81%;
    left: 40px;
    top: 54%;
    z-index:-1;
}

.contact-hdl-box {
    position:relative;
   /* align-self:start;
    justify-self:start;*/
    margin-bottom:45px;
	}

.greenBox {
	background-color:#E0ECE9;
	font-family: 'Inconsolata', monospace;
	font-size:1.2rem;
	width:90%;
	display: grid;
    place-items: center;
	padding:25px;
	margin: 10px;
	height:auto;
}
.greenBox li {
    list-style-type: none;
    padding-bottom: 15px;
}
.greenBox li:last-of-type {
    padding-bottom: 0;
}
.greenBox li span {
	font-weight:500;
}

/******END Contact Section******/

/******About Contact Section******/

.aboutContact {
	position:relative;
}

.aboutContactContainer {
	display:grid;
	place-items:center;
	margin:150px auto;
	max-width: 1300px;
}

#aboutContactPattern {
	position:absolute;
	top:-40px;
	left:0px;
	background-image: url("images/pattern-green.svg");
	background-size:21px;
	width: 35vw;
	height:39vh;
	opacity:.7;
}

.aboutContactContainer h2 {
    font-size: 1.8rem;
    text-align: center;
    letter-spacing: normal;
	color: var(--clr-purple);
}

/*.aboutContact-headline::after {
    content:"";
    position:absolute;
    background:var(--clr-green);
    height: .7rem;
    opacity: .6;
    width: 79%;
    left: 35px;
    top: 21%;
    z-index:-1;
	align-self:start;
    justify-self:start;
}*/

.aboutContact-hdl-box {
    position:relative;
    margin-bottom:45px;
	}

/****** Footer ******/

footer {
	display:grid;
	place-items:center;
	background-color:var(--clr-purple);
	color:var(--clr-white);
	font-family: 'Inconsolata', monospace;
	padding:25px;
}
footer p {
    text-align: center;
}

/****** END Footer ******/


@media only screen and (min-width: 650px) {
	
	header {
		padding: 10px 30px;
	}
	.logo-line {
		width: 70px;
		height: 2px;
		margin-left: 15px;
	}
	
	.section-line {
		width: 90px;
		height: 3px;
		background-color: var(--clr-purple);
	}
	
	.section-line-projects {
		width: 70px;
		height: 3px;
		background-color: var(--clr-purple);
	}
	
	.main-headline h1, .main-headline h2 {
		font-size:clamp(2rem,2.5rem,3rem);
	}
	
	#heroHome {
		grid-column: 2/4;
	}
	
	.main-headline::after {
		width:90%;
	}
	
	.hero-text {
		display:grid;
		grid-template-columns:minmax(90%, 500px);
		grid-column:3/5;
	}
	
	.heroImgBlock {
		grid-column:3/5;
	}
	
	.heroPattern {
		background-image: url("images/pattern-green.svg");
		background-size: 21px;
		position:absolute;
		top: 60px;
		right: 40px;
		left:-3%;
		bottom:-100px;
		z-index:-1;
}
	
	.headshot {
		position:absolute;
		min-height: 450px;
		right:20px;
	}

	#whatIDo {
		margin-top: 100px;
    }
	#whatIDoItems {
		display:grid;
		grid-template-columns: 1fr 1fr;
	}
	
	#abouWhatIDo {
		margin-top: 100px;
    }
	
	#aboutWhatIDoItems {
		display:grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 70px;
	}
	
	.projectsItems {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 2rem;
	}
	
	.greenBox {
		width:70%;
	}
	
	/*.aboutContact-headline::after {
		width: 57%;
		left: 117px;
		top: 33%;
	}*/
}

@media only screen and (min-width: 800px) {

	.logo-line {
		width: 90px;
		height: 3px;
	}
	
	#sidenav {
		background-color:none;
	}
	
	#green-bg {
		position:relative;
	}
	
	#green-bg::after {
		content:"";
		position:absolute;
		background-color:var(--clr-green);
		top:0;
		bottom:0;
		right:0;
		width:33.33%;
		z-index:-10;
		max-height:100vh;
	}
	
	#heroHome {
		margin:0 auto;
		padding: 0 5%;
		min-height:100vh;
		display:flex;
		justify-content:space-between;
		align-items:center;
	}
	
	.hero-text {
		flex-basis:50%;
		min-width: 200px;
		padding-top:0;
	}

	.main-headline h1, .main-headline h2 {
		font-size:2.5rem;
		font-weight:400;
	}
	
	.heroImgBlock {
		flex-basis:1;
		padding-top:0;
		margin-top:0;
	}
	
	.headshot {
		position:absolute;
		right:-50px;
		top:-20px;
		bottom:40px;
		max-width:400px;
		padding-right:40px;
	}
	
	.heroPattern {
		top: 30px;
		right: -30px;
		left:-390px;
		bottom:-180px;
	}
	
	.contactContainer {
		display:grid;
		justify-content: center;
		align-items:center;
		grid-template-columns: 1fr 1fr;
	}

	.contactContainer h2{
		font-size:1.8rem;
		text-align: left;
	}

	.contact-headline::after {
    	left: 21px;
	}
	
	.greenBox {
		width:90%;
		padding: 40px 20px;
	}
	
	.aboutText p {
		padding-top: 0;
	}
	
	.projectsText p {
		padding-top: 0;
	}
}

@media only screen and (min-width: 960px) {
	
	#whatIDoItems {
		display:grid;
		grid-template-columns: repeat(4, 1fr);
	}
	
	.projectsItems {
		grid-template-columns: repeat(3, 1fr);
	}
	
	#heroHome {
		max-width:1280px;
	}
    .headshot {
		position:absolute;
		right:-30px;
		width:450px;
	}
	
	.heroPattern {
		top: 50px;
		right: -30px;
		left:-430px;
		bottom:-200px;
	}
		
	.contactContainer h2{
		font-size:2rem;
	}
	
	/****** About Page Hero ******/


	.aboutText {
		display:grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 35px;
	}

}

@media only screen and (min-width: 1100px) {
	
	.heroPattern {
		top: 50px;
		right: -70px;
		left:-430px;
		bottom:-160px;
	}
	
	.contact-hdl-box {
		position:relative;
		align-self:start;
		justify-self:start;
	}
	
	.contactContainer h2{
		font-size:2.2rem;
	}
	
	.contact-headline::after {
		width: 81%;
		height:.9rem;
		top:55%;
	}
	
}