*{
	box-sizing: border-box;
	margin: 0;
	padding:0;
}

header>h1{
	font-family: 'Open Sans', sans-serif;
	padding-top: 50px;
	padding-bottom: 20px;
}

header{
	padding-left:37px;
}

h1{
	font-style: bold;
	font-size: 24px;
	color: #666565;
	letter-spacing: 0px;
	text-align: left;
	text-transform: capitalize;
	line-height: 34px;
}

h2{
	font-family: 'Open Sans', sans-serif;
	font-style:bold;
	font-size: 20px;
	color: #434242;
	padding-top: 25px;
	padding-left: 37px;
	padding-bottom: 10px;
	
}

h3{
	font-family: 'Open Sans', sans-serif;
	font-style:normal;
	font-size: 16px;
	color: #434242;
	padding-top: 25px;
	padding-bottom: 10px;
	padding-left: 37px;
}

h4{
	font-family: 'Noto Sans', sans-serif;
	font-weight:normal;
	color:#3D3D3D;
	font-size: 16px;
	line-height: 22px;
	padding: 44px 36px 16px 37px;
	text-align: center;
}
h5{
	font-family: 'Noto Sans', sans-serif;
	font-weight:900;
	color:#3D3D3D;
	font-size: 28px;
	line-height: 36px;
	padding: 10px 36px 16px 37px;
}

nav a{
	display: flex;
    flex-direction: column;
	font-family: 'Noto Sans', sans-serif;
	font-size: 16px;
	color: rgb(0, 0, 0);
	line-height: 22px;
	padding-left: 37px;
	padding-right: 36px;
	
}

main>p{
		font-family: 'Open San', sans-serif;
		font-weight: normal;
	color:#3D3D3D;
	
		font-size: 16px;
		line-height: 18px;
		padding: 20px 36px 20px 37px;	
}
#navigation a{
	display: flex;
	flex-direction: column;
	font-family: 'Noto Sans', sans-serif;
	padding-left:10px;
    text-decoration: none; 
	border:2px solid black;
	margin-bottom:10px;
	margin-right: 36px;
   
}

#navigation a:hover {
	color: white; 
	background-color: #3E3E3E;}

.current{
	color: white; 
	background-color: #3E3E3E;}

.peggy{
	display: grid;
	grid-template-columns: 1px 1fr 1px;
	
	row-gap: 20px;
}

.project1{
	grid-column:2/3;
	background-image: url("../images/potfolio.png");
	width: 100%;
	height: 248px;
	
	background-size: cover;	
}
.project2{
	grid-column: 2/3;
	
	background-image: url("../images/potfolio2.png");
	width: 100%;
	height: 248px;
	background-size: cover;	
}
.project3{
	grid-column: 2/3;
	
	background-image: url("../images/potfolio3.png");
	width: 100%;
	height: 248px;
	background-size: cover;	
}
.project4{
	grid-column: 2/3;
	
	background-image: url("../images/potfolio4.png");
	width: 100%;
	height: 248px;
	background-size: cover;	
}


.iam_container{
	display: grid;
	grid-template-columns:36px 1fr 37px;
	margin-top: 20px;
	margin-bottom: 30px;
}


main>div>h2{
	padding-left: 37px;
	position: absolute;
}
.me{
	grid-column: 2/3;
	background-image: url("../images/iam.jpg");
	width: 100%;
	height: 300px;
	background-size: cover;	
	padding-bottom: 20px;
}
.iam_content{
	grid-column: 2/3;
	font-family: 'Roboto', sans-serif;
	color:#737373;
	font-size: 16px;
	line-height: 20px;
	padding-top: 20px;
	padding-bottom: 20px;
}
.Button{
	display: none;
}

.resume{
	grid-column: 2/3;
	grid-row: 4/5;
	font-family: 'Open Sans', sans-serif;
	font-style:bold;
	text-decoration: none;
	font-size: 16px;
	color: #0336a4;
	padding-top: 20px;
}

#social{
   display: block;
   margin: 82px auto 82px auto;

}

.container1, .container2, .container3{
	display: grid;
	grid-template-columns:37px 1fr 36px;
	
	grid-row-gap: 20px;
}


.item1{
	grid-column:2/3;
	background-image: url("../images/1.png");
	width: 100%;
	height: 216px;
	background-size: cover;	
}

.item2{
    grid-column:2/3;
	background-image: url("../images/2.png");
	width: 100%;
	height: 216px;
	background-size: cover;	
}

.item3{
    grid-column:2/3;
	background-image: url("../images/3.png");
	width: 100%;
	height: 216px;
	background-size: cover;	
}

.item_a{
    grid-column:2/3;
	background-image: url("../images/sketch1.png");
	width: 100%;
	height: 216px;
	background-size: cover;	
}

.item_b{
    grid-column:2/3;
	background-image: url("../images/sketch2.png");
	width: 100%;
	height: 216px;
	background-size: cover;	
}

.item_1{
    grid-column:2/3;
	background-image: url("../images/PHOTO1.png");
	width: 100%;
	height: 216px;
	background-size: cover;	
}

.item_2{
    grid-column:2/3;
	background-image: url("../images/PHOTO2.png");
	width: 100%;
	height: 216px;
	background-size: cover;	
}

.item_3{
    grid-column:2/3;
	background-image: url("../images/PHOTO3.jpg");
	width: 100%;
	height: 216px;
	background-size: cover;	
}

.item_4{
    grid-column:2/3;
	background-image: url("../images/PHOTO4.png");
	width: 100%;
	height: 216px;
	background-size: cover;	
}

.item4, .item5{
	display: none;
}

footer{
	background-color: #EBEBEB;
	height: 80px;
    margin-top: 50px;
}
footer > p {
	font-family: 'Roboto', sans-serif;
	text-align: center;
	color:#000000;
	font-size: 15px;
	padding-top: 30px;
}

.work{
	
    width: 100%;
	height: auto;
	margin-top: 32px;
}


#description{
	font-family: 'Roboto', sans-serif;
	
	color:#737373;
	font-size: 16px;
	line-height: 24px;
	padding: 20px 36px 30px 37px;
}


.skip a{
	background: white;
	left: 0;
	padding: 7px;
	-webkit-transition: top 1s ease-out;
	transition: top 1s ease-out;
	z-index: 1;
	position: absolute;
	top: -30px;
  }
  
  .skip :focus{
	color: black;
	text-decoration: none;
	position: absolute;
	top: 5px;
  }
  
  *:focus{ 
	color: black;
	text-decoration: none;
	background: hsla(172, 20%, 65%, 0.98);
	
  }


@media screen and (min-width: 850px){
	
	header>h1{
	font-size: 24px;
	padding-left: 100px;
	padding-top: 100px;
	}

	nav a{
		
		font-family: 'Noto Sans', sans-serif;
		font-size: 16px;
		color: rgb(0, 0, 0);
		line-height: 30px;
		line-height: 22px;
		padding-right:10px;
	}
	
	
	#navigation a{
		
		border:0px solid black;
		font-family: 'Noto Sans', sans-serif;
		margin-bottom:10px;
	   
	}

	#navigation a:hover {
		color: white; 
		background-color: #3E3E3E;
		border-radius: 10px;
	}
	
	.current{
		color: white; 
		background-color: #3E3E3E;
		border-radius: 10px;}

	header{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-right: 100px;
		padding-bottom: 50px;	
	}
	.nav_link li{
		display: inline-block;
		padding-top: 100px;
	}


	main > p{
		font-family: 'Open San', sans-serif;
		font-weight: lighter;
		color: #3E3E3E;
		font-size: 30px;
		line-height: 40px;
		text-align: center;
		padding: 60px 120px 60px 100px;

		animation-duration: 4s;
		animation-name: slidein;
	}

	/* #animation{
		font-family: 'Open San', sans-serif;
		font-weight: lighter;
		color: #3E3E3E;
		font-size: 30px;
		line-height: 40px;
		text-align: center;
		padding: 60px 120px 60px 100px;
		animation-duration: 4s;
		animation-name: slidein;
	} */

	@keyframes slidein {
		from {
		  margin-right: 100%;
		  width: 300%;
		}
	  
		to {
		  margin-right: 0%;
		  width: 100%;
		}
	  }
	 

	.project{
		/* padding-left: 37px; */
		display: flex;
		max-width: 100%;
		height: auto;
		margin-bottom: 20px;	
	}

	.peggy{
		display: grid;
		grid-template-columns: 100px 1fr 1fr 100px;
		row-gap: 30px;
		column-gap: 30px;
	}

	.project1{
		grid-column:2/3;
		grid-row: 1/2;
		background-image: url("../images/potfolio.png");
		width: 100%;
		height: 450px;
		background-size: cover;	
	}
	.project2{
		grid-column: 3/4;
		grid-row: 1/2;
		background-image: url("../images/potfolio2.png");
		width: 100%;
		height: 450px;
		background-size: cover;	
	}
	.project3{
		grid-column: 2/3;
		grid-row: 2/3;
		background-image: url("../images/potfolio3.png");
		width: 100%;
		height: 450px;
		background-size: cover;	
	}
	.project4{
		grid-column: 3/4;
		grid-row: 2/3;
		background-image: url("../images/potfolio4.png");
		width: 100%;
		height: 450px;
		background-size: cover;	
	}

	/* main{
		display: inline-block;
	} */
	.iam_container{
		display: grid;
		grid-template-columns:140px 1.2fr 150px 1fr 140px;
		/* column-gap: 60px; */
	}
	.me{
		grid-column: 4/5;
		grid-row: 1/3;
		background-image: url("../images/iam.jpg");
		width: 100%;
		min-height: 600px;
		background-size: cover;	
	}
	#hello{
		grid-column: 2/3;
		grid-row: 1/2;
		font-size: 36px;
		
	}
	main>div>h2{
		padding-left: 140px;
	}
	main> h2{
		padding-top: 20px;
	}
	.iam_content{
		grid-column: 2/3;
		grid-row: 1/2;
		font-family: 'Roboto', sans-serif;
		color:#505050;
		font-size: 18px;
		line-height: 20px;
		padding-top: 20%;
		
	}
	
	.resume{
		grid-column: 2/3;
		grid-row: 2/3;
		font-family: 'Open Sans', sans-serif;
		font-style:bold;
		text-decoration: none;
		font-weight: 400;
		font-size: 24px;
		color: hsla(172, 12%, 46%, 0.98);	
	}

	.Button{
		display: block;
		grid-column: 2/3;
		grid-row: 1/2;
		max-width: 200px;
		max-height: 50px;
		padding-top: 320px;
	}
	.button{
		display: block;
		background-color: hsla(172, 15%, 28%, 0.98);
		border: none;
		color: white;
		padding: 16px 32px;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		font-size: 20px;
		margin: 4px 2px;
		cursor: pointer;
	}

	.work{
		padding-left: 140px;
		padding-right: 140px;
	}
	h4{
		font-size: 20px;
		text-align:left;
		padding-left: 23%;
		padding-top: 50px;
	}
	h5{
		font-size: 36px;
		text-align:left;
		line-height: 45px;
		font-weight: 700;
		padding-left: 23%;
		padding-right: 23%;	
	}

	#description{
		font-size: 16px;
		padding-left: 23%;
		padding-right: 23%;	
		text-align: left;
	}

	.container1{
		display: grid;
		grid-template-columns:130px 2fr 0.15fr 0.85fr 130px;
		grid-gap: 10px;
	}
	.item1{
		grid-column: 2/4;
		grid-row: 1/3;
		width: 100%;
		height: 600px;
		background-size: cover;	
	}
	.item2{
		grid-column: 2/3;
		grid-row: 3/4;
		width: 100%;
		height: 300px;
		background-size: cover;	
	}
	.item3{
		grid-column: 4/5;
		grid-row: 1/2;
		width: 100%;
		min-height: 300px;
		background-size: cover;	
	}
	.item4{
		display: block;
		background-image: url("../images/4.png");
		grid-column: 4/5;
		grid-row: 2/3;
		width: 100%;
		height: 290px;
		background-size: cover;	
	}
	.item5{
		display: block;
		background-image: url("../images/5.png");
		grid-column: 3/5;
		grid-row: 3/4;
		width: 100%;
		height: 300px;
		background-size: cover;	
	}

	.container2{
		display: grid;
		grid-template-columns:130px 1fr 1fr 130px;
		grid-gap: 10px;
	}
	.item_a{
		grid-column: 2/3;
		width: 100%;
		min-height: 400px;
		background-size: cover;	
	}
	.item_b{
		grid-column: 3/4;
		width: 100%;
		min-height: 400px;
		background-size: cover;	
	}
	main>h2{
		padding:70px 140px 30px 140px;
	}
	.container3{
		display: grid;
		grid-template-columns:130px 1fr 1fr 130px;
		grid-gap: 10px;
	}
	.item_1{
		grid-column:2/4;
		width: 100%;
		min-height: 700px;
		background-size: cover;	
	}
	.item_2{
		grid-column:2/3;
		grid-row: 2/3;
		width: 100%;
		min-height: 400px;
		background-size: cover;	
	}
	.item_3{
		grid-column:3/4;
		grid-row: 2/3;
		width: 100%;
		min-height: 400px;
		background-size: cover;	
	}
	.item_4{
		grid-column:2/4;
		grid-row: 3/4;
		width: 100%;
		min-height: 600px;
		background-size: cover;	
	}
	
	.parallax {
		background-image: url("../images/parallax.jpeg");
		width: 100%;
		min-height: 400px; 
		background-attachment: fixed;
		background-position: center;
		background-repeat: no-repeat;
		background-size:100% 60vh;
	  }
	#contact{
		font-family: 'Open Sans', sans-serif;
		font-size: 24px;
		font-style: bold;
		text-transform: uppercase;
	    text-align: center;
		color: hsla(172, 20%, 65%, 0.98);
	}
	
	.container_contact{
		font-family: 'Open Sans', sans-serif;
		font-style: bold;
		padding: 50px 100px;
		margin-left: 140px;
		margin-right: 140px;
		border-radius: 10px;
		background-color:hsla(0, 0%, 95%, 0.98);
		
	}

	input[type=text], select, textarea {
		width: 100%;
		padding: 12px;
		border: 1px solid #ccc;
		border-radius: 4px;
		box-sizing: border-box;
		margin-top: 6px;
		margin-bottom: 16px;
		resize: vertical;
	  }
	  
	  input[type=submit] {
		background-color:hsla(171, 15%, 42%, 0.98);
		color: white;
		padding: 12px 20px;
		border: none;
		border-radius: 4px;
		cursor: pointer;
	  }
	  
	  input[type=submit]:hover {
		background-color: hsla(172, 15%, 28%, 0.98);
	  }
	  
	  .container {
		border-radius: 5px;
		background-color: #f2f2f2;
		padding: 20px;
	  }
	
	  @media screen and (prefers-reduced-motion: reduce){
		html{
			scroll-behavior: auto; 
		}
	  
		.parallax{
		  -webkit-transition: none; 
		  transition: none;       
		 }
	  
		
		.parallax{
		  background-attachment: initial;
		}
	  }
}