:root {
	--bg: url('./IMAGES/stars.jpeg');
	--bgColor:
  }
  
#about {
    height:wrap;
    min-height:95vh;
    width: 100vw;
	overflow-y: auto;
    background-image: var(--bg);
    position: relative;
	background-color: black;
	background-position: center;
	margin-top: 5vh;
}


navbar-dark{
    background-color: black;
  }
  .fa-bars{
    color: #d3d3d3;
  }

#Contact-tile{
	
	position: absolute;
	bottom: 0;
	right:0;
	width: wrap;
	text-align: center;
	font-size: 2em;
	
	color: #fff;
	opacity:.8;
	margin-bottom: 10px;
	margin-right: 20px;
	font-family: 'Andika';
}

#Name-tile{



	font-size: 2em;
	text-transform: uppercase;
	color: #fff;
	font-family: 'Covered By Your Grace';

}
#Name-tile-mob{
	font-size: 2em;
	text-transform: uppercase;
	color: #fff;
	font-family: 'Covered By Your Grace';
}
@media only screen and (max-width: 563px) {
	#Name-tile{
		display:none
	}
	#about {
		height:wrap;
		min-height:95vh;
		width: 100vw;
		overflow-y: auto;
		background-image: var(--bg);
		position: relative;
		background-color: black;
		background-position: center;
		margin-top: 7vh;
	}
	#gen-about-me{
		color: gray;
		text-align: justify;
		text-justify: auto;
		font-size:1.5em;
		margin-left: 3vw;
	}
	#heading-about-me{
		text-align: center;
		vertical-align: center;
		margin-bottom: 3vh;
		color:#d3d3d3;
		font-size: 2em;
	}
	
}
@media only screen and (min-width: 563px) {
	#Name-tile-mob{
		display:none
	}
	#heading-about-me{
		text-align: center;
		vertical-align: center;
	
		margin-bottom: 3vh;
		color:#d3d3d3;
		font-size: 3vh;
	}
	#gen-about-me{
		color: gray;
		text-align: left;
		font-size:2vh;
		margin-left: 3vw;
	}
	
}


.about-me:hover{
	outline: none;
    border-color: #ff09e1;
    box-shadow: 0 0 10px #ff09e1;
}



#section-about-me{
	height:100vh;
	background-color:black;
	position:relative;
	display: block;
	width:100%;
}
.background-hello{
	background-color:0000;
	box-sizing: border-box;
	min-height:70vh;
	
	max-width:60%;
	border-radius: 10px;
	
	float:left;
	padding: 0;
	z-index: 50;

}
#gmail-hello{
	color:#5e6472;
	margin-right:1vw;
	margin-left:1vw;
}
#gmail-hello:hover{
	color:rgb(255, 42, 42)
}
#linkedIn-hello{
	color:#5e6472
}
#linkedIn-hello:hover{
	color:rgb(19, 23, 255)
}
#github-hello{
	color:#5e6472
}
#github-hello:hover{
	color:#1ABC9C
}
.background-hello h1{
	text-align: center;
	padding-top:5%;
	color:#d3d3d3;
	font-size:60px;

}

.section-hello{
	box-sizing: border-box;
}




#github-icon{
	font-size:48px;
	color:red;
}
.icons8-github { 
	margin-left:38%;
	display: inline-block;
	width: 60px;
	height: 60px;
	background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4Igp3aWR0aD0iNDgiIGhlaWdodD0iNDgiCnZpZXdCb3g9IjAgMCAxNzIgMTcyIgpzdHlsZT0iIGZpbGw6IzAwMDAwMDsiPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0ibm9uemVybyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZS1saW5lY2FwPSJidXR0IiBzdHJva2UtbGluZWpvaW49Im1pdGVyIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS1kYXNoYXJyYXk9IiIgc3Ryb2tlLWRhc2hvZmZzZXQ9IjAiIGZvbnQtZmFtaWx5PSJub25lIiBmb250LXdlaWdodD0ibm9uZSIgZm9udC1zaXplPSJub25lIiB0ZXh0LWFuY2hvcj0ibm9uZSIgc3R5bGU9Im1peC1ibGVuZC1tb2RlOiBub3JtYWwiPjxwYXRoIGQ9Ik0wLDE3MnYtMTcyaDE3MnYxNzJ6IiBmaWxsPSJub25lIj48L3BhdGg+PGcgZmlsbD0iIzFhYmM5YyI+PHBhdGggZD0iTTc4LjExNjY3LDE1LjA1Yy0zMi45NjY2NywzLjU4MzMzIC01OS40ODMzMywzMC4xIC02My4wNjY2Nyw2Mi4zNWMtMy41ODMzMywzMy42ODMzMyAxNS43NjY2Nyw2My43ODMzMyA0NS4xNSw3NS4yNWMyLjE1LDAuNzE2NjcgNC4zLC0wLjcxNjY3IDQuMywtMy41ODMzM3YtMTEuNDY2NjdjMCwwIC0yLjg2NjY3LDAuNzE2NjcgLTYuNDUsMC43MTY2N2MtMTAuMDMzMzMsMCAtMTQuMzMzMzMsLTguNiAtMTUuMDUsLTEzLjYxNjY3Yy0wLjcxNjY3LC0yLjg2NjY3IC0yLjE1LC01LjAxNjY3IC00LjMsLTcuMTY2NjdjLTIuMTUsLTAuNzE2NjcgLTIuODY2NjcsLTAuNzE2NjcgLTIuODY2NjcsLTEuNDMzMzNjMCwtMS40MzMzMyAyLjE1LC0xLjQzMzMzIDIuODY2NjcsLTEuNDMzMzNjNC4zLDAgNy44ODMzMyw1LjAxNjY3IDkuMzE2NjcsNy4xNjY2N2MzLjU4MzMzLDUuNzMzMzMgNy44ODMzMyw3LjE2NjY3IDEwLjAzMzMzLDcuMTY2NjdjMi44NjY2NywwIDUuMDE2NjcsLTAuNzE2NjcgNi40NSwtMS40MzMzM2MwLjcxNjY3LC01LjAxNjY3IDIuODY2NjcsLTEwLjAzMzMzIDcuMTY2NjcsLTEyLjljLTE2LjQ4MzMzLC0zLjU4MzMzIC0yOC42NjY2NywtMTIuOSAtMjguNjY2NjcsLTI4LjY2NjY3YzAsLTcuODgzMzMgMy41ODMzMywtMTUuNzY2NjcgOC42LC0yMS41Yy0wLjcxNjY3LC0xLjQzMzMzIC0xLjQzMzMzLC01LjAxNjY3IC0xLjQzMzMzLC0xMC4wMzMzM2MwLC0yLjg2NjY3IDAsLTYuNDUgMS40MzMzMywtOS4zMTY2N2MwLC0xLjQzMzMzIDEuNDMzMzMsLTIuMTUgMi4xNSwtMi4xNWgwLjcxNjY3YzMuNTgzMzMsMC43MTY2NyAxMC43NSwyLjg2NjY3IDE3LjIsOS4zMTY2N2M0LjMsLTEuNDMzMzMgOS4zMTY2NywtMi4xNSAxNC4zMzMzMywtMi4xNWM1LjAxNjY3LDAgMTAuMDMzMzMsMC43MTY2NyAxNC4zMzMzMywyLjE1YzYuNDUsLTYuNDUgMTQuMzMzMzMsLTguNiAxNy45MTY2NywtOS4zMTY2N2gwLjcxNjY3YzEuNDMzMzMsMCAyLjE1LDAuNzE2NjcgMi44NjY2NywyLjE1YzAsMi44NjY2NyAwLDYuNDUgMCw5LjMxNjY3YzAsNS43MzMzMyAtMC43MTY2Nyw4LjYgLTEuNDMzMzMsMTAuMDMzMzNjNS4wMTY2Nyw1LjczMzMzIDguNiwxMi45IDguNiwyMS41YzAsMTUuNzY2NjcgLTEyLjE4MzMzLDI1LjA4MzMzIC0yOC42NjY2NywyOC42NjY2N2M0LjMsMy41ODMzMyA3LjE2NjY3LDEwLjAzMzMzIDcuMTY2NjcsMTYuNDgzMzN2MTguNjMzMzNjMCwyLjE1IDIuMTUsNC4zIDUuMDE2NjcsMy41ODMzM2MyNi41MTY2NywtMTAuNzUgNDUuMTUsLTM2LjU1IDQ1LjE1LC02Ni42NWMwLC00MyAtMzYuNTUsLTc2LjY4MzMzIC03OS41NSwtNzEuNjY2Njd6Ij48L3BhdGg+PC9nPjwvZz48L3N2Zz4=') 50% 50% no-repeat;
	background-size: 100%; }
.icons8-google-plus { 
	display: inline-block;
	width: 60px;
	height: 60px;
	background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4Igp3aWR0aD0iNDgiIGhlaWdodD0iNDgiCnZpZXdCb3g9IjAgMCAxNzIgMTcyIgpzdHlsZT0iIGZpbGw6IzAwMDAwMDsiPjxkZWZzPjxsaW5lYXJHcmFkaWVudCB4MT0iMzUuMzI0NSIgeTE9IjM1LjMyNDUiIHgyPSIxMzYuNjc1NSIgeTI9IjEzNi42NzU1IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgaWQ9ImNvbG9yLTFfa2tBTjNmT29jR29oX2dyMSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjZjQ0ZjVhIj48L3N0b3A+PHN0b3Agb2Zmc2V0PSIwLjQ0MyIgc3RvcC1jb2xvcj0iI2VlM2Q0YSI+PC9zdG9wPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI2U1MjAzMCI+PC9zdG9wPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0ibm9uemVybyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZS1saW5lY2FwPSJidXR0IiBzdHJva2UtbGluZWpvaW49Im1pdGVyIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS1kYXNoYXJyYXk9IiIgc3Ryb2tlLWRhc2hvZmZzZXQ9IjAiIGZvbnQtZmFtaWx5PSJub25lIiBmb250LXdlaWdodD0ibm9uZSIgZm9udC1zaXplPSJub25lIiB0ZXh0LWFuY2hvcj0ibm9uZSIgc3R5bGU9Im1peC1ibGVuZC1tb2RlOiBub3JtYWwiPjxwYXRoIGQ9Ik0wLDE3MnYtMTcyaDE3MnYxNzJ6IiBmaWxsPSJub25lIj48L3BhdGg+PGc+PHBhdGggZD0iTTE1Ny42NjY2Nyw4NmMwLDM5LjU3NzkyIC0zMi4wODg3NSw3MS42NjY2NyAtNzEuNjY2NjcsNzEuNjY2NjdjLTM5LjU3NzkyLDAgLTcxLjY2NjY3LC0zMi4wODg3NSAtNzEuNjY2NjcsLTcxLjY2NjY3YzAsLTM5LjU3NzkyIDMyLjA4ODc1LC03MS42NjY2NyA3MS42NjY2NywtNzEuNjY2NjdjMzkuNTc3OTIsMCA3MS42NjY2NywzMi4wODg3NSA3MS42NjY2Nyw3MS42NjY2N3oiIGZpbGw9InVybCgjY29sb3ItMV9ra0FOM2ZPb2NHb2hfZ3IxKSI+PC9wYXRoPjxwYXRoIGQ9Ik0xMDMuMDc0NTgsNzUuMjVoLTM4LjU3NDU4djE3LjkxNjY3aDIxLjE3NzVjLTUuMjUzMTcsOC42NjA5MiAtMTEuNTU2MjUsMTAuNzUgLTE3LjU5NDE3LDEwLjc1Yy0xMS44NzUxNywwIC0xNy45MTY2NywtMTAuNjMxNzUgLTE3LjkxNjY3LC0xNy45MTY2N2MwLC02Ljk0ODA4IDcuMzgxNjcsLTE3LjkxNjY3IDE3LjkxNjY3LC0xNy45MTY2N2M1LjM3NSwwIDEwLjI3NywxLjk4NTE3IDE0LjA0NjY3LDUuMjQ5NThsMTEuMjkxMDgsLTExLjEyOTgzYy01LjczMzMzLC01LjI0OTU4IC0xMS45NzkwOCwtMTIuMDM2NDIgLTI1LjMzNzc1LC0xMi4wMzY0MmMtMTcuODEyNzUsMCAtMzUuODMzMzMsMTQuOTUzMjUgLTM1LjgzMzMzLDM1LjgzMzMzYzAsMTcuODEyNzUgMTQuMzE1NDIsMzUuODMzMzMgMzUuODMzMzMsMzUuODMzMzNjMjIuMzA2MjUsMCAzNS44MzMzMywtMTguMDIwNTggMzUuODMzMzMsLTM1LjgzMzMzYzAsLTQuMTc4MTcgLTAuODQyMDgsLTEwLjc1IC0wLjg0MjA4LC0xMC43NXoiIGZpbGw9IiMwMDAwMDAiIG9wYWNpdHk9IjAuMDUiPjwvcGF0aD48cGF0aCBkPSJNMTAxLjI4MjkyLDc3LjA0MTY3aC0zNC45OTEyNXYxNC4zMzMzM2gyMS4xNzc1Yy0zLjQ3OTQyLDkuNDEzNDIgLTExLjA0MzgzLDE0LjMzMzMzIC0xOS4zODU4MywxNC4zMzMzM2MtMTEuODc1MTcsMCAtMTkuNzA4MzMsLTEwLjEyNjUgLTE5LjcwODMzLC0xOS43MDgzM2MwLC05LjQxMzQyIDguNTAzMjUsLTE5LjcwODMzIDE5LjcwODMzLC0xOS43MDgzM2M1LjM3NSwwIDEwLjI3NywxLjk4NTE3IDE0LjA0NjY3LDUuMjQ5NThsOS40OTk0MiwtOS4zMzgxN2MtNS43MzMzMywtNS4yNDk1OCAtMTIuNjc0MjUsLTEwLjI0NDc1IC0yMy41NDYwOCwtMTAuMjQ0NzVjLTE3LjgxMjc1LDAgLTM0LjA0MTY3LDE0LjY5NTI1IC0zNC4wNDE2NywzNC4wNDE2N2MwLDE3LjgxMjc1IDE0LjM3NjMzLDM0LjA0MTY3IDM0LjA0MTY3LDM0LjA0MTY3YzIwLjA1OTUsMCAzNC4wNDE2NywtMTYuMjI4OTIgMzQuMDQxNjcsLTM0LjA0MTY3YzAsLTQuMTc4MTcgLTAuODQyMDgsLTguOTU4MzMgLTAuODQyMDgsLTguOTU4MzN6IiBmaWxsPSIjMDAwMDAwIiBvcGFjaXR5PSIwLjA3Ij48L3BhdGg+PHBhdGggZD0iTTk5LjY3MDQyLDc5LjU1bC0wLjE3OTE3LC0wLjcxNjY3aC0zMS40MDc5MnYxMC43NWgyMS4xNzc1Yy0xLjcwOTI1LDEwLjE2NTkyIC0xMC41Mjc4MywxNy45MTY2NyAtMjEuMTc3NSwxNy45MTY2N2MtMTEuODc1MTcsMCAtMjEuNSwtOS42MjQ4MyAtMjEuNSwtMjEuNWMwLC0xMS44NzUxNyA5LjYyNDgzLC0yMS41IDIxLjUsLTIxLjVjNS4zNzUsMCAxMC4yNzcsMS45ODUxNyAxNC4wNDY2Nyw1LjI0OTU4bDcuNzA3NzUsLTcuNTQ2NWMtNS43MzMzMywtNS4yNDk1OCAtMTMuMzY5NDIsLTguNDUzMDggLTIxLjc1NDQyLC04LjQ1MzA4Yy0xNy44MTI3NSwwIC0zMi4yNSwxNC40MzcyNSAtMzIuMjUsMzIuMjVjMCwxNy44MTI3NSAxNC40MzcyNSwzMi4yNSAzMi4yNSwzMi4yNWMxNy44MTI3NSwwIDMyLjI1LC0xNC40MzcyNSAzMi4yNSwtMzIuMjVjMCwtMi4yMTA5MiAtMC4yMzY1LC00LjM2NDUgLTAuNjYyOTIsLTYuNDV6IiBmaWxsPSIjZmZmZmZmIj48L3BhdGg+PHBhdGggZD0iTTEzNy45NTgzMyw3NS4yNWgtNS4zNzV2LTUuMzc1YzAsLTIuOTY3IC0yLjQwOCwtNS4zNzUgLTUuMzc1LC01LjM3NWgtMy41ODMzM2MtMi45NjcsMCAtNS4zNzUsMi40MDggLTUuMzc1LDUuMzc1djUuMzc1aC01LjM3NWMtMi45NjcsMCAtNS4zNzUsMi40MDggLTUuMzc1LDUuMzc1djMuNTgzMzNjMCwyLjk2NyAyLjQwOCw1LjM3NSA1LjM3NSw1LjM3NWg1LjM3NXY1LjM3NWMwLDIuOTY3IDIuNDA4LDUuMzc1IDUuMzc1LDUuMzc1aDMuNTgzMzNjMi45NjcsMCA1LjM3NSwtMi40MDggNS4zNzUsLTUuMzc1di01LjM3NWg1LjM3NWMyLjk2NywwIDUuMzc1LC0yLjQwOCA1LjM3NSwtNS4zNzV2LTMuNTgzMzNjMCwtMi45NjcgLTIuNDA4LC01LjM3NSAtNS4zNzUsLTUuMzc1eiIgZmlsbD0iIzAwMDAwMCIgb3BhY2l0eT0iMC4wNSI+PC9wYXRoPjxwYXRoIGQ9Ik0xMzcuOTU4MzMsNzcuMDQxNjdoLTcuMTY2Njd2LTcuMTY2NjdjMCwtMS45NzggLTEuNjA1MzMsLTMuNTgzMzMgLTMuNTgzMzMsLTMuNTgzMzNoLTMuNTgzMzNjLTEuOTc4LDAgLTMuNTgzMzMsMS42MDUzMyAtMy41ODMzMywzLjU4MzMzdjcuMTY2NjdoLTcuMTY2NjdjLTEuOTc4LDAgLTMuNTgzMzMsMS42MDUzMyAtMy41ODMzMywzLjU4MzMzdjMuNTgzMzNjMCwxLjk3OCAxLjYwNTMzLDMuNTgzMzMgMy41ODMzMywzLjU4MzMzaDcuMTY2Njd2Ny4xNjY2N2MwLDEuOTc4IDEuNjA1MzMsMy41ODMzMyAzLjU4MzMzLDMuNTgzMzNoMy41ODMzM2MxLjk3OCwwIDMuNTgzMzMsLTEuNjA1MzMgMy41ODMzMywtMy41ODMzM3YtNy4xNjY2N2g3LjE2NjY3YzEuOTc4LDAgMy41ODMzMywtMS42MDUzMyAzLjU4MzMzLC0zLjU4MzMzdi0zLjU4MzMzYzAsLTEuOTc4IC0xLjYwNTMzLC0zLjU4MzMzIC0zLjU4MzMzLC0zLjU4MzMzeiIgZmlsbD0iIzAwMDAwMCIgb3BhY2l0eT0iMC4wNyI+PC9wYXRoPjxwYXRoIGQ9Ik0xMjMuNjI1LDY4LjA4MzMzaDMuNTgzMzNjMC45ODksMCAxLjc5MTY3LDAuODAyNjcgMS43OTE2NywxLjc5MTY3djI1LjA4MzMzYzAsMC45ODkgLTAuODAyNjcsMS43OTE2NyAtMS43OTE2NywxLjc5MTY3aC0zLjU4MzMzYy0wLjk4OSwwIC0xLjc5MTY3LC0wLjgwMjY3IC0xLjc5MTY3LC0xLjc5MTY3di0yNS4wODMzM2MwLC0wLjk4OSAwLjgwMjY3LC0xLjc5MTY3IDEuNzkxNjcsLTEuNzkxNjd6IiBmaWxsPSIjZmZmZmZmIj48L3BhdGg+PHBhdGggZD0iTTExMi44NzUsNzguODMzMzNoMjUuMDgzMzNjMC45ODksMCAxLjc5MTY3LDAuODAyNjcgMS43OTE2NywxLjc5MTY3djMuNTgzMzNjMCwwLjk4OSAtMC44MDI2NywxLjc5MTY3IC0xLjc5MTY3LDEuNzkxNjdoLTI1LjA4MzMzYy0wLjk4OSwwIC0xLjc5MTY3LC0wLjgwMjY3IC0xLjc5MTY3LC0xLjc5MTY3di0zLjU4MzMzYzAsLTAuOTg5IDAuODAyNjcsLTEuNzkxNjcgMS43OTE2NywtMS43OTE2N3oiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L2c+PC9nPjwvc3ZnPg==') 50% 50% no-repeat;
	background-size: 100%; }
.icons8-facebook { 
	display: inline-block;
	width: 60px;
	height: 60px;
	background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4Igp3aWR0aD0iNDgiIGhlaWdodD0iNDgiCnZpZXdCb3g9IjAgMCAxNzIgMTcyIgpzdHlsZT0iIGZpbGw6IzAwMDAwMDsiPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0ibm9uemVybyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZS1saW5lY2FwPSJidXR0IiBzdHJva2UtbGluZWpvaW49Im1pdGVyIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS1kYXNoYXJyYXk9IiIgc3Ryb2tlLWRhc2hvZmZzZXQ9IjAiIGZvbnQtZmFtaWx5PSJub25lIiBmb250LXdlaWdodD0ibm9uZSIgZm9udC1zaXplPSJub25lIiB0ZXh0LWFuY2hvcj0ibm9uZSIgc3R5bGU9Im1peC1ibGVuZC1tb2RlOiBub3JtYWwiPjxwYXRoIGQ9Ik0wLDE3MnYtMTcyaDE3MnYxNzJ6IiBmaWxsPSJub25lIj48L3BhdGg+PGcgZmlsbD0iIzAwMjFmZiI+PHBhdGggZD0iTTg2LDEwLjMyYy00MS43OTYsMCAtNzUuNjgsMzMuODg0IC03NS42OCw3NS42OGMwLDM3Ljk0MzIgMjcuOTUsNjkuMjcxMjggNjQuMzY5MjgsNzQuNzQ0MzJ2LTU0LjY4NTY4aC0xOC43MjM5MnYtMTkuODkzNTJoMTguNzIzOTJ2LTEzLjIzNzEyYzAsLTIxLjkxNjI0IDEwLjY3Nzc2LC0zMS41Mzc5MiAyOC44OTI1NiwtMzEuNTM3OTJjOC43MjM4NCwwIDEzLjMzNjg4LDAuNjQ2NzIgMTUuNTIxMjgsMC45NDI1NnYxNy4zNjUxMmgtMTIuNDI1MjhjLTcuNzMzMTIsMCAtMTAuNDMzNTIsNy4zMzA2NCAtMTAuNDMzNTIsMTUuNTkzNTJ2MTAuODczODRoMjIuNjYyNzJsLTMuMDc1MzYsMTkuODkzNTJoLTE5LjU4NzM2djU0Ljg0NzM2YzM2LjkzODcyLC01LjAxMjA4IDY1LjQzNTY4LC0zNi41OTQ3MiA2NS40MzU2OCwtNzQuOTA2YzAsLTQxLjc5NiAtMzMuODg0LC03NS42OCAtNzUuNjgsLTc1LjY4eiI+PC9wYXRoPjwvZz48L2c+PC9zdmc+') 50% 50% no-repeat;
	background-size: 100%; }
.icons8-facebook:hover{
	border:1px solid blue;
	border-radius: 40px;
}
.icons8-google-plus:hover{
	border:1px solid #E74C3C;
	border-radius: 40px;
}
.icons8-github:hover{
	border:1px solid #1ABC9C;
	border-radius: 40px;
}
#linkedin-icon-hello:hover{
	border:1px solid #0288D1;
	border-radius: 40px;
}
#instagram-icon-hello:hover{
	border:0.5px solid purple;
	border-radius: 15px;
}
#twitter-icon-hello:hover{
	border:1px solid #0288D1;
	border-radius: 40px;
}

@media only screen and (max-width: 563px) {
	#Resume-hello{
		min-width: 20vw;
		min-height: 5vh;
		width:wrap;
		width:wrap;
		border: 1px solid  rgb(255, 83, 64);
		border-radius: 30px;
		background-color: rgb(255, 83, 64);

		text-align: center;
		outline: none;
		cursor: grab;
		color:#d3d3d3;
		font-size:22px;
		font-family: 'Andika';
	}
	#svg-hi{
		z-index: 10;
		height:40vh;
	}
	#initSection{
		margin-top: 5vh;
	}
	
	#astro-skills{
		display: none;
	}
}
@media only screen and (min-width: 563px) {
	#Resume-hello{
		min-width: 10vw;
		min-height: 5vh;
		width:wrap;
		width:wrap;
		border: 1px solid  rgb(255, 83, 64);
		border-radius: 30px;
		background-color: rgb(255, 83, 64);

		text-align: center;
		outline: none;
		cursor: grab;
		color:#d3d3d3;
		font-size:22px;
		font-family: 'Andika';
	}
	#svg-hi{
		z-index: 10;
		height:80vh;
	}
	#initSection{
		margin-top: 25vh;
	}
	#heading-about-me{
		text-align: center;
		vertical-align: center;
	
		margin-bottom: 3vh;
		color:#d3d3d3;
		font-size: 7vh;
	}
	#gen-about-me{
		color: gray;
		text-align: left;
		font-size:3vh;
		margin-left: 3vw;
	}
	#astronaut-hello{
		z-index: 100;
		top: 20%;
		
	
		margin-top:3%;
	
	}
	#astro-skills{
		margin-left:6vw;
		width:30vw;
		height:80vh}
}
	
	#Resume-hello:hover{
		color: black;
	}

#R-wrist{
	animation: astronaut-wrist-hi 0.65s  alternate-reverse infinite;
    transform-origin: 50% 90%;

}
	@keyframes astronaut-wrist-hi {
		0% {transform: rotate(-2deg);}
  100% {transform: rotate(0deg);}
	  }
#R-Palm{

  animation: astronaut-palm-hi 0.65s  alternate-reverse infinite;
  transform-origin: 50% 90%;

}
	@keyframes astronaut-palm-hi {
		0% {transform: rotate(-3deg);}
  100% {transform: rotate(0deg);}
	}

#Group-1{
	animation: astronaut-hu ;
	animation-duration: 6s;
	animation-iteration-count:infinite;
}
@keyframes astronaut-hu {
	0% {
		transform: translate3D(0px, 0px, 0);
	  }
	25% {
		transform: translate3D(0px, -20px, 0);
	  }
	50% {
		transform: translate3D(30px, 10px, 0);
	  }
	  75% {
		transform: translate3D(20px, -20px, 0);
	  }
	  1000% {
		transform: translate3D(30px, -50px, 0);
	  }
}


/***************************************************************************
SKILLS
****************************************************************************/
#skills {
    height:wrap;
    min-height:100vh;
    width: 100vw;
	overflow-y: hidden;
    background-image: var(--bg);
    position: relative;
	background-color: black;
	background-position: center;
}
.fa-react:before {
    content: "\f41b";
}

#icon-col{
	color: #5e6472;
}

#icon-col:hover{
	color: #ffbe0b;
}

#icon-tex{
	color: #8d99ae;
	font-size: 1em;
}


#icon-main-title{
	color:#d3d3d3;
	font-size: 1.25em;
}


/***************************************************************************
Experience
****************************************************************************/
#experience{
	height:wrap;
    min-height:100vh;
    width: 100vw;
	overflow-y: hidden;
    background-image: var(--bg);
    position: relative;
	background-color: black;
	background-position: center;
}

#exp-title{
	float:left;
	color:#d3d3d3;
	margin-left:3vw;
	font-size: 3em;
	position: absolute;
}
/********
ROCKET
*********/
.canvas {
	position: absolute;
	width: 580px;
	height: 400px;

	margin-left:100px;
	z-index: 0;
  }
  
  .path {
	  motion-path: path('m511.1,78.76C364.48-39.09,70.84,44.92,55.89,136c-10.75,65.49,127,107.65,115.16,194.22-8.8,64.39-88.57,67.14-117.2,150.6-26,75.64,2.43,181.68,57.92,203.75,71.69,28.52,132.9-105.3,252.13-94C466.22,600.19,508.28,707,554,686.61c39-17.34,51.61-114.13,19.08-188.08C524.34,387.68,393.71,372.68,399.34,322c6.1-54.83,161-52.85,177.86-126.07C589.29,143.51,522.39,87.84,511.1,78.76,z');
	offset-path:path('m511.1,78.76C364.48-39.09,70.84,44.92,55.89,136c-10.75,65.49,127,107.65,115.16,194.22-8.8,64.39-88.57,67.14-117.2,150.6-26,75.64,2.43,181.68,57.92,203.75,71.69,28.52,132.9-105.3,252.13-94C466.22,600.19,508.28,707,554,686.61c39-17.34,51.61-114.13,19.08-188.08C524.34,387.68,393.71,372.68,399.34,322c6.1-54.83,161-52.85,177.86-126.07C589.29,143.51,522.39,87.84,511.1,78.76,z');
	animation: sweep 30s linear infinite;
  }
  
  .plane {
	transform: rotate(90deg) translateX(-62%);
  }
  
  .square {
	width: 0px;
	height: 0px;
	line-height: 0;
	animation-name: reverse;
  }
 
  #rocket{
	  
	  height:150px;
	  width:150px;
	  transform: rotate(180deg);
	  z-index:1;
  }
  @media only screen and (max-width: 563px) {
	#rocket{
		display:none;
	}
	.canvas{
		display:none;
	}
  }
  @media only screen and (min-width: 563px)and (max-width: 1024px) {
	#rocket{
		display:none;
	}
	.canvas{
		display:none;
	}
  }
  
  @keyframes sweep {
	0% {
	  motion-offset: 0;
	  offset-distance: 0;
	}
  
	to {
	  motion-offset: 100%;
	  offset-distance: 100%;
	}
  }
  
  @keyframes reverse {
	0% {
	  motion-offset: 0;
	  offset-distance: 0;
	}
  
	to {
	  motion-offset: -100%;
	  offset-distance: -100%;
	}
  }
  #Flame-out{
	animation: fire-out 1s ease-in-out infinite alternate;
	transform-origin: top;
}
#flame-middle{
	animation: fire-middle 1s ease-in-out infinite alternate;
	transform-origin: top;
}
#flame-in{
	animation: fire-in 1s ease-in-out infinite alternate;
	transform-origin: top;
}

@keyframes fire-out {
	

	  25% {
		transform: translate3D(-5px, 10px, 0);
	  }
	  
}
@keyframes fire-middle {
	

	75% {
	  transform: translate3D(-5px, 10px, 0);
	}
	
}
@keyframes fire-in {
	

	50% {
	  transform: translate3D(-5px, 10px, 0);
	}
	
}

@media only screen and (max-width: 563px) {
	.card {
		position: relative;
		text-align: left;
		color: #d3d3d3;
		background-color: rgb(142 142 142 / 30%);
		border: 1px solid;
		border-color: transparent transparent transparent transparent;
		border-radius: 8px;
		height:wrap;
		min-height: 75vh;
		padding-left:0.5vw;
		margin-left:1vw;
		margin-top:5vh;
		margin-bottom: 5vh;
	
	}
	
	.card .user-img {
		background-image: url("./AMS\ logo.svg");
		background-size: contain;
		background-repeat: no-repeat;
		background-color: white;
		width:  40vw;
		border-radius: 50%;
		height: 40vw;
		margin: auto;
		border: 1px solid white;
		margin-top: -4vh;
	}
	.card .user-img-sp {
		
		background-repeat: no-repeat;
		background-color: white;
		width: 40vw;
		border-radius: 50%;
		height: 40vw;
		margin: auto;
		padding-top:7vh;
		border: 1px solid white;
			margin-top: -4vh;
	}
	.card .user-img-acumensa {
		
		background-repeat: no-repeat;
		background-color: white;
		width:  40vw;
		border-radius: 50%;
		height: 40vw;
		margin: auto;
		border: 1px solid white;
			margin-top: -4vh;
	}
	
	#acumensa-img{
		width: 40vw;
		height:40vw;
		margin-left: 0.5vw;
	}
  }
  @media only screen and (max-width:768px)and (min-width:563px) {
	.card {
		position: relative;
		text-align: left;
		color: #d3d3d3;
		background-color: rgb(142 142 142 / 30%);
		border: 1px solid;
		border-color: transparent transparent transparent transparent;
		border-radius: 8px;
		height:wrap;
		min-height:50vh;
		padding-left:0.5vw;
		margin-left:1vw;
		margin-top:5vh;
		margin-bottom: 5vh;
	}
	
	.card .user-img {
		background-image: url("./AMS\ logo.svg");
		background-size: contain;
		background-repeat: no-repeat;
		background-color: white;
		width: 15vw;
		border-radius: 50%;
		height:15vw;
		margin: auto;
		border: 1px solid white;
		margin-top: -5vh;
	}
	.card .user-img-sp {
		
		background-repeat: no-repeat;
		background-color: white;
		width: 15vw;
		border-radius: 50%;
		height:15vw;
		margin: auto;
		padding-top:4vh;
		border: 1px solid white;
			margin-top: -5vh;
	}
	.card .user-img-acumensa {
		
		background-repeat: no-repeat;
		background-color: white;
		width: 15vw;
		border-radius: 50%;
		height:15vw;
		margin: auto;
		border: 1px solid white;
			margin-top: -5vh;
	}
	
	#acumensa-img{
		width: 15vw;
		height:15vw;
		margin-left: 0.5vw;
	}
	#bullets{
		margin-left:3%;
		font-size:1em;
		color: white;
		list-style-image: url('../IMAGES/meteor.svg');
		margin-right:3%;
	}
	
  }
  @media only screen   
  and (min-device-width : 768px)   
  and (max-device-width : 1024px){
	.card {
		position: relative;
		text-align: left;
		color: #d3d3d3;
		background-color: rgb(142 142 142 / 30%);
		border: 1px solid;
		border-color: transparent transparent transparent transparent;
		border-radius: 8px;
		width: wrap;
		max-width: 98vw;
		height:wrap;
		min-height:40vh;
		padding-left:0.5vw;
		margin-left:1vw;
		margin-right:1vw;
		margin-top:5vh;
	}
	
	.card .user-img {
		background-image: url("./AMS\ logo.svg");
		background-size: contain;
		background-repeat: no-repeat;
		background-color: white;
		width: 15vw;
		border-radius: 50%;
		height:15vw;
		margin: auto;
		border: 1px solid white;
		margin-top: -8vh;
	}
	.card .user-img-sp {
		
		background-repeat: no-repeat;
		background-color: white;
		width: 15vw;
		border-radius: 50%;
		height:15vw;
		padding-top:4.5vh;
		margin: auto;
		border: 1px solid white;
			margin-top: -8vh;
			
	}
	#bullets{
		margin-left:3%;
		font-size:1em;
		color: #d3d3d3;
		list-style-image: url('../IMAGES/meteor.svg');
		margin-right:3%;
	}
	.card .user-img-acumensa {
		
		background-repeat: no-repeat;
		background-color: white;
		width: 15vw;
		border-radius: 50%;
		height:15vw;
		margin: auto;
		border: 1px solid white;
			margin-top: -8vh;
	}
	
	#acumensa-img{
		width: 15vw;
		height:15vw;
		margin-left: 0.5vw;
	}

  }
  
  @media only screen and (min-width:1024px) {.card {
    position: relative;
    text-align: left;
    color: #d3d3d3;
    background-color: rgb(142 142 142 / 30%);
    border: 1px solid;
	font-size: 1em;
    border-color: transparent transparent transparent transparent;
    border-radius: 8px;
	height:wrap;
	min-height: 55vh;
	padding-left:0.5vw;
	margin-left:1vw;
	margin-top:5vh;
	flex:1;
}
#bullets{
	margin-left:3%;
	font-size:1vw;
	color:  #d3d3d3;
	list-style-image: url('../IMAGES/meteor.svg');
	margin-right:3%;
}
#ams-text{
	font-size:1vw;
	color:  #d3d3d3;
}
.card .user-img {
    background-image: url("./AMS\ logo.svg");
    background-size: contain;
	background-repeat: no-repeat;
	background-color: white;
    width: 15vw;
    border-radius: 50%;
    height:15vw;
    margin: auto;
    border: 1px solid white;
    margin-top: -15vh;
}
.card .user-img-sp {
    
	background-repeat: no-repeat;
	background-color: white;
    width: 15vw;
    border-radius: 50%;
    height:15vw;
	padding-top:8.5vh;
    margin: auto;
    border: 1px solid white;
        margin-top: -15vh;
		
}
.card .user-img-acumensa {
    
	background-repeat: no-repeat;
	background-color: white;
    width: 15vw;
    border-radius: 50%;
    height:15vw;
    margin: auto;
    border: 1px solid white;
        margin-top: -15vh;
}

#acumensa-img{
	width: 15vw;
	height:15vw;
	margin-left: 0.5vw;
}}
#exp-node{	
		margin:0px 20px 8px 0px;
		color:white;
		display:block;
  border-radius:30px;
		padding:10px 10px 8px ;
		position:relative;
		float:left;
		text-decoration:none;
		background-color: rgb(237 106 90/ 90%);
}
#exp-angular{
		
      
	margin:0px 20px 8px 0px;
	color:white;
	display:block;
border-radius:30px;
	padding:10px 10px 8px ;
	position:relative;
	float:left;
	text-decoration:none;
	background-color: rgb(255 201 20/ 90%);
}
#exp-mongo{
		
      
	margin:0px 20px 8px 0px;
	color:white;
	display:block;
	border-radius:30px;
	padding:10px 10px 8px ;
	position:relative;
	float:left;
	text-decoration:none;
	background-color: rgb(118 176 65/ 90%);
}
#exp-python{
		
      
	margin:0px 20px 8px 0px;
	color:white;
	display:block;
	border-radius:30px;
	padding:10px 10px 8px ;
	position:relative;
	float:left;
	text-decoration:none;
	background-color: rgb(74 37 69/ 90%);
}
#exp-ml{
		
      
	margin:0px 20px 8px 0px;
	color:white;
	display:block;
	border-radius:30px;
	padding:10px 10px 8px ;
	position:relative;
	float:left;
	text-decoration:none;
	background-color: rgb(23 190 187/ 90%);
}
#exp-nginx{
		
      
	margin:0px 20px 8px 0px;
	color:white;
	display:block;
	border-radius:30px;
	padding:10px 10px 8px ;
	position:relative;
	float:left;
	text-decoration:none;
	background-color: rgb(251 97 7/ 90%);
}
#exp-django{
		
      
	margin:0px 20px 8px 0px;
	color:white;
	display:block;
	border-radius:30px;
	padding:10px 10px 8px ;
	position:relative;
	float:left;
	text-decoration:none;
	background-color: rgb(2 60 64/ 90%);
}
#exp-react{
		
      
	margin:0px 20px 8px 0px;
	color:white;
	display:block;
	border-radius:30px;
	padding:10px 10px 8px ;
	position:relative;
	float:left;
	text-decoration:none;
	background-color: rgb(237 106 94/ 90%);
}
#exp-postgres{
		
      
	margin:0px 20px 8px 0px;
	color:white;
	display:block;
	border-radius:30px;
	padding:10px 10px 8px ;
	position:relative;
	float:left;
	text-decoration:none;
	background-color: rgb(76 224 179/ 90%);
}
#exp-gcp{
		
      
	margin:0px 20px 8px 0px;
	color:white;
	display:block;
	border-radius:30px;
	padding:10px 10px 8px ;
	position:relative;
	float:left;
	text-decoration:none;
	background-color: rgb(202 168 245/ 90%);
}







#timeline{
	float:right;
	margin-right:20px;
	font-weight:bolder;
}
/***************************************************************************
Projects
****************************************************************************/
#projects{
	height:wrap;
    min-height:100vh;
    width: 100vw;

	overflow-y: hidden;
    background-image: var(--bg);
    position: relative;
	background-color: black;
	background-position: center;
}

#project-title{
	float:left;
	color:#d3d3d3;
	margin-left:3vw;
	font-size: 3em;
	position: absolute;
}

/*****
OLD IMPORT
*******/
.fullelement{

	width:100%;
	min-height:15vh;
	margin-top:1%;
	
	margin-bottom: 2vh;
	position: relative;
	padding: 10px 10px 10px 10px;
	border:1px solid darkgray;
	float:left;
}
#one-git:hover,#two-git:hover,#four-git:hover{
	background: rgb(0,40,15);
	background: linear-gradient(52deg, rgba(0,40,15,0.5998774509803921) 0%, rgba(0,141,54,0.6951155462184874) 100%);
}
#three-git:hover,#five-git:hover,#six-git:hover{
	background: rgb(0,40,15);
background: linear-gradient(308deg, rgba(0,40,15,0.5998774509803921) 0%, rgba(0,141,54,0.6951155462184874) 100%);
}
.repo-img{
	margin-top:3%;
	margin-right:1%;
	margin-left: 3%;
	width:8px;
	height:12px;

}
.name-element{

	color:#d3d3d3;
	font-size:150%;
	margin-left: 3%;
	font-weight: bold;
	
}
.description-element{
	color:#d3d3d3;
	font-size:100%;
	margin-left: 3%;
	margin-top: 3%;
	font-weight: thin;
}

.dot{
	float:left;
	margin-top: 4vh;
	margin-right:4px;
	height: 1vh;
	width: 1vh;
	background-color: white;
	border-radius: 50%;

}
.language-element{
	float: right;
	margin-top: 3vh;
	color:white;
}
.lang-full{
	float:right;
	width:wrap;
}

#newclass-one{
	width:25%;
	height:inherit;
	float:left;
	margin-left:2%;
	
}

#newclass-two{
	width:25%;
	margin-right:4%;
	height:inherit;
	float:right;
	
	
}
#project-title{
	font-size:5vh;
	margin-top: 3%;
	margin-left: 3%;
	font-weight:bolder;
	
	z-index: 222;
}
#about-projects{
	font-size:2.5vh;
	font-weight: lighter;
	margin-left: 3%;
	margin-bottom:3%;
}
#project-pg{
	display:inline-block;
	min-height:100vh;
	height:wrap;
	width:100vw;
	margin-top:5vh;
}
#github-meteor{
	position:absolute;
	height:40vh;
	margin-left: 5vw;
	padding-bottom:0vh;
}
#proj-cont{
	width:wrap;
	height:inherit;
}

#github-meteor:hover{
	animation-name: spin;
  animation-duration: 4000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear; 
}

#github-meteor:hover ~ .name-element{
	
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}
@media only screen and (max-width: 563px) {
	#github-meteor{
		display:none;
	}
	#project-title{
		margin-bottom:10vh;
	}
}
@media only screen and (min-width: 563px)and (max-width: 1024px) {
	#github-meteor{
		display:none;
	}
}
#proj-react{
	margin:0px 10px 3px 0px;
	color:white;
	display:block;
	border-radius:30px;
	padding:10px 10px 8px ;
	position:relative;
	float:left;
	text-decoration:none;
	background-color: rgb(237 106 94/ 90%);
}
#proj-eth{
	margin:0px 10px 3px 0px;
	color:white;
	display:block;
	border-radius:30px;
	padding:10px 10px 8px ;
	position:relative;
	float:left;
	text-decoration:none;
	background-color: rgb(37 109 27/ 90%);
}
#proj-dyte{
	margin:0px 10px 3px 0px;
	color:white;
	display:block;
	border-radius:30px;
	padding:10px 10px 8px ;
	position:relative;
	float:left;
	text-decoration:none;
	background-color: rgb(17 29 74/ 90%);
}
#proj-node{
		
      
	margin:0px 10px 3px 0px;
	color:white;
	display:block;
border-radius:30px;
	padding:10px 10px 8px ;
	position:relative;
	float:left;
	text-decoration:none;
	background-color: rgb(237 106 90/ 90%);
}
#proj-mongo{
		
      
	margin:0px 10px 3px 0px;
	color:white;
	display:block;
	border-radius:30px;
	padding:10px 10px 8px ;
	position:relative;
	float:left;
	text-decoration:none;
	background-color: rgb(118 176 65/ 90%);
}

#proj-ml{
		
      
	margin:0px 10px 3px 0px;
	color:white;
	display:block;
	border-radius:30px;
	padding:10px 10px 8px ;
	position:relative;
	float:left;
	text-decoration:none;
	background-color: rgb(23 190 187/ 90%);
}

#proj-flask{
	margin:0px 10px 3px 0px;
	color:white;
	display:block;
	border-radius:30px;
	padding:10px 10px 8px ;
	position:relative;
	float:left;
	text-decoration:none;
	background-color: rgb(203 156 242/ 90%);
}

#proj-python{
	margin:0px 10px 3px 0px;
	color:white;
	display:block;
	border-radius:30px;
	padding:10px 10px 8px ;
	position:relative;
	float:left;
	text-decoration:none;
	background-color: rgb(74 37 69/ 90%);
}

#proj-postgres{
		
      
	margin:0px 10px 3px 0px;
	color:white;
	display:block;
	border-radius:30px;
	padding:10px 10px 8px ;
	position:relative;
	float:left;
	text-decoration:none;
	background-color: rgb(76 224 179/ 90%);
}
#proj-leaflet{
		
      
	margin:0px 10px 3px 0px;
	color:white;
	display:block;
	border-radius:30px;
	padding:10px 10px 8px ;
	position:relative;
	float:left;
	text-decoration:none;
	background-color: rgb(207 18 89/ 90%);
}
#proj-php{
		
      
	margin:0px 10px 3px 0px;
	color:white;
	display:block;
	border-radius:30px;
	padding:10px 10px 8px ;
	position:relative;
	float:left;
	text-decoration:none;
	background-color: rgb(116 148 234/ 90%);
}
#proj-sql{
		
      
	margin:0px 10px 3px 0px;
	color:white;
	display:block;
	border-radius:30px;
	padding:10px 10px 8px ;
	position:relative;
	float:left;
	text-decoration:none;
	background-color: rgb(234 82 111/ 90%);
}

/***************************************************************************
Achievements
****************************************************************************/
#achievements{
	height:wrap;
    min-height:100vh;
    width: 100vw;

    background-image: var(--bg);
    position: relative;
	background-color: black;
	background-position: center;
}
#achievements-title{
	float:left;
	color:#d3d3d3;
	margin-left:3vw;
	font-size: 3em;
	position: absolute;
}
@media only screen and (max-width: 563px) {
	#vit-ach{
		margin-bottom:5vh
	}
	.achive-ele{
		min-height: 80vh;
		height:wrap;
		border: 2px solid grey;
		float:left;
		border-radius: 25px;
		padding-bottom: 3vh;
	}
	#ach-text{

		margin-left:5%;
		margin-right:5%;
		font-size:120%;
		color: white;
	}
	#dev-ach{
		margin-bottom:5vh
	}
	#mun-ach{
		margin-bottom:5vh
	}
}
@media only screen and (min-width: 563px)and (max-width: 1024px) {
	#vit-ach{
		margin-bottom:5vh
	}
	.achive-ele{
		min-height: 80vh;
		height:wrap;
		border: 2px solid grey;
		float:left;
		border-radius: 25px;
		padding-bottom: 3vh;
	}
	#ach-text{

		margin-left:5%;
		margin-right:5%;
		font-size:120%;
		color: white;
	}
	#dev-ach{
		margin-bottom:5vh
	}
	#mun-ach{
		margin-bottom:5vh
	}
  }
  @media only screen and (min-width : 1024px){
	
	.achive-ele{
		min-height: 70vh;
		height:wrap;
		border: 2px solid grey;
		float:left;
		border-radius: 25px;
		padding-bottom: 3vh;
	}
	#ach-text{

		margin-left:5%;
		margin-right:5%;
		font-size:1vw;
		color: white;
	}
  } 


#vit-ach{
	margin-left:2%;
}
#dev-ach{
	margin-left:2%;
}
#mun-ach{
	margin-left:2%;
}
#ach-logo{
	margin-top:10vh;
	width:100%;
	min-height:30vh;
	height:wrap;
}
#VIT-logo{

	width:40%;

	margin-left:30%;
	margin-right:30%;
}
#DEV-logo{

	width:60%;
	margin-top:10vh;
	margin-left:20%;
	margin-right:20%;
}
#MUN-logo{
	width:80%;
	margin-top:5vh;
	border-radius: 5px;
	margin-left: 10%;
	margin-right: 10%;
}


#vit-ach:hover{
	background: rgb(0,0,0);
background: linear-gradient(315deg, rgba(0,0,0,0) 0%, rgba(104,0,255,0.29315476190476186) 100%);
}
#dev-ach:hover{
background: rgb(0,0,0);
background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,255,250,0.29315476190476186) 100%);
}
#mun-ach:hover{
background: rgb(0,0,0);
background: linear-gradient(52deg, rgba(0,0,0,0) 0%, rgba(255,0,243,0.29315476190476186) 100%);
}

/***************************************************************************
Contact ME
****************************************************************************/



@media only screen and (max-width: 563px) {
	#contact{
		height:wrap;
		min-height:40vh;
		width: 100vw;
	
		background-image: var(--bg);
		position: relative;
		background-color: black;
		background-position: center;
	}
	#contact-title{
		float:left;
	color:#d3d3d3;
	margin-left:3vw;
	font-size: 2em;
	position: absolute;
	}
	#about-contact-me{

	margin-left:4vw;
	margin-top: 2vh;
	color:#d3d3d3;
	font-size: 1em;
	}
	#hit-me-up{
		margin-left:4vw;
		margin-right:10vh;
		color:#d3d3d3;
		font-size: 1em;
	}
	#where-to-mail{

		margin-left:4vw;
		margin-top:5vh;
		color:#d3d3d3;
		font-size: 1em;
	}
	#emailId{
	
		font-size: 1em;
		font-weight: 700;
		color:#d3d3d3;
	}
	#mail-box{
		display:none;
	}
}

@media only screen and (min-width: 563px) {
	#contact{
		height:wrap;
		min-height:60vh;
		width: 100vw;
		padding-top:10vh;
		background-image: var(--bg);
		position: relative;
		background-color: black;
		background-position: center;
	}
	#contact-title{
		float:left;
		color:#d3d3d3;
		margin-left:3vw;
		font-size: 4em;
		position: absolute;
	}
	#about-contact-me{
		margin-left:4vw;
		margin-top: 2vh;
		color:#d3d3d3;
		font-size: 2em;
	}
	#hit-me-up{
		margin-left:4vw;
		margin-right:10vh;
		color:#d3d3d3;
		font-size: 2em;
	}
	#where-to-mail{

		margin-left:4vw;
		margin-top:5vh;
		color:#d3d3d3;
		font-size: 2em;
	}
	#emailId{
	
		font-size: 1.25em;
		font-weight: 500;
		color:#d3d3d3;
	}
	#mail-box{
		margin-right: 2vw;
		height: 30vh
	}
}
@media only screen and (min-width: 563px)and (max-width: 1024px) {
	#contact{
		height:wrap;
		min-height:60vh;
		width: 100vw;
		padding-top:10vh;
		background-image: var(--bg);
		position: relative;
		background-color: black;
		background-position: center;
	}
	#contact-title{
		float:left;
		color:#d3d3d3;
		margin-left:3vw;
		font-size: 4em;
		position: absolute;
	}
	#about-contact-me{
		margin-left:4vw;
		margin-top: 2vh;
		color:#d3d3d3;
		font-size: 2em;
	}
	#hit-me-up{
		margin-left:4vw;
		margin-right:10vh;
		color:#d3d3d3;
		font-size: 2em;
	}
	#where-to-mail{

		margin-left:4vw;
		margin-top:5vh;
		color:#d3d3d3;
		font-size: 2em;
	}
	#emailId{
	
		font-size: 1.25em;
		font-weight: 500;
		color:#d3d3d3;
	}
	#mail-box{
		margin-right: 2vw;
		height: 18vw
	}
}




#emailId:hover{
	color:rgb(255, 83, 64);
}
#linkedin-icon-contact-me:hover{
	border:1px solid #0288D1;
	border-radius: 40px;
}