html,body{
	margin: 0;
	padding: 0;
	height: 100vh;
	width: 100vw;
	text-rendering:optimizeLegibility;
	overflow-x: hidden;
	scroll-behavior: smooth;

}

li{
	list-style: none;
}

a{
	text-decoration: none;
}

header{
	background-color:black;
	height: 100vh;
}

#nav-logo{
	height: 10rem;
	width: auto;
	margin-top:1em;
}

.nav-list{
	float: right;
	margin-right: 4em;
}

.nav-list-item{
	display: inline-block;
	margin: 2em 2em;
}

.nav-list-item a{
	color: darkgrey;
	cursor: pointer;
	font-family: Helvetica, Ariel,sans-serif;
	font-size: 2rem;
}


#hero-name{
	text-align: center;
	margin-top: 3.7em;
	font-size: 5rem;
	color: white;
	font-family: Helvetica, Ariel,sans-serif;
}

#hero-title{
	text-align: center;
	font-size: 2.5rem;
	color: white;
	font-family: Helvetica,Ariel,sans-serif;
}

#spec-text{
	color: white;
	text-align: center;
	margin-top: 2em;
	font-family: Helvetica,Ariel,sans-serif;
	font-size: 1.1rem;
}

#skills-title{
	text-align: center;
	font-family: Helvetica,Ariel,sans-serif;
	font-size: 3rem;
	text-decoration: underline;
}

#skills-list{
	text-align: center;
	margin-top: 12em;
	margin-bottom: 12em;
}

.skill-item{
	text-align: center;
	display: inline-block;
	padding: 0 3em;

}





#projects-div{
	background-color: black;
	padding-bottom: 10em;

}

#projects-title{
	padding-top:1em;
	color: white;
	text-align: center;
	font-family: Helvetica,Ariel,sans-serif;
	font-size: 3rem;
	text-decoration:underline;
}


.project-list{
	text-align: center;
	margin-top: 10em;
	width: 100%;

	
}

.project-item{
	display: inline-block;
	margin: 1.5em 1.5em;

	
	
	
	
}

.project-item-card{
	height: 35rem;
	width: 25rem;
	background-color: white;
	border: .5em solid black;
	border-radius: 1em;


}



.card-image{
	padding-top:.3em;
	height: 12.5rem;
	width: auto;
}


.card-title{
	font-family: Helvetica,Ariel,sans-serif;
	font-size: 1.5rem;
}

.card-desc{
	font-family: Helvetica,Ariel,sans-serif;
	line-height: 2.5em;
}

.demo-button{
	display: inline-block;
	border: .5em solid black;
	border-radius: 1.5rem;
	color:white;
	background-color: black;
	padding: .5em 1em;
	font-family: Helvetica,Ariel,sans-serif;
	margin: 1.7em .7em;
	cursor: pointer;
	text-align: center;
	font-weight: bold;
	transition:all .2s ease-in-out;


}

.demo-button:hover{
	transform: scale(1.2);
}


#contact-title{
	text-align: center;
	font-family: Helvetica,Ariel,sans-serif;
	font-size: 3rem;
	text-decoration: underline;

}

.contact-list{
	text-align: center;
	margin-top: 6.5em;
	margin-bottom: 10em;


}

.contact-item {
	text-align: center;
	cursor: pointer;
	text-decoration: none;
	margin-top: 50px;
	margin-bottom: 50px;

}

.contact-item , a {
	color: inherit;
	text-decoration:none;
	font-size: 25px;
	font-family: Helvetica,Ariel,sans-serif;

}



@media screen and (max-width:320px) {
 /* smartphones, iPhone, portrait 480x320 phones */ 
 	header{
 		padding-bottom: 15em;
 	}
 	#nav-logo{
 		display: block;
 		margin:0 auto;
 		padding-top: 2em;
 	}

 	.nav-list{
 		display: none;
 	}

 	#hero-name{
 		margin-top: 1em;
 	}
 	#skills-list{
		margin-top: 7em;
		display: block;
		padding-right: 0;
		padding-left: 0;
	}


	.project-list{
		margin-top: 5em;
		padding-left: 0;
		padding-right: 0;

	
	}	

	.project-item{
		display: inline-block;
		margin: 0 auto;

	
	
	
	
	}

	.project-item-card{
		width: 17rem;
		height: 30rem;		

	}

	.card-image{
		height: 9rem;
		width: 16.5rem;
	}

	.demo-button{
		padding: .2em .5em;
		margin: .5em .5em;
	


	}

	.contact-list{
		display: block;
		margin: 0 auto;
		padding: 0;
		


	}

	.contact-item , a {
		font-size: 1.3rem;
		font-family: Helvetica,Ariel,sans-serif;
		
	}

	#m-i-icon{
		display: none;
	}


}
@media (max-width:481px)  { 
/* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ 
	header{
 		padding-bottom: 15em;
 	}
 	#nav-logo{
 		display: block;
 		margin:0 auto;
 		padding-top: 2em;
 	}

 	.nav-list{
 		display: none;
 	}

 	#hero-name{
 		margin-top: 1em;
 	}
 	#skills-list{
		margin-top: 7em;
		display: block;
		padding-right: 0;
		padding-left: 0;
	}


	.project-list{
		margin-top: 5em;
		padding-left: 0;
		padding-right: 0;

	
	}	

	.project-item{
		display: inline-block;
		margin: 0 auto;

	
	
	
	
	}

	.project-item-card{
		width: 17rem;
		height: 30rem;

	}

	.card-image{
		height: 9rem;
		width: 16.5rem;
	}

	.demo-button{
		padding: .2em .5em;
		margin: .5em .5em;
	


	}

	.contact-list{
		display: block;
		margin: 0 auto;
		padding: 0;
		


	}

	.contact-item , a {
		font-size: 1.3rem;
		font-family: Helvetica,Ariel,sans-serif;
		
	}

	#m-i-icon{
		display: none;
	}
}
@media (max-width:641px)  { 
/* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ 
	header{
 		padding-bottom: 15em;
 	}
 	#nav-logo{
 		display: block;
 		margin:0 auto;
 		padding-top: 2em;
 	}

 	.nav-list{
 		display: none;
 	}

 	#hero-name{
 		margin-top: 1em;
 	}
 	#skills-list{
		margin-top: 7em;
		display: block;
		padding-right: 0;
		padding-left: 0;
	}


	.project-list{
		margin-top: 5em;
		padding-left: 0;
		padding-right: 0;

	
	}	

	.project-item{
		display: inline-block;
		margin: 0 auto;

	
	
	
	
	}

	.project-item-card{
		width: 17rem;
		height: 30rem;		

	}

	.card-image{
		height: 9rem;
		width: 16.5rem;
	}

	.demo-button{
		padding: .2em .5em;
		margin: .5em .5em;
	


	}

	.contact-list{
		display: block;
		margin: 0 auto;
		padding: 0;
		


	}

	.contact-item , a {
		font-size: 1.3rem;
		font-family: Helvetica,Ariel,sans-serif;
		
	}

	#m-i-icon{
		display: none;
	}
}
@media (max-width:961px)  { 
/* tablet, landscape iPad, lo-res laptops ands desktops */
	header{
 		padding-bottom: 15em;
 	}
 	#nav-logo{
 		display: block;
 		margin:0 auto;
 		padding-top: 2em;
 	}

 	.nav-list{
 		display: none;
 	}

 	#hero-name{
 		margin-top: 1em;
 	}
 	#skills-list{
		margin-top: 7em;
		display: block;
		padding-right: 0;
		padding-left: 0;
	}


	.project-list{
		margin-top: 5em;
		padding-left: 0;
		padding-right: 0;

	
	}	

	.project-item{
		display: inline-block;
		margin: 0 auto;

	
	
	
	
	}

	.project-item-card{
		width: 17rem;
		height: 30rem;		

	}

	.card-image{
		height: 9rem;
		width: 16.5rem;
	}

	.demo-button{
		padding: .2em .5em;
		margin: .5em .5em;
	


	}

	.contact-list{
		display: block;
		margin: 0 auto;
		padding: 0;
		


	}

	.contact-item , a {
		font-size: 1.3rem;
		font-family: Helvetica,Ariel,sans-serif;
		
	}

	#m-i-icon{
		display: none;
	}
 }