:root
{
	scroll-behavior		: smooth;
	background-color	: #ebebeb;
}

::selection 
{
  color				: white;
  background-color	: grey;
}

body
{
	margin		: 0px;
	font-family	: 'Open Sans', 'Arial';	
}

header
{
	background-color: #c8c8c8;
	margin-bottom	: 50px;
	box-shadow		: 0px 5px 6px #777777;
	overflow		: hidden;
	height			: 64px;
	width			: 100%;
}

header img
{
	float: right;
}

header h1
{
	float		: right;
	font-size	: 20px;
}

@media (max-width: 595px)
{
	header h1
	{
		display: none;
	}
}

header nav
{
	float: right;
	height: 100%;
}

header nav ul
{
	list-style-type: none;
	height: 100%;
	padding: 0;
	margin: 0;
}

header nav ul li a
{
	display: block;
	width: 100%;
	height: 100%;
}

header nav ul li
{
	display: inline-block;
	padding-left: 20px;
	padding-right: 20px;
	height: 100%;
	line-height: 55px;
}

header nav ul li:hover
{
	background-color: grey;
}

header a
{
	text-decoration	: none;
	color			: #404040;
}

header a:hover
{
	background-color: grey;
	color: white;
	transition: 0.1s;
}

#title
{
	float: left;
	padding-top: 4px;
}

#logo
{
	float			: left;
	width			: 56px;
	padding-right	: 2px;
}

main
{
	margin			: auto;
	padding			: 10px 25px;
	border			: 1px solid gray;
	border-radius	: 5px;
	background    	: white;
	color			: #3d3d3d;
}

main img
{
	margin: auto;
	display: block;
}

main p
{
	line-height	: 29px;
	font-size	: 15px;
	text-align	: left;
	margin		: 20px 0 20px;
}

main code
{
	font-family: "inconsolata medium";
	font-size: 15px;
}

main video
{
	width: 100%;
	border-radius	: 5px;
}

main li
{
	line-height	: 29px;
	font-size	: 15px;
}

main audio
{
	display: block;
	width: 100%;
	max-width: 500px;
}

footer
{
	padding			: 20px 0px 20px 0px;
	font-family		:'Open Sans', 'Arial';
	text-align		: center;
	color			: #3d3d3d;
}

footer small
{
	font-size: 16px;
}

.tile-grid
{
	margin-top: 20px;
	margin-bottom: 20px;
	margin: auto;
	text-align: center;
	padding: 0;
}

.tile h1
{
	font-size: 16px;
	margin-top: 10px;
	margin-bottom: 5px;
	padding: 0;
}

.tile h2
{
	
	font-size: 13px;
	font-weight: normal;
	margin: 0;
}

.tile-grid a
{
	color: #404040;
}

.tile
{
	border-radius: 5px;
	display: inline-block;
	text-align: center;
	padding: 25px;
}

.tile:hover
{
	background-color: #c2c2c2;
}

.tile:hover > img
{
	color: red;
	transform: scale(1.05);
}

.tile:active > img
{
	color: red;
	transform: scale(1);
}


.tile img
{
	border-radius: 5px;
	width: 100%;
	margin: 0;
	display: inline-block;
	border: solid 1px gray;
	transition: 0.2s;
}

.page-area
{
	margin		: auto;
	min-width	: 300px;
	max-width	: 1000px;
	height		: 100%;
	width		: 95%;
}

#social-media-bar img
{
	transition: 0.2s;
}

#social-media-bar img:hover
{
	
	transition: 0.2s;
	transform: scale(1.2);
}

#social-media-bar ul li
{
	display: inline-block;
	margin-right: 7px;
	margin-left: 7px;
}

#social-media-bar ul
{
	display: inline-block;
	padding: 0;
}

#profile p
{
	text-align: center;
}

#profile
{
	text-align: center;
}

#profile-button-list
{
	margin-top: 30px;
	margin: auto;
}

.profile-button a
{
	color: #404040;
}

.profile-button
{
	max-width: 300px;
	margin: auto;
	background-color: #c2c2c2;
	border-radius: 7px;
	transition: 0.2s;
}

.profile-button:active
{
	background-color: #c2c2c2;
	transition: 0.2s;
}

.profile-button:hover
{
	background-color: #e0e0e0;
	transition: 0.2s;
}

#portfolio-button p
{
	text-align: center;
}

#source-code-link
{
	float: right;
}

.thumbnail-tile
{
	
}

.thumbnail-grid
{
	margin: 3px 3px 3px 3px;
}

#source-code-link img
{
	vertical-align: middle;
	margin-right: 5px;
	width: 20px;
}

main table
{
	width: 100%;
	table-layout: fixed;
	border: 1px solid #8a8a8a;
	border-radius: 5px;
	border-spacing: 0px;
	font-size: 13.5px;
}

main table .table-header td
{
	border-bottom: 1px solid #8a8a8a;
}

main table .table-header
{
	background-color: #878787;
	color: white;
	text-shadow: 1px 1px gray;
}

main pre code
{
	border-radius: 5px;
}

.dark-theme main pre code
{
	background:#2d2f34;
	border-color: #1b1b1b;
}

.light-theme pre code
{
	background:#fafafa;
	border-color: #cccccc; 
}

main a
{
	color:#4789d6;
	text-decoration	: none;
}

.dark-theme main
{
	background-color	: #36393f;
	border-color		: #1b1b1b;
}

main .canvas-wrapper
{
	text-align:center;
}

main article p
{
	
}

main canvas
{
	width: 300px;
	height: 300px;
}

main figure img
{
	width: auto;
	max-height: 23px;
}

main figure
{
	text-align: center;
}

main h1
{
	font-size: 26px;
	margin-top: 20px;
}

main h2
{
	font-size:20px;
}

main h3
{
	font-size:16px;
}