/* navigation starts here */
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}
body {
  margin: 0px 0px 0px 0px;
  }
  
.navi-position{
	  /*background-color:rgba(255, 255, 255, 0.7);*/
	  /*box-shadow: 0px 0px 2px #424045;*/
	  width:60%;
	  height:40px;
	  padding-bottom: 20px;
	  padding-top: 20px;
	  /*top:-20px;*/
	  position: fixed;
	  z-index:10;
	  left:20%;
  }

 .logo-position{
	 /*background-color: black;*/
	 width:10%;
	 height:10%;
	 max-width: 100px;
	 min-width: 80px;
	 position: fixed;
	 z-index:11;	
	 top:5px;
	 display: flex;
	 flex-direction: row;
	 left:10%;
 }
 .logo{
 	 width:100%;
 	 /*background-color: red;*/
 }
 
#nav {
    display: flex;
    flex-direction: row;
   /* Space between each item */
    justify-content: space-around; 
   /* Below removes bullets and cleans white-space */
    list-style: none;
   /* Bonus: forces no word-wrap */
    white-space: nowrap;
}
.nav-words{
	margin:auto;
	font-family: 'Quicksand', sans-serif;
	font-size:17px;
	text-decoration: none;
	color:black;
}
.nav-words:hover{
	color:#8f8181;
}
.active a {
	padding:2px;
	/*border-bottom: 1px solid #6b6b6b;*/
}
/* navigation ends here */


/* intoduction  starts here */
.intro{
	
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	/*background-image: url("../img/bg.png");*/
	width:100vw;
	height: 100vh;
	background-color: #E0E3FF;
	
	/* background: linear-gradient(90deg, rgba(242,200,218,1) 0%, rgba(137,173,215,1) 52%, rgba(254,191,218,1) 100%);*/
}
.intro_position{
	vertical-align: middle;
	width:100%;
		}
.intro_words{
	vertical-align: top;
	position: absolute;
	left:50%;
	font-family: 'Handlee', cursive;
	color:#414141;
	width:50%;
	display: inline-block;
	top:25%;
	
}

#greeting{
	font-size: 350%;
	
}

#job_title{
	font-size: 150%;
	margin-top: -40px;
	}


.profile_picture_block{
	display: inline-block;
	justify-content: center;
	position: absolute;
	margin-top: 200px;
	left: 20%;
	height: 70%;
	width:20%;

}
#profile_picture{
	/*border-radius: 50%;*/
	justify-content: center;
	margin-left: 5%;
	height: 90%;
	/*border: 20px solid white;*/
	box-shadow: 0px 0px 5px #424045;
}

.typewrite-position{
	vertical-align: top;
	position: absolute;
	margin:auto;
	width:50%;
	display: inline-block;
	top:50%;
	left:50%;
	font-size:240%;
}

.nottypewriter{
	font-family: 'Quicksand', sans-serif;
	color: #414141;
}
.typewrite{
	font-family: 'Quicksand', sans-serif;
	color: #414141;
	margin-top: -30px;
}

/* intoduction  ends here */

/*Project starts here*/
.parallax {
	
  /* Set a specific height */
  min-height: 100vh; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.projectBlock{
	height:100vh; 
	margin-top:-100vh; 
	width:50%;
	display: block;
}

.projectText{
	display: block;
	justify-content: center;
	position: absolute;
	margin-top: 15%;
	margin-left: 10%;
	height: 50%;
	width:30%;
	font-family: 'Roboto', sans-serif;
	/*background: #999FF0;*/

}
.projectName{
	font-size:36px; 
	color: white;
	font-weight: 900;
	
}
.projectDescription{
	color:white;
	font-weight: bold;
}
a.viewDetail:visited, a.viewDetail:link{
	color:#F69081;
}

/*project end here*/

/*global*/
a{
	text-decoration: none;
}
a:visited, a:link{
	color:black;
}

/*global ends here*/

/*about me Starts here*/

.aboutMe{
	margin:auto;
	background-color: white;
	height:52%; 
	font-family:EB Garamond; 
	color:black; 
	width:101.1%;
	text-align: center;
	padding-top:4%;
	margin-left:-0.5%;
}
.quote{
	font-size:28px; 
	margin: auto; 
	margin-top: 50px;
	width: 85%;
}
.goDown-position{
	display: table-cell;
	position: absolute;
	left:50%;
	top:85%;
}
.goDown{
	width:30px; 
	height:30px; 
	position: relative; 
	animation: godown 1s infinite;
}
@keyframes godown {
   from {top: 0px;}
   to {top: 20px;}
}

.goRight{
	width:16px; 
	height:16px; 
	margin-left: 30px;
	position: relative;
	top:3px;
	position: relative; 
	animation: goRight 1s infinite;
}

.kM:hover{
	font-weight: bold;
}
@keyframes goRight {
   from {left: 0px;}
   to {right: 20px;}
}

.contbg{
	display: inline-block;
	width: 300px;
}
.container{
  margin-top:60px;
  position: relative;
  display: inline-block;
  margin-right:40px;
  margin-left:40px;
}

.overlay{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height:100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-size:contain;
  background-repeat: no-repeat;
}

.container:hover .overlay{
  opacity: 1;
  animation: shake 3s;
  animation-iteration-count: infinite;
}
.container:hover .text2{
  opacity: 1;
  transition:opacity 1s ease-in;;
  -moz-transition:opacity 1s ease-in;;
  -webkit-transition:opacity 1s ease-in;;
  -o-transition:opacity 1s ease-in;;
  -webkit-font-smoothing: antialised;
  backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-font-smoothing: subpixel-antialiased;
}
@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(13deg); }
  10% { transform: translate(-1px, -2px) rotate(-13deg); }
  20% { transform: translate(-3px, 0px) rotate(10deg); }
  30% { transform: translate(3px, 2px) rotate(2deg); }
  40% { transform: translate(1px, -1px) rotate(13deg); }
  50% { transform: translate(-1px, 2px) rotate(-10deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-10deg); }
  80% { transform: translate(-1px, -1px) rotate(13deg); }
  90% { transform: translate(1px, 2px) rotate(2deg); }
  100% { transform: translate(1px, -2px) rotate(-13deg); }
}
.text2{
 opacity: 0;
 margin-left:-23%;
 margin-top:-4%;
}
.text1, .text2 {
  color:#4d4e4c;
  font-size: 22px;
  position: absolute;
  top: 50%;
  left: 50%;
  font-family:Averia Gruesa Libre;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}
/*about me ends here*/

/*for tablet starts*/
@media (min-width: 1px) and (max-width: 960px){
	.projectBlock{
		width:100%;
	}
	.projectText{
		margin-top: 50%;
		margin-left: 20%;
		width:60%;
	
	}
	
}

@media (min-width: 960px) and (max-width: 1333px){
	
	#greeting{
		font-size: 250%;
		font-weight: 500;
		
	}
	
	#job_title{
		font-size: 100%;
		margin-top: -30px;
		}
	
	
	.profile_picture_block{
		margin-top: 180px;
	}
	#profile_picture{
		height: 70%;
		/*box-shadow: 0px 0px 5px #424045;*/
		border: hidden;
	}
	
	.typewrite-position{
		font-size:200%;
	}
	
	.typewrite{
		margin-top: -30px;
	}
	
}

/*for tablet ends*/

/*for mobile phones starts*/

@media only screen and (max-width:960px) {
	.logo-position{
		left:7%;
	}
	.intro{
		display:block;
		height:140vh;
	}
	.intro_words{
		vertical-align: top;
		top:10%;
		left:0%;
		width:100%;
		display: initial;
		text-align: center;
	}
	.profile_picture_block{
		top: 15%;
		left:-3%;
		width:100%;
		text-align: center;
		display: initial;
	}
	
	#profile_picture{
		border: hidden;
	}
	
	.typewrite-position{
		vertical-align: top;
		width:100%;
		display: inline-block;
		top:110%;
		left:0%;
		text-align: center;
		font-size: 200%;
	}
	
	.nottypewriter{
		display:block;
		padding:0;
		display: block;
		
	}
	.typewrite{
		display:block;
		padding:5%;
		margin-bottom:30px;
		display: block;
		text-align: center;
		
	}
	.goDown-position{
		display: none;
	}
	.aboutMe{
		height: 100%;
	}
	
	.quote{
		margin-top: 100px;
	}
	
	
  }
  
  @media only screen and (max-width:540px) {
	#nav{
		width:90%;

	}
	.profile_picture_block{
		text-align: center;
		display: initial;
	}
  }
/*for mobile phones ends*/