* {
	box-sizing: border-box;
  }
  
  body {
	font-family: "Poppins",
	sans-serif; 
	font-size: 20px;
	color: #2B2D42;
	background: #f5f5f5;
	text-align: center;
	line-height: 1.5;
	margin:0em;
	}
	
	/* ////////////////////nav styling/////////////////// */
	
  nav {
		top: 0;
		left: 0;
		right: 0;
		z-index: 10;
		background: black;
		/* padding-bottom: .5em; */
		position: fixed;
		border-bottom: mediumvioletred 4px solid;
	}
	.profilePic{
		float: left;
		height: 90px;
		width: 90px;
		margin-right: 10px;
		-webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 0 47%, 0% 0%);
		clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 0 47%, 0% 0%);		
	}
	#badSkinBtn{
		width: 20vw;
		height: 6vw;
		position: absolute;
		left: 50vw;
		top: 50vh;
		transform: translate(-50%,-80%);
		font-family: 'Varela Round', sans-serif;
		font-size: 2vw;
		letter-spacing: 0.1em;
		color: #e8e8e8;
		border: none;
		border-radius: 10px;
		outline: none;
		background: linear-gradient(45deg,#d350db,teal,#d350db);
		background-size: 400% 400%;
		/* box-shadow: 1vw 1vw 0 lightcoral; */
		cursor: pointer;
		transition: all 0.3s ease;
	}
		#badSkinBtn:hover {
			animation: gradient 10s ease infinite;
			font-size: 2.05vw;
			box-shadow: 0.2vw 0.2vw 0 mediumvioletred;
		}
	@keyframes gradient {
		50% {
			background-position: 100% 0;
		}
	}
	h1{
		text-align: left;
		float: left;
		/* height: 100%; */
		font-size: 40px;
		margin-bottom: 0px;
		margin-top: 0px;
		margin-left: 10px;
		color: #f5f5f5;
	}
	.retroBtn{
		background: #f5f5f5;
		border: #f226d2 solid 3px;
		border-radius: .2em;
	}
	.nav-links:focus{
		list-style-type: none;
		text-align: right;
		padding-right: 10px;
	}
	
	.nav-live-link, footer{ 
		color: #f5f5f5;
		-webkit-transition-duration: .8s;
		transition-duration: .8s;
	}
	.nav-live-link:hover{
		color:red;
		text-shadow: 5px 1px 9px #f226d2;
	}

	footer{
		background:black;
	}
	
	/* //////////////////////section styling//////////////// */
	
	header {
	padding-top: 12%;
	/* border: solid 1px purple; */
	}

	.hello-world{
		/* border: solid blue 1px; */
		/* margin-top:0em; */
		/* font-size: 3em; */
		/* text-shadow: 6px 4px #d3dedc; */
	}
	.whatIdo{
		font-size:2em;
	}
  
  section {
	min-height: 200px;
	/* padding: 6% 0; */
	}

	.projectDetails, .meDetails{
		max-width: 850px;
		display: inline-flex;
	}

	/* ////////////////Project Styling ////////////// */

	/* .language-container{
		background:#1ecdc30d;
	} */
	.language{
		list-style-type: none;
	}

	.projBtn, .resume-btn{
		/* border: dashed teal 1px; */
		padding: .5em;
		text-align: center;
		text-decoration: none;
		margin-left: .2em;
		border-radius: 1em;
		color: rgb(117, 11, 117);
	}
	.projBtn:visited, .resume-btn:visited{
		color: mediumvioletred
	}

	.projBtn:hover, .resume-btn:hover{
		-webkit-transition-duration: .8s;
		transition-duration: .8s;
		background: black;
		color: white;
	}

	.photos{
		/* border: #f226d2 solid 1px; */
		width: 100%;
	}

	.iphone{
		max-height: 400px;
		margin-bottom: 1.5em;
		
	}
	.laptop{
		width: 75%;
		min-height: 200px;
		min-width: 333px
	}
	
		/* ////////////////Media queries ////////////// */
	@media only screen and (max-width: 320px){
		.projectImg{
			width: 100%;
		}
		.profilePic,h1{
			height: 0px;
			margin: 0px;
			font-size: 0px;
		}
	}

	@media only screen and (min-width: 320px) {
		.nav-links{
			list-style-type: none;

			/* padding-inline-start: 1em; */
		}
		main{
			margin:25% auto;
			max-width: 1000px;
		}
		section#projects {
			margin-top: 30px;
		}
		.profilePic,h1{
			height: 0px;
			margin: 0px;
			font-size: 0px;
		}
		.link{
			/* display: inline; */
			float: right;
			padding: .2em;
			font-size: 80%;
			/* width: 33.33%;  */
		}
		#badSkinBtn{
			top: 15vh;
		}

		.projectImg{
			width: 100%;
		}
	
		.language {
			text-align: left;
			margin-inline-start: 4em;
		}
	}

	@media only screen and (min-width: 400px){
		#badSkinBtn{
			top: 15%;
		}

		section#projects {
			margin-top: 20px;
		}
		li.link{
			margin-left: 2%;
			font-size: 79%;
		}
		.languages, .language {
			padding-left: 0px;
			margin-left: 0px;
			text-align: center;
		}
		nav{
			padding-right: 2em;
		}
	}

	@media only screen and (min-width: 480px){
		#badSkinBtn{
			top: 20%;
		}
		section#projects {
			margin-top: -10px;
		}
		.projectImg{
			max-width: 800px;
		}
		li.link{
			font-size: 100%;
		}
		section {
			min-height: 200px;
			padding: 3% 0;
			}
	}
	@media only screen and (min-width: 530px){
		section#projects {
			margin-top: -30px;
		}
		main{
			margin:20% auto;
		}
	}
	@media only screen and (min-width:600px){

		.profilePic{
			float: left;
			height: 90px;
			width: 90px;
			margin-right: 10px;
			-webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 0 47%, 0% 0%);
			clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 0 47%, 0% 0%);		
		}

		main{
			margin:15% auto;
		}
	}

	@media only screen and (min-width: 800px){
		main{
			margin:10% auto;
		}
		section#projects {
			margin-top: -70px;
		}
		h1{
			text-align: left;
			float: left;
			/* height: 100%; */
			font-size: 40px;
			margin-bottom: 0px;
			margin-top: 0px;
			margin-left: 10px;
			color: #f5f5f5;
		}
		header{
			padding-top: 5em;
		}
	}	
	@media only screen and (min-width: 1000px){

		#badSkinBtn{
			top: 25%;
		}
	}
	@media only screen and (min-width: 1500px){
		.nav-links:focus{
			text-align: center;
		}
	}