body
{
	font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif;
	color: #2d3c49;
	background-color: snow;
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

a
{
	color: darkgoldenrod;
	text-shadow: 0.5px 0.5px midnightblue;
	text-decoration: none;
}

/*============================================================================================================
Styling for Header
============================================================================================================*/
.header
{
	text-align: right;
}

/*--Styling for name of webpage-----------------------------------------------------------------------------*/
.name
{
	margin-bottom: 5px;
	margin-right: 10px;
	font-size: 2.5em;
	font-weight: 100;
	color: midnightblue;
}

/*--Styling for tagline of webpage--------------------------------------------------------------------------*/
.tagline
{
	margin-top: 5px;
	margin-right: 10px;
	font-size: 1.5em;
	font-weight: 100;
	color: midnightblue;
}

/*--Styling for Logo in Header------------------------------------------------------------------------------*/
.header-logo
{
	width: 100px;
	height: 100px;
	float: left;
	position: relative;
	border-radius: 25px;
	margin-left: 10px;
}

/*--Styling for Page Line Divider in the Header-------------------------------------------------------------*/
hr
{
	border: none;
	height: 4px;
	border-radius: 25px;
	background-color: midnightblue;
	margin-top: 40px;
}

/*============================================================================================================
Styling for Main Body
============================================================================================================*/
/*--Styling for External Links------------------------------------------------------------------------------*/
.links
{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}

.linkedin
{
	width: 50%;
	text-align: center;
}

.github
{
	width: 50%;
	text-align: center;
}

/*--Styling for Main Page Picture---------------------------------------------------------------------------*/
.profile-picture
{
	padding-left: 15px;
	padding-right: 15px;
	margin-top: 10px;
	border-radius: 40px;
	max-width: 100%;
}

/*--Styling for Sample Projects Section---------------------------------------------------------------------*/
.project-collection
{
	display: flex;
	flex-wrap: wrap;
}

/*--Styling for Sample Projects Title-----------------------------------------------------------------------*/
.project-collection-title
{
	font-size: 2.3em;
	font-weight: 100;
	margin-bottom: 5px;
	margin-left: 10px;
	color: darkgoldenrod;
	text-shadow: 1px 1px midnightblue;
	width: 100%;
}

/*--Projects Styling----------------------------------------------------------------------------------------*/
.project
{
	width: 33%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	padding-top: 15px;
	border-radius: 15px;
	background-color: #dcc6d3;
}

/*--Project Pictures Styling--------------------------------------------------------------------------------*/
.project-pic
{
	width: 90%;
	border-radius: 15px;
	margin-bottom: 0px;
}

.pic-holder
{
	height: 320px;
}

/*--Project Titles Styling----------------------------------------------------------------------------------*/
.project-title
{
	font-size: 2.5em;
	font-weight: 100;
	color: midnightblue;
	/*text-transform: uppercase;*/
	margin-top: 5px;
	margin-bottom: 0px;
}

/*--Project Links Styling-----------------------------------------------------------------------------------*/
.project-links-group
{
	display: flex;
	flex-wrap: wrap;
	text-align: center;
	margin-top: 5px;
}

.project-link
{
	margin-left: auto;
	margin-right: auto; 
}

/*============================================================================================================
Responsive Desgin Breakpoints
============================================================================================================*/
/*--Changing Font Sizes at 800px----------------------------------------------------------------------------*/
@media screen and (max-width: 950px)
{
	.name
	{
		font-size: 2em;
	}

	.tagline
	{
		font-size: 1em;
		margin-bottom: 60px;
	}

	.project-collection-title
	{
		font-size: 1.3em;
	}

	.project-title
	{
		font-size: 1.7em;
	}

	.pic-holder
	{
		height: 32vw;
	}

	a
	{
		font-size: 0.8em;
	}
}

/*--Changing Grid Layout at 670px---------------------------------------------------------------------------*/
@media screen and (max-width: 670px)
{
	.project
	{
		width: 45%;
		margin-top: 10px;
	}

	.pic-holder
	{
		height: 45vw;
	}

	.profile-picture
	{
		display: none;
	}
}

/*--Changing Grid Layout at 500px---------------------------------------------------------------------------*/
@media screen and (max-width: 500px)
{
	.project
	{
		width: 95%;
	}

	.name
	{
		font-size: 1.5em;
	}

	.tagline
	{
		font-size: .8em;
	}

	.project-collection-title
	{
		text-align: center;
	}

	.pic-holder
	{
		height: 95vw;
	}

	.linkedin
	{
		width: 100%;
	}

	.github
	{
		width: 100%;
	}
}

/*--Changing Font Size at 375px-----------------------------------------------------------------------------*/
@media screen and (max-width: 375px)
{
	.name
	{
		font-size: 1.3em;
	}

	.tagline
	{
		font-size: .7em;
	}
}