/* http://meyerweb.com/eric/tools/css/reset/ 
		   v2.0 | 20110126
		   License: none (public domain)
		*/

		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, 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,
		article, aside, canvas, details, embed, 
		figure, figcaption, footer, header, hgroup, 
		menu, nav, output, ruby, section, summary,
		time, mark, audio, video {
			margin: 0;
			padding: 0;
			border: 0;
			font-size: 100%;
			font: inherit;
			vertical-align: baseline;
		}
		/* HTML5 display-role reset for older browsers */
		article, aside, details, figcaption, figure, 
		footer, header, hgroup, menu, nav, section {
			display: block;
		}
		body {
			line-height: 1;
		}
		ol, ul {
			list-style: none;
		}
		blockquote, q {
			quotes: none;
		}
		blockquote:before, blockquote:after,
		q:before, q:after {
			content: '';
			content: none;
		}
		table {
			border-collapse: collapse;
			border-spacing: 0;
		}


		/*font styles*/

	@font-face {
  	font-family: 'Reenie Beanie';
  	font-style: normal;
  	font-weight: 400;
  	src: local('Reenie Beanie'), local('ReenieBeanie'), url(https://fonts.gstatic.com/s/reeniebeanie/v10/z7NSdR76eDkaJKZJFkkjuvWxXPq1q6Gjb_0.woff2) format('woff2');
  	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
	}

	@font-face {
   	font-family: 'Noto Serif';
   	font-style: normal;
   	font-weight: 400;
   	src: local('Noto Serif'), local('NotoSerif'), url(https://fonts.gstatic.com/s/notoserif/v8/ga6Iaw1J5X9T9RW6j9bNfFcWaDq8fMU.woff2) format('woff2');
   	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
   	}

   	@font-face {
  	font-family: 'Noto Serif';
  	font-style: normal;
  	font-weight: 700;
  	src: local('Noto Serif Bold'), local('NotoSerif-Bold'), url(https://fonts.gstatic.com/s/notoserif/v8/ga6Law1J5X9T9RW6j9bNdOwzfReece9LOoc.woff2) format('woff2');
  	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
	}

	@font-face {
  	font-family: 'Noto Serif';
 	font-style: italic;
 	 font-weight: 400;
  	src: local('Noto Serif Italic'), local('NotoSerif-Italic'), url(https://fonts.gstatic.com/s/notoserif/v8/ga6Kaw1J5X9T9RW6j9bNfFImajC7XsdBMg.woff2) format('woff2');
  	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
	}


		/* Default Styles Below*/

		html {
			background-color: rgb(242, 230, 223);
		}

		/*img {
			width: 100%;
		}*/

		.griding {
			display: grid;
			grid-template-columns: 1fr;
			/*grid-template-rows: 10% 12% 40% 40% 5%;*/
			grid-template-areas: 
				"a" 
				"b"
				"c"
				"d"
				"f"
				; 
		}

		header {
			grid-area: a;
			padding: 5%;
			font-family: "Reenie Beanie", "Times New Roman", serif;
			font-size: 4em;
			letter-spacing: .2em;
			text-align: center;
			
		}

		.navbar {
			grid-area: b;
			padding: 5% 10% 5% 10%;
			
		}

		.navbar ul {
			display: grid;
			grid-template-rows: 1fr 1fr 1fr 1fr;
			grid-gap: 1em;
		}

		.navbar li {
			font-family: "Noto Serif", "Times New Roman", serif;
			font-size: .9em;
			font-weight: bold;
			letter-spacing: .5em;
			line-height: 1.5em;
			border-bottom: 2px solid white;
			text-align: center;
		}

		.content {
			grid-area: d;
			padding: 5%;
	
		}

		#self-protrait img {
			max-width: 100%;
			height: auto;
		
		}

		figcaption {
			font-family: "Noto Serif", "Times New Roman", serif;
			font-size: .6em;
			letter-spacing: 0.1em;
			text-align: center;
		}
		
		.info {
			grid-area: c;
			padding: 2%;
			background-color: rgb(147,154,160);	
		}

		
		#main h2 {
			font-family: "Reenie Beanie", "Times New Roman", serif;
			font-size: 2em;
			letter-spacing: .2em;
			text-align: left;
			padding: 5% 5% 0% 5%;
		}
	
		#main h3 {
			font-family: "Noto Serif", "Times New Roman", serif;
			font-size: 1em;
			letter-spacing: 0.1em;
			line-height: 1.5em;
			padding: 5% 5% 0% 5%;
			font-weight: bold;
			text-align: left;
		}

		#main p {
			font-family: "Noto Serif", "Times New Roman", serif;
			font-size: 1em;
			letter-spacing: .2em;
			line-height: 1.5em;
			padding: 5% 5% 10% 5%;
			text-align: left;

		}

		footer {
			grid-area: f;
			font-family: "Reenie Beanie", "Times New Roman", serif;
			font-size: 1em;
			text-align: center;
			padding: 2%;

		}

		a:link, a:visited {
			color: black;
			text-decoration: none;
		}

		a:hover, a:focus {
		 	color: white;
		}


		.info p {
			font-family: "Noto Serif", "Times New Roman", serif;
			font-size: 1em;
			letter-spacing: .2em;
			line-height: 1.5em;
			padding: 5% 5% 10% 10%;
			text-align: left;

		}

		/* coding.html styling */


		#pageinfo h2 {
			font-family: "Reenie Beanie", "Times New Roman", serif;
			font-size: 3em;
			letter-spacing: .1em;
			padding: 10% 5% 0% 10%;
		}

		#pageinfo h3 {
			font-family: "Noto Serif", "Times New Roman", serif;
			font-size: 1.2em;
			letter-spacing: .2em;
			padding: 5% 10% 5% 10%;
		}

		.thumbnails {
			display: grid;
			grid-template-columns: 1fr;
			grid-template-rows: 1fr 1fr 1fr;
			padding: 5%;
			
		}

		#blackbird h2 {
			font-family: "Reenie Beanie", "Times New Roman", serif;
			font-size: 2.5em;
			letter-spacing: .1em;
			padding: 5%;
		}

		#blackbird a {
			font-family: "Noto Serif", "Times New Roman", serif;
			font-weight: bold;
			font-size: 1em;
			letter-spacing: .2em;
			padding: 0% 0% 0% 5%;
		}

		#blackbird img {
			max-width: 100%;
			height: auto;
			padding: 5% 0% 0% 0%;
			
		}

		#recipe h2 {
			font-family: "Reenie Beanie", "Times New Roman", serif;
			font-size: 2.5em;
			letter-spacing: .1em;
			padding: 5%;
		}

		#recipe a {
			font-family: "Noto Serif", "Times New Roman", serif;
			font-weight: bold;
			font-size: 1em;
			letter-spacing: .2em;
			padding: 0% 0% 0% 5%;
		}

		#recipe img {
			max-width: 100%;
			height: auto;
			padding: 5% 0% 0% 0%;
			
		}

		#narrative h2 {
			font-family: "Reenie Beanie", "Times New Roman", serif;
			font-size: 2.5em;
			letter-spacing: .1em;
			padding: 5%;
		}

		#narrative a {
			font-family: "Noto Serif", "Times New Roman", serif;
			font-weight: bold;
			font-size: 1em;
			letter-spacing: .2em;
			padding: 0% 0% 0% 5%;

		}

		#narrative img {
			max-width: 100%;
			height: auto;
			padding: 5% 0% 0% 0%;
		
		}

		/* blackbird html styling */

		#title h2 {
			font-family: "Reenie Beanie", "Times New Roman", serif;
			font-size: 3em;
			letter-spacing: .1em;
			padding: 10% 5% 0% 10%;
		}

		#title h3 {
			font-family: "Noto Serif", "Times New Roman", serif;
			font-size: 1.2em;
			letter-spacing: .2em;
			padding: 5% 10% 0% 10%;
		}

		#title p span {
			font-style: italic;
		}

		#birdindepth img {
			max-width: 100%;
			height: auto;
			padding: 3%;
		}

		#birdquickshot {
			padding: 5%;
		}

		#birdquickshot p {
			font-family: "Noto Serif", "Times New Roman", serif;
			font-size: 1em;
			letter-spacing: .1em;
			line-height: 1.5em;
			padding: 5%;
		}


		#birdhtml ul {
			list-style-type: disc;
			font-family: "Noto Serif", "Times New Roman", serif;
			font-size: 1em;
			letter-spacing: .1em;
			line-height: 1.5em;
			padding: 10%;
		}

		#birdcss ul {
			list-style-type: disc;
			font-family: "Noto Serif", "Times New Roman", serif;
			font-size: 1em;
			letter-spacing: .1em;
			line-height: 1.5em;
			padding: 10%;
		}

		/* recipe html styling */

		#recipeindepth img {
			max-width: 100%;
			height: auto;
			padding: 3%;
		}

		#recipequickshot {
			padding: 5%;
		}

		#recipequickshot p {
			font-family: "Noto Serif", "Times New Roman", serif;
			font-size: 1em;
			letter-spacing: .1em;
			line-height: 1.5em;
			padding: 5%;
		}


		#recipehtml ul {
			list-style-type: disc;
			font-family: "Noto Serif", "Times New Roman", serif;
			font-size: 1em;
			letter-spacing: .1em;
			line-height: 1.5em;
			padding: 10%;
		}

		#recipecss ul {
			list-style-type: disc;
			font-family: "Noto Serif", "Times New Roman", serif;
			font-size: 1em;
			letter-spacing: .1em;
			line-height: 1.5em;
			padding: 10%;
		}

		/* narrative html styling */

		#narindepth img {
			max-width: 100%;
			height: auto;
			padding: 3%;
		}

		#narequickshot {
			padding: 5%;
		}

		#narquickshot p {
			font-family: "Noto Serif", "Times New Roman", serif;
			font-size: 1em;
			letter-spacing: .1em;
			line-height: 1.5em;
			padding: 5%;
		}


		#narhtml ul {
			list-style-type: disc;
			font-family: "Noto Serif", "Times New Roman", serif;
			font-size: 1em;
			letter-spacing: .1em;
			line-height: 1.5em;
			padding: 10%;
		}

		#narcss ul {
			list-style-type: disc;
			font-family: "Noto Serif", "Times New Roman", serif;
			font-size: 1em;
			letter-spacing: .1em;
			line-height: 1.5em;
			padding: 10%;
		}



		/* Illustrations html styling */

		#stilllife {
			display: grid;
			grid-template-columns: 1fr;
			padding: 5%;
		}

		#stilllife figcaption {
			font-family: "Noto Serif", "Times New Roman", serif;
			font-size: .6em;
			letter-spacing: .2em;
			padding: 0% 5% 5% 5%;
			line-height: 1.5em;
			text-align: center;
		}

		#stilllife ul {
			list-style-type: disc;
			padding: 5%;
		}

		#stilllife li {
			font-family: "Noto Serif", "Times New Roman", serif;
			font-size: 1em;
			letter-spacing: .1em;
			line-height: 1.5em;
		}

		#stilllife img {
			max-width: 100%;
			height: auto;
		}

		#itsame {
			display: grid;
			grid-template-columns: 1fr;
			padding: 5%;
		}

		#itsame figcaption {
			font-family: "Noto Serif", "Times New Roman", serif;
			font-size: .6em;
			letter-spacing: .2em;
			padding: 0% 5% 5% 5%;
			line-height: 1.5em;
			text-align: center;
		}

		#itsame ul {
			list-style-type: disc;
			padding: 5%;
		}

		#itsame li {
			font-family: "Noto Serif", "Times New Roman", serif;
			font-size: 1em;
			letter-spacing: .1em;
			line-height: 1.5em;
		}

		#itsame img {
			max-width: 100%;
			height: auto;
		}

		/* narratives html styling */


		#videomeat {
			display: grid;
			grid-template-areas: 
				"about"
				"video"
				"process"
				;
		}

		#aboutvideo {
			grid-area: about;
		}

		#aboutvideo h2 {
			font-family: "Reenie Beanie", "Times New Roman", serif;
			font-size: 3em;
			letter-spacing: .1em;
			padding: 10% 5% 0% 10%;
		}

		#video {
			grid-area: video;
			max-width: 100%;
			height: auto;
			padding: 0% 5% 0% 5%;
		
		}

		#process {
			grid-area: process;
			display: grid;
			grid-template-areas: 
				"nameheader"
				"sketch"
				"colors"
				"detail"
				"finished"
				;
		}

		#process h3 {
			grid-area: nameheader;
			font-family: "Reenie Beanie", "Times New Roman", serif;
			font-size: 2em;
			letter-spacing: .1em;
			padding: 10% 5% 0% 10%;
		}

		#process img {
			max-width: 100%;
			height: auto;
		}

		#process ul {
			list-style-type: disc;
			padding: 5%;
		}

		#process li {
			font-family: "Noto Serif", "Times New Roman", serif;
			font-size: 1em;
			letter-spacing: .1em;
			line-height: 1.5em;
		}

		#sketch {
			grid-area: sketch;
			padding: 5%;
		}

		#color {
			grid-area: colors;
			padding: 5%;
		}

		#detail {
			grid-area: detail;
			padding: 5%;
		}

		#finished {
			grid-area: finished;
			padding: 5%;
		}


		#warmthscript {
			display: grid;
			grid-template-areas: 
				"scriptinfo"
				"scriptpic"
				;
		}

		#aboutscript {
			grid-area: scriptinfo;

		}

		#aboutscript h2 {
			font-family: "Reenie Beanie", "Times New Roman", serif;
			font-size: 3em;
			letter-spacing: .1em;
			padding: 10% 5% 0% 10%;
		}

		#aboutscript p {
			font-family: "Noto Serif", "Times New Roman", serif;
			font-size: 1em;
			letter-spacing: .1em;
			line-height: 1.5em;
			padding: 5%;
		}

		#aboutscript h3 {
			font-family: "Noto Serif", "Times New Roman", serif;
			font-size: 1em;
			letter-spacing: .1em;
			line-height: 1.5em;
			padding: 5%;
		}

		#script {
			grid-area: scriptpic;
		}

		#script img {
			max-width: 100%;
			height: auto;
		}


		/* contact html styling */

		#contactme {
			background-color: rgb(147, 154, 161);
			height: 300px;
		}

		#contactme h3 {
			font-family: "Reenie Beanie", "Times New Roman", serif;
			font-size: 2.5em;
			padding: 10%;
			text-align: center;
		}

		#contactme li {
			font-family: "Noto Serif", "Times New Roman", serif;
			font-size: 1em;
			letter-spacing: .2em;
			text-align: center;
			line-height: 2em;
		}

		#contactme li span {
			font-weight: bold;
		}

		#resumepdf {
			display: grid;
			grid-template-columns: 1fr 1fr;
		}

		#resumepdf img {
			max-width: 100%;
			height: auto;
		}

		#resumepdf h3 {
			font-family: "Noto Serif", "Times New Roman", serif;
			font-size: 1.5em;
			text-align: center;
			letter-spacing: .2em;
			padding: 35% 0% 0% 0%;
		}

		/* tablets */

		@media only screen and (min-width: 501px) and (max-width: 800px) {

	
		/* index.html */

		.content {
			padding: 5% 5% 0% 5%;
		}

		/* blackbird.html */

		#birdindepth img {
			padding: 0% 5% 0% 0%;
		}

		/* recipe.html */

		#recipeindepth img {
			padding: 0% 5% 0% 0%;
		}


		/* narrative.html */

		#narindepth img {
			padding: 0% 5% 0% 0%;
		}


		/* narratives.html */

		#process {
			grid-template-areas: 
				"nameheader nameheader"
				"sketch colors"
				"detail finished"
				;

		}

	} /* closes tablet styles */
		
		/* desktops */

		@media only screen and (min-width: 801px) {

		/* default styles */
		
		.griding {
			grid-template-columns: 25% 50% 20%;
			grid-template-areas: 
				"b a a" 
				"b c c"
				"b d d"
				"f f f"
				; 
		}

		.navbar {
			margin: 10% 0% 0% 0%;
			padding:60% 5% 0% 10%;
			/*border-right: 1px solid rgb(147,154,160);*/
		}

		.navbar ul {
			/*border-right: 2px solid white /*rgb(147,154,160)*/;
		}

		.navbar li {
			line-height: 5em;
		}

		/* index.html*/

		.index .griding {
			grid-template-columns: 25% 20% 50%;
			grid-template-areas: 
				"b a a" 
				"b c d"
				"b c d"
				"f f f"
				; 
		}
		

		.index .content {
			grid-area: c;
			padding: 15% 0% 0% 0%;
		}

		.index .info {
			grid-area: d;
		}

		
		
		/* coding.html */

		.coding .info {
			margin: 0% 10% 0% 10%;
		}

		.coding .thumbnails {
			grid-template-columns: 1fr 1fr;
			grid-gap: 20px;
			padding: 0% 5% 0% 5%;
		}

		/* blackbird.html */

		.blackbird .info {
			margin: 0% 10% 0% 10%;
		}

		.blackbird .content {
			margin: 0% 10% 0% 10%;
		}

		.blackbird #birdindepth {
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-template-areas: 
				"quickshot quickshot"
				"html css"
				;		
			grid-gap: 10px;
		}

		.blackbird #birdquickshot {
			grid-area: quickshot;
		}

		.blackbird #birdhtml {
			grid-area: html;
		}
		
		.blackbird #birdcss {
			grid-area: css;
		}

		/* recipe.html */

		.recipe .info {
			margin: 0% 10% 0% 10%;
		}

		.recipe .content {
			margin: 0% 10% 0% 10%;
		}

		.recipe #recipeindepth {
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-template-areas: 
				"quickshot quickshot"
				"html css"
				;		
			grid-gap: 10px;
		}

		.recipe #recipequickshot {
			grid-area: quickshot;
		}

		.recipe #recipehtml {
			grid-area: html;
		}
		
		.recipe #recipecss {
			grid-area: css;
		}

		/* narrative.html */

		.narrative .info {
			margin: 0% 10% 0% 10%;
		}

		.narrative .content {
			margin: 0% 10% 0% 10%;
		}

		.narrative #narindepth {
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-template-areas: 
				"quickshot quickshot"
				"html css"
				;		
			grid-gap: 10px;
		}

		.narrative #narquickshot {
			grid-area: quickshot;
		}

		.narrative #narhtml {
			grid-area: html;
		}
		
		.narrative #narcss {
			grid-area: css;
		}

		/* illustrations.html */

		.illustrations .info {
			margin: 0% 10% 0% 10%;
		}

		.illustrations .content {
			margin: 0% 10% 0% 10%;
		}


		.illustrations #pageinfo p {
			padding: 0% 10% 2% 10%;
		}

		#drawings {
			display: grid;
			grid-template-columns: 1fr 1fr;
		}

		/* narratives.html */

		.narratives .info {
			margin: 0% 10% 0% 10%;
		}

		.narratives .content {
			margin: 0% 10% 0% 10%;
		}


		#process {
			grid-template-areas: 
				"nameheader nameheader"
				"sketch colors"
				"detail finished"
				;

		}

		/* contact.html */

		.contact .info {
			margin: 0% 10% 0% 10%;
		}

		.contact .content {
			margin: 0% 10% 0% 10%;
		}

		.contact #contactme h3 {
			padding: 5% 10% 0% 5%;
		}

		.contact #contactme ul {
			padding: 5% 10% 5% 10%;
		}

	} /* closes desktop styles */