body{
	background-color: #ffe0b3;
	width:100%;
	height:auto-fit;
}
.Ppic{
	border-radius:75%;
	margin-left: auto;
	margin-right: auto;
	height:250px; 
	width:250px;
}

#intro{
	max-width:100%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 130px;
	min-height: 565px;
}
#introText{
	color: Black;	
	margin-left: auto;
	margin-right: auto;
	width:100%;
}
#name{
	margin-top:-30px;
	text-shadow: 1px 1px 1px gray;
	font-family: 'Playfair Display', serif;
	font-size: 7vw;
}
#redirect-Tabs{
	margin-left: auto;
	margin-right: auto;
	margin-top:-20px;
	word-spacing:7px;
}
#social-Media-Tabs{
	margin-left: auto;
	margin-right: auto;
	padding-right: 3px;
	word-spacing: 2px;
	font-size:15px;
}
#About{
	min-height:550px;
	padding: 5% 2% 5% 2%;
	overflow: visible;
}
#aboutMe{
	background-color: black; 
	color: white; 
	max-width:100%;
	padding: 15px 30px 15px 30px; 
	overflow:auto;
	height:550px;
	box-shadow: 3px 3px 3px 3px gray;
	border: 2px rigid;
}
#sendUp{
	vertical-align:center; 
	padding-top:15px; 
	text-align:center; 	
	border: 1px solid;
	box-shadow: 5px 5px 5px 5px gray;
	margin-left:96%; 
	width:60px; 
	height:50px;
}
#footerBox{
	width:100%;
	text-align:center;
	background-color:black; 
	height:auto; 
	color: white;
	padding-top:10px;
}
#At, #resume, #projects{
	font-size: 20px;
}
#At:link, #projects:link, #resume:link{
	text-decoration:none;
	color: black;
}
#At:hover, #projects:hover, #resume:hover{
	text-decoration:none;
	color: white;
}	
#Facebook:visited, #Instagram:visited, #Linkedin:visited, #Github:visited, #mail:visited{
	text-decoration:none;
	color: black;
}
#Facebook:link, #Instagram:link, #Linkedin:link, #Github:link, #mail:link{
	text-decoration:none;
	color: black;
}
#Facebook:hover, #Instagram:hover, #Linkedin:hover, #Github:hover, #mail:hover{
	text-decoration:none;
	color: white;
}


/* width */
::-webkit-scrollbar {
  width: 10px;
  height:3px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}


@media only screen and (min-width : 320px) {
    .body{
        height: auto;
    }
	#intro{
		height:auto;
	}
	#sendUp{
		margin-left:78%; 
	}
	.Ppic{
		width:145px;
		height:145px;
	}
	#name{
		margin-top:8px;
	}
	#social-Media-Tabs{
	margin-left: auto;
	margin-right: auto;
	}
	#redirect-Tabs{
		margin-top:10px;
		margin-left: auto;
		margin-right: auto;
	}

@media only screen and (min-width : 375px) {
    .body{
        height: auto;
    }
	#intro{
		height:auto;
	}
	#sendUp{
		margin-left:83%;
	}
	.Ppic{
		width:175px;
		height:175px;
	}
	#name{
		margin-top:8px;
	}
	#social-Media-Tabs{
	margin-left: auto;
	margin-right: auto;
	}
	#redirect-Tabs{
		margin-top:10px;
		margin-left: auto;
		margin-right: auto;
	}
}
@media only screen and (min-width : 425px) {
    .body{
        height: auto;
    }
	#intro{
		height:auto;
	}
	#footerBox{
		margin-top:46px;
	}
	#sendUp{
		margin-left:85%;
	}
	.Ppic{
		width:175px;
		height:175px;
		margin-top:10px;
	}
	#name{
		margin-top:8px;
	}
	#social-Media-Tabs{
	margin-left: auto;
	margin-right: auto;
	}
	#redirect-Tabs{
		margin-top:10px;
		margin-left: auto;
		margin-right: auto;
	}
}
@media only screen and (min-width : 768px) {
    .body{
        height: auto;
    }
	#intro{
		height:auto;
	}
	#sendUp{
		margin-left:91%;
		margin-bottom:-45px;
	}
	#footerBox{
		margin-bottom:-90%;
	}
	.Ppic{
		width:200px;
		height:200px;
	}
	#name{
		margin-top:1px;
	}
	#social-Media-Tabs{
	margin-left: auto;
	margin-right: auto;
	}
	#redirect-Tabs{
		margin-top:10px;
		margin-left: auto;
		margin-right: auto;
	}
}
@media only screen and (min-width : 1024px) {
	#intro{
		margin-top:130px;
		height:auto;
	}
    .body{
        height: auto;
    }
	#sendUp{
		margin-left:95%; 
	}
	#footerBox{
		margin-bottom:-100px;
	}
	.Ppic{
		width:250px;
		height:250px;
	}
}