html, body, div, img {
	font-size: 100%;
    vertical-align: baseline;
}

html {
	overflow-y:scroll;
	background-color:#202020;
}

body {
	font: 1em 'PT Sans', Verdana, Arial, Helvetica, sans-serif;
	color:#E6E6E6;
	line-height:1;
}

h2 {
	margin:0.5em auto 0.5em auto;
	padding:0.25em;
	font-size:2em;
}

a:link {
	color:#818F96;
	text-decoration:none; 
}

a:visited {
	color:#818F96;
}

a:hover,a:active {
	color:#cbdee7;
}

#page-header h1 {
	font:700 2.6em 'PT Sans', Verdana, Arial, Helvetica, sans-serif;
	text-shadow: 0.02em 0.02em 0.02em black;
	margin:auto;
}

#page-header h2 {
	font:1.8em 'PT Sans Caption', Verdana, Arial, Helvetica, sans-serif;
	text-shadow: 0.02em 0.02em 0.02em black;
	margin:-0.33em auto 0.33em auto;
	padding:0.25em;
}

#page-header {
	background-clip:padding-box;
	padding:0 0 0.66em 0;
	background-color:#39454b; // was 464646
	text-align:center;
	border-bottom:0.3em solid #222222;
	border-radius:0.5em 0.5em 0em 0em;
	min-width:260px;
}

#page-content p {
	padding:0.66em;
	display:inline-block;
}

#page-content {
	max-width:3200px;
	margin:auto;
	text-align:center;
	border-radius:0.5em;
	box-shadow: 0 0.3em 0.6em 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border:0.1em solid #222222;
}

#page-footer img {
	width:40px;
	height:40px;
}

#page-footer p {
	margin:0em 1em 0em 1em;
	text-align:right;
	display:block;
}

#page-footer {
	background-clip:padding-box;
	background-color:#39454b;
	padding:1.66em 0.66em 0.25em 0.66em;
	text-align:center;
	border-top:0.3em solid #222222;
	border-radius:0em 0em 0.5em 0.5em;
}

#contact-page-footer {
	background-clip:padding-box;
	background-color:#39454b;
	padding:0.25em 1.66em 0.25em 1.66em;
	text-align:center;
	border-top:0.3em solid #222222;
	border-radius:0em 0em 0.5em 0.5em;
}

#contact-page-footer p {
	margin:0em 1em 0em 1em;
	text-align:right;
	display:block;
}

#contact-links p {
	font: 1.1em 'PT Sans', Verdana, Arial, Helvetica, sans-serif;
}

#viewer {
	transition: visibility .2s linear, background-color .2s linear;
	visibility:hidden;
	display:block;
	position: fixed;
	top:0;
	left:0;
	bottom:0;
	right:0;
    margin: auto;
	padding:3em;
	z-index:10;
	text-align:center;
	background-color:rgba(0,0,0,0);
}

#viewer-container {
	max-width:98%;
	max-height:98%;
	width:98%;
	height:98%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0.5%;
	
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center;
	background-image:none;
}

#viewer-container a {
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	text-decoration:none;
	z-index:33;
}

#viewer-caption {
	position:absolute;
	display:inline-block;
	
	background-color:#303030;
	
	max-width:95%;
	top:10%;
	left:50%;
	transform: translate(-50%, -90%);

	color:white;
	opacity:1;

	-webkit-transition-duration: 0.33s;
	transition-duration: 0.33s;
	-webkit-transition-property: opacity;
	transition-property: opacity;
}

#viewer-caption p {
	padding:0.2em;
}

#viewer-next {
	
}

#viewer-prev {
	
}

#contact-photo {
	padding:1em;
}

#contact-links {
}

#contact-links .links-grid  {
		margin:0 auto;
}

#contact-container {
	margin: 0 auto;
}

#contact-photo-grid {
	margin: 0 auto;
}

#contact-links .links-grid img {
	max-width:2.5em;
}

#page-footer .links-grid p {
	margin:auto;
	padding:0;
}

.ns {
	display:none;
}

.header-link {
	font-size:1.5em;
}

.links-grid {
	background-color:#222222; /* was 464646 */
	display:flex;
	align-items:center;
	justify-content:center;
	padding:0.2em;
	font:bold 1.0em 'PT Sans Caption', Verdana, Arial, Helvetica, sans-serif;
}

.container {
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	padding:0.2em;
}

.preview {
	margin:0.2em;
	margin-top:-1.1em;
	max-height:180px;
}

.index-text {
	width:90%;
	max-width:1000px;
	margin:0.66em auto;
	line-height:1.3em;
	font: 1.1em 'PT Sans', Verdana, Arial, Helvetica, sans-serif;
}

.contact-em{
	margin:-1.5em;
	padding:0;
	font-size:0.75em;
}

/* dividers */
.cat-divider {
	padding:0.15em;
	background-color:#303030;
}

.cat-divider-half {
	padding:0.075em;
	background-color:#303030;
}

/* classes for articles */
.article-img {
	margin:1.2em;
	max-width:240px;
	width:auto;
}

.article-img-bigger {
	margin:1.2em;
	max-height:20em;
	width:auto;
}

.article-text {
	text-align:left;
	font: 1.1em 'PT Sans', Verdana, Arial, Helvetica, sans-serif;
	width:50%;
	margin:0 auto;
	line-height:1.3em;
	letter-spacing:0.03em;
}

.centered {
	text-align:center;
}

.article-box {
	margin-top: 1em;
	width:auto;
	line-height:1.3em;
	font: 1.1em 'PT Sans', Verdana, Arial, Helvetica, sans-serif;
}

.article-em {
	font-style:italic;
	font-weight:bold;
}

.article-i {
	font-style:italic;
}

.article-codeclass {
	font-weight:bold;
	font-family:monospace;
}

.article-code {
	max-width:60%;
	margin: 0 auto;
}



/* classes for CV page */
.cv-skills-box{

}

.cv-box {
}

.cv-em {
	font-weight:bold;
}

.cv-skill {
	width:5em;
	align-self:flex-start;
}

.cv-skill img {
	max-width:66px;
	padding:0.2em;
}

.cv-skill span {
	display:block;
}

.cv-skills-box {
	margin: 0 auto;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-wrap:wrap;
}

.cv-box p {
	margin-top:0;
}

.cv-game {
	margin:0.5em;
}

.cv-role-box {
	margin:0 auto;
	width:80%;
	text-align:left;
	justify-content:center;
	padding:0em 1em 1em 1em;
	letter-spacing:0.02em;
}

.cv-role {
	padding:0.2em;
	display:block;
	line-height:1.3em;
}

.cv-role span {
	font-weight:bold;
}

/* larger links for downloads*/
.download-link {
	font-weight:bold;
	text-decoration:underline;
	font-size:1.3em;
}

.download-link:link{
	text-decoration:underline;	
}

.download-em {
	font-weight:bold;
	font-size:1.3em;
}

/* gallery images */
.newimg-container {
	margin:0.2em;
}

.newimg-container:hover .newimg-caption {
	opacity:1;
}

.newimg-caption {
	position:relative;
	display:block;
	
	background-color:#303030;
	padding:0.2em;
	
	max-width:100%;
	
	min-height:1em;
	
	top:80%;
	left:50%;
	transform: translate(-50%, -20%);

	color:white;
	opacity:0;

	-webkit-transition-duration: 0.33s;
	transition-duration: 0.33s;
	-webkit-transition-property: opacity;
	transition-property: opacity;
}

/*********************************************/
/**********Media Queries**********************/
/*********************************************/

@media only screen and (max-width:440px)
{
	.header-link 
	{
		font-size: 1em;
		white-space:nowrap;
		overflow:hidden;
	}
	
	#page-header {
		padding: 0;
	}
}

/* tablet and some phones */
@media only screen and (min-width:440px) 
{
	#page-header h1 {
		font:700 3.2em 'PT Sans', Verdana, Arial, Helvetica, sans-serif;
	}
	
	#page-header h2 {
		font:1.8em 'PT Sans Caption', Verdana, Arial, Helvetica, sans-serif;
	}
	
	#page-footer {
		padding:1.66em 1.66em 0.25em 1.66em;
	}
	
	#page-footer .links-grid {
		padding:0.2em;
	}
	
	#contact-container .links-grid img {
		max-width:3.33em;
	}
	
	.index-text {
		width:80%;
		margin:0.66em auto;
	}
	
	.header-link {
		font-size:1em;
		white-space:nowrap;
	}
	
	.cv-role-box {
		width:65%;
	}
	
	.article-img {
		max-width:400px;
	}
}

/* normal size */
@media only screen and (min-width:768px) 
{
	.preview {
		max-height:320px;
	}
	
	#page-header h1 {
		font:700 5.2em 'PT Sans', Verdana, Arial, Helvetica, sans-serif;	
	}
	
	.index-text {
		width:66%;
		margin:0.66em auto;
	}

	.cv-role-box {
		width:50%;
	}
	
	.article-img {
		max-height:15em;
	}
	
	#contact-container .links-grid img {
		max-width:5em;
	}
	
	.article-img {
		max-width:728px;
	}
	
	.header-link {
		font-size:1.3em;
		white-space:nowrap;
	}
}

/* shifts index-text a bit */
@media only screen and (min-width:1440px)
{
	.index-text {
		width:60.5%;
		margin:0.66em auto;
	}
	
	.cv-role-box {
		width:20%;
	}
	
	.header-link {
		font-size:1.3em;
		white-space:nowrap;
	}
}