@font-face {
	font-family: "Ostrich Sans";
	font-weight: bold;
	font-style: normal;
	src: url("http://static.tumblr.com/ujfn0ik/Fepmbshhj/ostrich_black-webfont.woff") format('woff'),
		url("http://static.tumblr.com/ujfn0ik/yRombr4em/ostrich_black.ttf") format('truetype');
}
	
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
}
nav ul { list-style: none; }
a { text-decoration: none; color: inherit }

html, body { 
	height: 100%;
}
html {
	font: 62.5%/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; 
}

body { 
	background-color: #fda454;

	letter-spacing: .08em;
	font-size: 1.6rem;
	line-height: 2.4rem;  
}

h1, h2, #nav li, header .meta {
	font-family: "Ostrich Sans", sans-serif;
}

img { max-width: 100%; }

#home {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	
	background: #fff;
	color: #0495ff; 
	
	overflow: hidden;
}

#home {         
	  width: 100%;
	  position: static;
	  margin: 0;
	  padding: 1.5rem 0 1rem 2%;   
  }

#nav li { 
	   float: left;
	   
	   font-size: 2rem;
	   font-weight: bold;
	   line-height: 1.5;

	   margin: 1rem 0 1rem 2rem;
	   
   }

#home img { max-width: 200px; height: 74px; }

#home h1 { 
	margin: .7rem 4rem 1rem 2rem; 
	width: 200px;
}

#nav li a { 
	display: block;
	color: inherit;
}

#nav li.selected a { background: #ff1960; }

#nav, #home h1 {
	  float: left; 
	  display: inline-block;
 }
 
#content {
	position: static;
	width: 35em;
	max-width: 90%;
	
	padding: 5% 0% 10% 6%;
}

#content h1 { 
	font-size: 3.6rem;
	line-height: 4.8rem;
	color: #191919;
	margin-top: .5rem;

}
#content h2 { 
	font-size: 3.1rem; 
	line-height: 4.8rem;
	margin: 4.8rem 0 0rem 0;
	color: #222;
}
#content h3 { 
	font-size: 2.6rem; 
	color: #222;
	line-height: 4.8rem;
	margin: 2rem 0 .4rem 0;
}

#content h4 { 
	font-size: 2rem;
	color: #222;
	line-height: 2.4rem;
	margin: 2rem 0 .4rem 0;
}

#content h5 {
	font-size: 1.8rem;
	color: #333;
	line-height: 2.4rem;
	margin: 2rem 0 .4rem 0;
}

#content h5 {
	font-size: 1.6rem;
	color: #333;
	line-height: 2.4rem;
	margin: 2rem 0 .4rem 0;
}

article { margin-bottom: 4.8rem; }

header .meta {
	margin: 1rem 0 3.8rem 0;

	font-size: 2.1rem;
	font-weight: bold;
}

header .meta time {
	color: white;
	margin-right: .7em;
}

header .meta .tag {
	margin: 0 .1em .1rem .1em;
	color: #d7782a;
	background-color: white;
	padding: .4rem .5rem .2rem .5rem;
	font-size: 1.7rem;
}

.article ul, .article ol {
	margin: 2.4rem 0 2.4rem 2.4rem;
}

.article ul li { list-style-type: circle; }

#content em, #content strong { color: #333; }
#content p a { 
	 border-bottom: 1px solid white;
	 padding-bottom: 2px;
	 color: #333;
}

#content p {
	text-align: justify;
	-webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens; -o-hyphens: auto;
	hyphens: auto;
	margin-bottom: 1.6rem;
}
#content p a:hover, #content p a:focus {
	background-color: #f88a31;
}


#content img, #content embed {  
	max-width: 600px;
}

pre { 
	overflow: scroll;
	background-color: #333;
	color: white;
	font-size: 1.4rem;
	margin-bottom: 1.6rem;
	padding: 1rem;
}

/**
 * prism.js Dark theme for JavaScript, CSS and HTML
 * Based on the slides of the talk “/Reg(exp){2}lained/”
 * @author Lea Verou
 */

code[class*="language-"],
pre[class*="language-"] {
	color: white;
	font-family: Consolas, Monaco, 'Andale Mono', monospace;
	direction: ltr;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	font-size: 1.2rem;

	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;
	
	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
}

pre[class*="language-"],
:not(pre) > code[class*="language-"] {
	background: #333;
}

/* Code blocks */
pre[class*="language-"] {
	padding: 1rem;
	margin-bottom: 1.6rem;
	overflow: auto;	
}

/* Inline code */
:not(pre) > code[class*="language-"] {
	padding: .15em .2em .05em;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
	color: hsl(30,20%,50%);
}

.token.punctuation {
	opacity: .7;
}

.namespace {
	opacity: .7;
}

.token.property,
.token.tag,
.token.boolean,
.token.number {
	color: hsl(350, 40%, 70%);
}

.token.selector,
.token.attr-name,
.token.string {
	color: hsl(75, 70%, 60%);
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
	color: hsl(40, 90%, 60%);
}

.token.atrule,
.token.attr-value,
.token.keyword {
	color: hsl(350, 40%, 70%);
}


.token.regex,
.token.important {
	color: #e90;
}

.token.important {
	font-weight: bold;
}

.token.entity {
	cursor: help;
}


@media all and (min-width: 770px) {
 
	#home {
		height: 100%;
		width: 30%;
		
		padding: 5% 5% 10% 14%;
		
		position: fixed;
		top: 0;
		left: 0;
	}
	 
	#home h1 { 
		margin: 0 0 0 -94px; /* line up logo text with nav */
	}
	
	#nav, #home h1 {
		  float: none; 
		  display: block;
	 }
	
	#nav ul { margin-top: 20%; }
	
	 
	#nav li {
		font-size: 2.5rem;
		line-height: 3.6rem;
		margin: 0;
		float: none;
	}
	
	#content { 
		max-width: 60%;
	
		position: relative; 
		top: 0; 
		left: 30%;       
	}

}

@media all and (min-width: 1100px) {

	#home h1 { margin-left: -130px; width: 277px; }
	#home img { 
		max-width: 277px;
		height: 103px;
	}
	
	#nav li { 
		font-size: 2.8rem;
	}

}