/*******************************************************************************
site.css - Paul Oppenheim
*******************************************************************************/

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 300;
  src: local('Oswald Light'), local('Oswald-Light'), url("./asset/fonts/Oswald-Light.ttf") format('truetype');
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  src: local('Oswald SemiBold'), local('Oswald-SemiBold'), url("./asset/fonts/Oswald-SemiBold.ttf") format('truetype');
}

@font-face {
  font-family: 'Share Tech Mono';
  font-style: normal;
  font-weight: 400;
  src: local('Share Tech Mono Regular'), local('ShareTechMono-Regular'), url("./asset/fonts/ShareTechMono-Regular.ttf") format('truetype');
}



/*******************************************************************************
"Normal" tags
*******************************************************************************/

body {
	background-color: #433;
	color: #eee;
	margin: 0em;
	padding: 0em;
	text-align: center;
	font-size: 16pt;
	font-family: "Oswald", "Oswald-Light", sans-serif;
	font-weight: 300;
}

pre, code {
	font-size: 13pt;
	font-weight: 400;
	font-family: "Share Tech Mono", "ShareTechMono-Regular", monospace;
}

img {
	border: none;
	margin: 0px;
	padding: 0px;
}

h1,
h2,
h3 {
	font-weight: 600;
}

h1 {font-size: 2em;}
h2 {font-size: 1.5em;}
h3 {font-size: 1.25em;}


a                {color: #8cf;}
a:visited        {color: #8cf;}
a:hover, a:focus {color: #fc8;}


br {
	width: 0px;
	margin-top: 1em;
	margin-bottom: 2em;
}


/* =LAYOUT
---------------------------------------------------------------------------*/


.float-clear {
	clear: both;
}


.content {
	background: #322;
	margin: auto;
	margin-bottom: 0em;
	margin-top: 0em;
	padding: .1em;
	padding-top: 0em;
	padding-bottom: 0em;
	text-align: center;
}


.section {
	margin: .1em;
}


.icon {
	height: 2em;
	width: 2em;
	vertical-align: middle;
}


.texty {
	margin: auto;
	max-width: 34em;
	text-align: left;
}



/* =MASTHEAD
---------------------------------------------------------------------------*/


#masthead
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	align-content: center;
	justify-content: center;
	text-align: center;
	margin-top: 0pt;
	padding:0pt;
	max-width: 100%;
}
	#masthead .u-photo {
		margin: 1em;
		width: 128px;
		height: 128px;
	}
	#masthead .p-name {
		color: #eed;
		margin: .5em;
		text-decoration: none;
	}
	#masthead .item img {
		width: 2em;
		vertical-align: middle;
	}
	#masthead #Streams {
		flex-direction: row;
		justify-content: center;
	}
	#masthead #Streams .item {
		opacity: .4;
		margin: .3em;
	}
	#masthead #Streams .item:hover, #masthead #Streams .item:focus {
		opacity: .8;
	}





/* =BLOG
---------------------------------------------------------------------------*/

.nav {
	flex-direction: row;
	align-self: flex-end;
	text-align: right;
	font-variant: small-caps;
	margin-top: 1em;
	margin-bottom: 2em;
}

.meta {
	opacity: 0.7;
	font-size: .8em;
	font-variant: small-caps;
	margin-bottom: 2em;
}


/* =SECTION GENERAL
---------------------------------------------------------------------------*/


.tightspace
{
	margin: 0px;
	padding: 0px;
}


.item
{
	text-align: center;
	margin: 0em;
	padding: 0em;
}
	.item:hover {
		background-color: #321;
	}
	.item img
	{
		margin: 0px;
		padding: 0px;
		vertical-align: middle;
	}
	.item a
	{
		margin: 0px;
		padding: 0px;
	}
	.item a p
	{
		text-decoration: underline;
	}

.item_section
{
	display: flex;
	text-align: left;
	margin: 0em;
	max-width: 53em;
	padding: 0em;
	vertical-align: middle;
}

.item_glyph
{
	display: inline-block;
	position: relative;
	font-size: 2.5em; /* scales up all further em-sizings; 1em == 2em */
	height: 1em;
	margin: 0;
	padding: 0;
	text-decoration: none;
	vertical-align: middle;
	width: 1em;
}


.key
{
	text-align: right;
	vertical-align: top;
	border-right: 4pt solid #777;
	margin: 20pt;
	padding: 3pt;
	padding-right: 8pt;
}

.iconbox
{
	vertical-align: top;
	margin: 0pt;
	padding: 0pt;
	border: 8pt solid transparent;
}

.footer
{
	margin-top: 2em;
	margin-bottom: 1em;
	padding:0pt;
	opacity: .8;
	font-size: .8em;
}