/*COLORS

Deep Blue: #233269
Light Blue: #def4ff

*/


/* Fonts */

@font-face {
	font-family: 'BentonSans';
	src: url('fonts/BentonSans-Regular.otf');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'BentonSans';
	src: url('fonts/BentonSans-Regular.otf');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'BentonSans';
	src: url('fonts/BentonSans-Bold.otf');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'DINNextLTPro';
	src: url('fonts/DINNextLTPro-Bold.otf');
	font-weight: normal;
	font-style: normal;
}

/* General */

:root
{
	/* Colors */
	--black:#000;
	--yellow:#e8da20;
	--blue:#0058e3;
	--white:#fff;

	/* TODO: Combine these */
	--light: #FFFFFF;
	--medium: #0058E3;
	--dark: #000000;
	--focus: #E8DA20;


	/* Fonts */
	--font-header:'DINNextLTPro';
	--font-body:'BentonSans';
}


a {
	color: var(--light);
}

a:hover
,a:active {
	color: var(--yellow);
}

#welcome-message{
	text-align:center;
	font-size:1.5em;
	font-weight:bold;
	background-color:white;
	border-radius:2em;
	padding:.5em;
	display:block;
	margin:1em auto;
	box-sizing:border-box;
}

body{
	margin:0;
	padding:0;
	font-family:var(--font-body);
	background: #ffffff;
	background:url('images/blue-pattern.png');
	background-size:cover;
	background-position:center;
	background-attachment:fixed;
	color: #000;
}

h1,h2,h3,h4,h5,h6
{
	font-family:var(--font-header);
}

h1{
	text-align:center;
}

/* Header */

header{
	background-color: var(--black);
	font-family:Arial;
	text-align:center;
	color: var(--white);
	padding:2em 0 .5em;
}

header p{
	margin:0;
}

header h1{
	margin:0;
}

header > h1 > img{
	max-width:100%;
	height: 7em;
	object-fit: contain;
	margin-top: -.5em;
	margin-bottom: -1em;
}

nav{
	margin-top: 0;
	display: flex;
	justify-content:center;
}

nav a{
	color: #fff;
	font-size:2em;
	padding: .25em;
	filter: invert(100%);
}

nav a:hover {
	filter: invert(98%) sepia(69%) saturate(5455%) hue-rotate(346deg) brightness(100%) contrast(82%);
}

#social-media {
	display:flex;
}

h2 {
	clear:both;
	text-align:center;
}

/****************/
/*** HOMEPAGE ***/
/****************/

.block {
	text-align:center;
	color:var(--white);
	background-color: var(--black);
	max-width:100%;
	padding:.5em;
	margin:1em auto;
}

iframe{
	display:block;
	margin:auto;
	max-width: 100%;
}

/****************/
/*GENERAL STYLES*/
/****************/

main{
	padding: .5em 2em;
	padding-top: 0rem; /*The top has to be away from the header*/
	box-sizing:border-box;
	min-height:100vh;
	width:54em;
	max-width:100%;
	margin: 4em auto;
	margin-top: 3.5rem;
	/* background-color: var(--white); */
	color:var(--white);
}

/* About Me */

#about-me{
	display:block;
	width:100%;
	background-color:var(--black);
	color:var(--white);
	
	padding:.5em;
	margin:1em 0;
	box-sizing:border-box;
	
	min-height:7em;
}

#about-me img{
	display: block;
	
	float:left;
	background-color:gray;
	
	height:8em;
	width:8em;
	
	margin-right: 1em;
	
	object-fit: cover;
}

#about-me h1{
	margin:0;
	text-align:left;
}

#about-me a, .project a:visited{
	color:var(--yellow);
}

/* Portfolio Pieces */

h2{
	margin-top: 2.5em;
}

.project{
	display:block;
	width:100%;
	background-color:var(--black);
	color:var(--white);
	
	padding:.5em;
	margin:1em 0;
	box-sizing:border-box;
	
	min-height:7em;
}

.project .assets{
	display: flex;
	justify-content: left;
	align-items:center;
	overflow:auto;
}

.project .description{
	font-weight:bold;
}

.project .assets *{
	display: block;
	float:left;
	background-color: #232323;
	height: 14em;
	max-height:70vh;
	margin-right: 1em;
	object-fit: cover;
	
	cursor:pointer;
}

.project .content {
	margin:1em;
}

.project h3{
	margin: 0.5em 0;
	font-size:1.5em;
	text-align:center;
}

.project p{
	margin:0;
}

.project a, .project a:visited{
	color:var(--yellow);
}

nav img {
	height:1em;
	width: 1em;
	pointer-events:none;
}

/* Image Overlay */

.image-overlay {
	position:fixed;
	left:0;
	right:0;
	top:0;
	bottom:0;
	z-index: 10;
	background-color: rgba(0,0,0,0.5);
	display:flex;
	justify-content:center;
	align-items:center;
	
	pointer-events:none;
	
	opacity:0;
	transition: opacity 1s; /* Duration is overriden by JavaScript */
}

.image-overlay.show {
	opacity:1;
	pointer-events:auto;
	cursor:pointer;
}

.image-overlay img {
	width: 60em;
	height:60em;
	
	max-width:100vw;
	max-height:100vh;
	
	object-fit:contain;
}

/* Scroll Bars */

::-webkit-scrollbar
{
	width: 0.75em;
	background: var(--dark);
}

::-webkit-scrollbar-thumb
{
	background: var(--light);
}

::-webkit-scrollbar-thumb:active,
::-webkit-scrollbar-thumb:hover
{
	background: var(--focus);
}

::-webkit-scrollbar-corner
{
	background: var(--dark);
}