/*
Orange		#f09c67
Light grey	#dfebed
Medium grey	#497285
Dark grey	#2b4353
*/

* 
{
	margin: 0;
	padding: 0;
	font-family: Georgia, serif;
}

html
{
	height: 100%;
	width: 100%;
	background: #497285;
}

body
{
	text-align: center;
	height: 100%;
	font-size: 1em;
}

p
{
	margin-bottom: 10px;
}

h1
{
	color: #dfebed;
}

h2
{
	color: #f09c67;
	background: #497285;
}

.header
{
	display: flex;
	height: 40px;
	background: #2b4353;
	color: #dfebed;
}

.content
{
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	margin-top: 10px;
}

.content_project
{
	display: grid;
	grid-template-areas:
		"title title"
		"key_img pitch"
		"key_img video_link"
		"key_img short_desc"
		"long_desc long_desc"
		"img img";
	grid-template-rows: auto;
	grid-template-columns: 50% 1fr;
	row-gap: 30px;
	column-gap: 30px;
	margin-top: 10px;
	margin-left: 100px;
	margin-right: 100px;
}

.content_project_simple
{
	display: grid;
	grid-template-areas:
		"title"
		"long_desc"
		"img";
	grid-template-rows: auto;
	grid-template-columns: auto;
	row-gap: 30px;
	margin-top: 10px;
	margin-left: 100px;
	margin-right: 100px;
}

.about_me
{
	display: grid;
	grid-template-areas:
		"about_info about_cv";
	grid-template-rows: auto 1fr;
	grid-template-columns: 50% 49%;
	column-gap: 30px;
	margin-top: 10px;
	margin-left: 100px;
	margin-right: 100px;
}

/* Header details */
.header_title
{
	width: 250px;
	margin-top: 10px;
	margin-left: 50px;
	margin-right: 50px;
	color: #f09c67;
}

.header_title_name
{
	font-variant: small-caps;
	font-weight: bold;
	text-align: start;
	font-size: 1.8em;
	text-align: left;
}

.header_title_name a:link, .header_title_name a:visited, .header_title_name a:hover
{
	color: #f09c67;
	text-decoration: none;
}

.header_title_name a:active
{
	color: #dfebed;
}

.header_title_job
{
	font-variant: small-caps;
	font-weight: bold;
	text-align: end;
	font-size: 1.3em;
}

.header_menus
{
	display: flex;
}

.header_menu
{
	margin-left: 50px;
	height: 40px;
	margin-top: 10px;
}

.header_menu_active
{
	margin-left: 50px;
	margin-top: 10px;
	border-bottom: 5px solid #f09c67;
}

.header_menu a:link, .header_menu a:visited, .header_menu_active a:link, .header_menu_active a:visited
{
	color: #dfebed;
	text-decoration: underline solid #f09c67;
}

.header_menu a:hover, .header_menu a:active, .header_menu_active a:hover, .header_menu_active a:active
{
	color: #f09c67;
}

/* About me details */
.about_info
{
	grid-area: about_personal info;
	margin-top: 30px;
	text-align: start;
}

.about_info img
{
	float: left;
	max-width: 250px;
	margin-right: 30px;
}

.about_info h1
{
	font-size: 1.2em;
	color: #dfebed;
	font-style: italic;
	font-variant: small-caps;
	text-decoration: underline;
	margin-bottom: 0.5em;
}

.about_info a:link, .about_info a:visited
{
	color: #dfebed;
	text-decoration: underline solid #f09c67;
}

.about_info a:hover, .about_info a:active
{
	color: #f09c67;
}

.about_cv
{
	grid-area: about_cv;
}

.about_me iframe
{
	width: 100%;
	min-height: 860px;
}

/* Content list of projects page details */
.content_title
{
	width: 100%;
	font-size: 3em;
	color: #f09c67;
	font-variant: small-caps;
	margin-bottom: 15px;
}

.project
{
	width: 450px;
	height: 300px;
	background: #2b4353;
	border: 2px dotted #f09c67;
	margin: 10px 10px 30px 10px;
	font-variant: small-caps;
}

.project img
{
	height: 100%;
	width: 100%;
	object-fit: cover;
}

.project a:link, .project a:visited
{
	color: #dfebed;
	text-decoration: underline solid #f09c67;
}

.project a:hover, .project a:active
{
	color: #f09c67;
}

.project_name
{
	float: left;
	position: relative;
	height: 30px;
	top: -34px;
	left: 0px;
	width: 100%;
	text-align: center;
	font-size: 1.5em;
	background: rgb(0, 0, 0); /* fallback color */
	background: rgba(0, 0, 0, 0.25);
}

/* Content project page details */
.project_title
{
	grid-area: title;
	margin-top: 10px;
	font-size: 3em;
	color: #f09c67;
	font-variant: small-caps;
}

.project_pitch
{
	grid-area: pitch;
	text-align: left;
}

.content_project h1, .content_project_simple h1
{
	font-size: 1.2em;
	color: #dfebed;
	font-style: italic;
	font-variant: small-caps;
	text-decoration: underline;
	margin-bottom: 0.5em;
	/*border-bottom: 1px solid #2b4353;*/
}

.content_project a:link, .content_project a:visited, .content_project_simple a:link, .content_project_simple a:visited
{
	color: #dfebed;
	text-decoration: underline solid #f09c67;
}

.content_project a:hover, .content_project a:active, .content_project_simple a:hover, .content_project_simple a:active
{
	color: #f09c67;
}

img.icon
{
	margin-left: 5px;
	height: 13px;
}
/*
a.video:active
{
	background-image: url('data/video_icon.png');
	background-size: 8%;
	background-repeat: no-repeat;
	padding-left: 30px;
}
*/
.project_short_desc
{
	grid-area: short_desc;
	text-align: left;
	vertical-align: baseline;
}

.project_short_video_link
{
	grid-area: video_link;
	text-align: left;
	vertical-align: baseline;
}

.project_short_desc_column
{
	float: left;
	width: 50%;
	min-width: 320px;
}

.project_key_img
{
	grid-area: key_img;
}

.project_key_img img
{
	max-width: 100%;
	max-height: 500px;
}

.project_long_desc
{
	grid-area: long_desc;
	text-align: left;
}

.project_img
{
	grid-area: img;
}

.project_img img
{
	max-width: 49%;
	max-height: 550px;
	margin: 2px;
}

/* MOBILE AIMED ADJUSTEMENTS */
/* Smaller title fonts mostly for mobile to avoid super ugly overlap */
@media (max-width: 800px)
{
	.content_project
	{
		display: grid;
		grid-template-areas:
			"title"
			"key_img"
			"pitch"
			"video_link"
			"short_desc"
			"long_desc"
			"img";
		grid-template-rows: auto;
		grid-template-columns: auto;
		row-gap: 30px;
		margin-left: 10px;
		margin-right: 10px;
	}
	
	.content_project_simple
	{
		display: grid;
		grid-template-areas:
			"title"
			"long_desc"
			"img";
		grid-template-rows: auto;
		grid-template-columns: auto;
		row-gap: 30px;
		margin-left: 10px;
		margin-right: 10px;
	}
	
	.project
	{
		max-width: 100%;
		height: 300px;
	}
	
	.header
	{
		display: flex;
		flex-direction: column;
		height: 64px;
		background: #2b4353;
		color: #dfebed;
	}
	
	.header_title
	{
		display: flex;
		flex-direction: row;
		width: 100%;
		margin-top: 5px;
		margin-left: 0px;
		margin-right: 0px;
	}
	
	.header_menu
	{
		flex-grow: 1;
		margin-left: 4%;
		height: 30px;
		margin-top: 5px;
		font-size: 0.8em;
	}

	.header_menu_active
	{
		flex-grow: 1;
		margin-left: 4%;
		margin-top: 5px;
		border-bottom: 5px solid #f09c67;
		font-size: 0.8em;
	}

	.header_title_name
	{
		flex-grow: 1;
		font-size: 1.5em;
		text-align: start;
		padding-left: 10px;
	}
	
	.header_title_job
	{
		flex-grow: auto;
		padding-right: 10px;
		font-size: 1.5em;
	}
	
	.project_title
	{
		font-size: 2em;
	}
	
	.project_name
	{
		font-size: 1.3em;
	}
	
	.project_img img
	{
		max-width: 100%;
	}
	
	.about_me
	{
		display: block;
		margin-left: 10px;
		margin-right: 10px;
	}
	
	.about_info
	{
		grid-area: about_personal info;
		flex-grow: 1;
		margin-top: 30px;
		text-align: start;
	}
	
	.about_info img
	{
		float: none;
		width: 100%;
		margin-bottom: 1em;
	}
}
/*
Orange		#f09c67
Light grey	#dfebed
Medium grey	#497285
Dark grey	#2b4353
*/