@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
/* text animation */
@keyframes animated-text{
  from{width: 0;}
  to{width: 365px;}
}
/* cursor animations */
@keyframes animated-cursor{
  from{border-right-color: rgba(0,255,0,.75);}
  to{border-right-color: transparent;}
}
/*-- header --*/
header {
	padding-top: 3%;
	text-align: center;

}

.buttons {
	font-size: 1em;
	font-family: 'Arimo', sans-serif;
	
	letter-spacing: .15em;
	background-color: transparent;
	border: none;
	padding: 15px;
	position: relative;
	padding-right: 5%;
}

	.buttons a{
		text-decoration: none;
		color: #cecece;
	}


	.buttons a:hover {
	  text-decoration: underline solid Currentcolor;
	}

/*--- body --*/
body {
	background-color: #19191f;
}

	.fadeFirst {
		opacity:0;  /* make things invisible upon start */
		-webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animation ease-in and repeat it only 1 time */
		-moz-animation:fadeIn ease-in 1;
		animation:fadeIn ease-in 1;

		-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
		-moz-animation-fill-mode:forwards;
		animation-fill-mode:forwards;

		-webkit-animation-duration:0.5s;
		-moz-animation-duration:0.5s;
		animation-duration:0.5s;
	}

	.fadeSecond {
		opacity:0;  /* make things invisible upon start */
		-webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animation ease-in and repeat it only 1 time */
		-moz-animation:fadeIn ease-in 1;
		animation:fadeIn ease-in 1;

		-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
		-moz-animation-fill-mode:forwards;
		animation-fill-mode:forwards;

		-webkit-animation-duration:1.5s;
		-moz-animation-duration:1.5s;
		animation-duration:1.5s;
	}

	#body {
		border: 3px solid #19191f;
	}
	#column1 {
		float: left;
		width: 50%;
		min-height: 500px;
	}

	#column2 {
		min-height: 500px;
	}

	#name {
		margin-top: 6%;
		margin-left: 5%;
		margin-bottom: auto;
		font-family: 'IM Fell French Canon', sans-serif;
		font-size: 800%;
		color: rgb(255, 255, 255);
	}	

	#title {
		margin-left: 5%;
		font-family: 'Roboto Mono', monospace;
		font-size: 100%;

		border-right: solid 3px rgba(0,255,0,.75);
		white-space: nowrap;
		overflow: hidden;    
		color: rgb(255, 255, 255);

		animation: animated-text 2s steps(29,end) 1s 1 normal both, animated-cursor 1000ms steps(29,end) infinite;
	}

	img {
		margin-left: 27%;
		width: 400px;
	}

/* -----------footer----------- */
footer {
	border-top: 1px solid #cecece;
	font-family: 'Roboto Mono', monospace;
	text-align: center;
	padding: 2.5%;
}
	
	footer a {
		text-decoration: none;
		color: #cecece;
	}

	footer p {
		text-decoration: none;
		color: #cecece;
	}

	#mailIcon {
		border: 1px solid rgb(206, 206, 206);
		border-radius: 25%;
		box-shadow: 0px 0px 2px rgb(206, 206, 206);
		padding: 0.5em 0.6em;
	}
	#mailIcon:hover {
		border-color: rgba(0,255,0,.75);
		box-shadow: 0px 0px 2px rgba(0,255,0,.75);
	}

	#socialIcon {
		border: 1px solid rgb(206, 206, 206);
		border-radius: 25%;
		box-shadow: 0px 0px 2px rgb(206, 206, 206);
		padding: 0.5em 0.6em;
	}
	#socialIcon:hover {
		border-color: rgba(0,255,0,.75);
		box-shadow: 0px 0px 2px rgba(0,255,0,.75);
	}

	#gitIcon {
		border: 1px solid rgb(206, 206, 206);
		border-radius: 25%;
		box-shadow: 0px 0px 2px rgb(206, 206, 206);
		padding: 0.5em 0.6em;
	}
	#gitIcon:hover {
		border-color: rgba(0,255,0,.75);
		box-shadow: 0px 0px 2px rgba(0,255,0,.75);
	}

	#end {
		margin-top: 3%;
		font-size: 0.88em;
	}