@charset "UTF-8";
/* CSS Document */
/*MEYER RESET*/
/* http://meyerweb.com/eric/tools/css/reset/v2.0 | 20110126License: 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;
}

/* GLOBAL */

body, nav, header {
   font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
   font-size: 100%;
   vertical-align: baseline;
   background: #302d3a;
}

p { margin: 2% 15% 2% 15%;
	font-size:120%;
	min-width:50%;
	text-align:left;
}

h1 {
	font-family: 'Gloria Hallelujah',"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	font-size: 5em;
	text-align:center;
	color:white;
	line-height:1em;
	margin-top:-1.5em;


}



h2 {font-family: 'Gloria Hallelujah',"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
color:white;
text-align:center;
font-size:2.5em;}




h3 {font-family: 'Gloria Hallelujah',"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
color:white;
text-align:center;
font-size:1.5em;}


h4 {font-family: 'Gloria Hallelujah',"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
color: white;
text-align: left;
text-indent: 15%;
font-style: italic;
font-size: 1em;
}

em{font-style: italic ;} 


/* HOME */

#home {overflow:hidden;
}

#home article#intro {margin:auto;
width:80%;
left:10%;}

#home article#intro p {
	color:#c5c0c9;
	text-align:center;
	font-size:0.90em;
}

#home article#blurb p {
	color: #9e86b0;
	text-align: center;
	font-size: 2em;

}


#home a, #home a:visited  { color: #fff; text-decoration: none;}
#home a:hover, #home a:focus { color: #b6a3c9; }

div#sloth {
	padding-top:30px;
	text-align:center;
}



/* ABOUT */

#about article p {
	color:#c9bcd2;
	text-align:left;
}


#about a, #about a:visited  { color: #fff; text-decoration: none;}
#about a:hover, #about a:focus { color: #b6a3c9; }


img#me {
	max-width:33%;
}

div#profile 
{text-align: center;
margin-bottom: 3em;
padding-top:50px;}

ul.books {color:#c9bcd2; margin-left:20%; font-size:1.25em; list-style-type:none;}

ul.books li::before {content: url(../images/book.png); margin:0.5em;
}

ul.books li {margin-right: 20%;}

/* eproduction */

img#collage {
	width: auto;
	height:400px;
}

div#epro 
{text-align: center;
padding-top:70px;
}

#eproduction { 
background-color:#302d3a;
min-height:50%;
max-height:100%;
margin: 0 auto; 
width: auto; 
position: relative; 
display:block;
}

#eproduction article img {
	width:50%;
	
}
 

#eproduction p {
	color: #c9bcd2;
	text-align: left;
}

.center {text-align:center;	
}

div.eproduction {
text-align: center;
}


img {
	display:inline;
}

figure {display:block;
text-align:center;}

figcaption {color:#b6a3c9;
margin:1em;}

#eproduction a, #eproduction a:visited  { color: #fff; text-decoration: none;}
#eproduction a:hover, #eproduction a:focus { color: #b6a3c9; }

p.immortal {
margin-bottom:5%;}

.container {margin-bottom:1%;
text-align:center;}

.container > div {
    display: inline;
}
.container img {
    vertical-align: middle;
}

img.cover
{max-width:10%;margin: 0 2% 0 2%;}

img.img1 {max-width:20%;margin: 0 2% 0 2%;}

img.img2 {max-width:10%;margin: 0 2% 0 2%;}

img.img3 {max-width:10%; margin: 0 2% 0 2%;}
img.img4 {max-width:20%; margin: 0 2% 0 2%;}
img.img5 {max-width:15%; margin: 0 2% 0 2%;}

img.smaller {max-width:30%;}

/* Projects */

#projects { 
margin-top:10%;
margin-bottom:5%;
}

#projects article p {
	color:#c9bcd2;
	text-align:left;
}

#image1 {max-width: 15%; text-align: center;}
#image2 {max-width: 45%; text-align: center;}
#image3 {max-width:25%; text-align:center;}
#seurat1 {max-width:25%; text-align:center;}
#seurat2 {max-width: 25%; text-align: center;}
#seurat3 {max-width: 25%; text-align: center;}
#lear1 {max-width:15%; text-align: center;}
#lear2 {max-width:15%; text-align: center;}
#lear3 {max-width:15%; text-align: center;}
#howl {max-width:25%; text-align: center; background-color: white;margin-top:.3em;}

#projects a, #projects a:visited  { color: #fff; text-decoration: none;}
#projects a:hover, #projects a:focus { color: #b6a3c9; }

#projects article ul {color:#c9bcd2; margin-left:15%; font-size:1.25em; list-style-type:none;}
#projects article ul li.in {font-size: 0.75em; list-style-type:none; margin-left:-9%;}
#projects article ul li::before {content: url(../images/book.png); margin:0.5em;
}
#projects article ul li.in::before {content:url(../images/secret.png);}

#projects article ul.boop a {color:#c9bcd2;}
#projects article ul.boop a:hover {color:#c9bcd2;}
 #projects article ul.boop a:visited {color:#c9bcd2;}
 #projects article ul.boop a:focus {color:#c9bcd2;}
 
 
 /* Contact */
 
body#contact {
margin-top:5%;
display:block;
overflow:hidden;}

 #contact article {background-color:#655B66; margin:auto; text-align: center;  border-radius:50%; width:500px; height: 500px;}
 #contact p {color:#302d39;padding:5%; text-indent:0; margin-top:0; margin-bottom:0; }
 #contast p:first-of-type {margin-top: 1em;}

 #contact article a, #contact article a:visited  { color: #302d39; text-decoration: none;}
#contact article a:hover, #contact article a:focus { color:#060534; }

#contact img {max-width:10%; margin: 0 1% 0 1%; vertical-align:middle;}

div.hooray {padding:75px; text-indent:1em; align-content: center; margin-top:1em; !important}


#contact a, #contact a:visited  { color: #fff; text-decoration: none;}
#contact a:hover, #contact a:focus { color: #b6a3c9; }


/* EASTER EGG */

body#herp {background: url("../images/mylife.jpg");}

div.rotation {z-index:100;
	animation-name:rotation;
animation-duration: 10s;
animation-iteration-count: infinite;}
@keyframes rotation{0%{transform:rotate(0deg);}
{animation-timing-function:linear;} 
100% {transform:rotate(360deg);}
{animation-timing-function:linear;}}

div.why {position:absolute;
left: 80%;}

div.bub {position:absolute;
bottom:1%;
animation-name:translate;
animation-duration: 5s;
animation-iteration-count: infinite;}
@keyframes translate{0%{transform:translate(400px,500px);} 
{animation-timing-function:ease-in-out;}
100%{transform:translate(-400px,-500px);}
{animation-timing-function:ease-in-out;}
}
div.patback {animation-name:flip;
animation-duration:5s;
animation-iteration-count:infinite;}
@keyframes flip {0%{transform:rotateY(0deg); }
{animation-timing-function:ease-in-out;}
50% {transfrorm:rotateY(180deg);}
{animation-timing-function:ease-in-out;}
100% {transform:rotateY(360deg);}
{animation-timing-function:ease-in-out;}
}

/* Navigation */
/* Navigation Design tweaked from Iris Febres' CSS. THANK YOU EVEN THOUGH I DIDN'T ASK BECAUSE RODZVILLA TOLD US TO STEAL CSS. */
header {
   margin:0;   
   margin-bottom:20px;
   height:0px;
   max-height:10px;
   background-color: #302d3a;
   text-align: center;
}

#nav-wrap ul, #nav-wrap li, #nav-wrap a {
	 margin: 0;
	 padding: 0;
	 border: none;
	 outline: none;
}


#nav-wrap {
   width: 100%;
   text-transform: uppercase;
   z-index: 100;
   position: fixed;
   font: 12px 'Gloria Hallelujah', sans-serif;
   letter-spacing: 3px;
   margin: 0 auto;
   left: 0;
   top: 0;
   background: #706a85;
}

ul#nav {
   height: auto;
   width: auto;
   text-align: center;
}
ul#nav li {
   position: relative;
   list-style: none;
   height: auto;
   display: inline-block;
}

ul#nav li a {
   display: inline-block;
   padding: 8px 13px;
   line-height: 32px;
	text-decoration: none;
   text-align: left;
   color: #fff;
	-webkit-transition: color .2s ease-in-out;
	-moz-transition: color .2s ease-in-out;
	-o-transition: color .2s ease-in-out;
	-ms-transition: color .2s ease-in-out;
	transition: color .2s ease-in-out;
}

ul#nav li a:active { background-color: transparent !important; }
ul#nav li.current a { color: #612F77; }


ul#nav {
   min-height: 10px;
   width: auto;
   text-align: center;
}

ul#nav li {
   position: relative;
   list-style: none;
   height: 48px;
   display: inline-block;
}

ul#nav li a {
   font-size:120%;
   display: inline-block;
   padding: 8px 13px;
   line-height: 32px;
	text-decoration: none;
   text-align: left;
   color: #fff;
   -webkit-transition: color .2s ease-in-out;
   -moz-transition: color .2s ease-in-out;
   -o-transition: color .2s ease-in-out;
   -ms-transition: color .2s ease-in-out;
   transition: color .2s ease-in-out;
}

ul#nav li a:active { background-color: transparent !important; }
ul#nav li.current a { color: #612F77; }

#nav-wrap > a.button { display: none; }

/* MEDIA QUERIES */

@media only screen
and (min-width : 1px)
and (max-width : 652px) {

h1 {font-size: 3em;
	text-align:center;
	color:white;
	line-height:1em;
	margin-top:-1.5em;}
	
	#home article#blurb p {font-size:1em;}
	
	#about, #eproduction, #projects {font-size:0.75em;}
	
	img#collage {height:200px;}
	
	
   #nav-wrap {
      font: 12px 'Gloria Hallelujah', sans-serif;
      background: transparent !important;
      letter-spacing: 1.5px;  
      width: auto;
      position: fixed;
      top: 0;
      right: 0;
	  padding:0;
   }
   #nav-wrap > a {
	   width: 50px;
		height: 50px;
		text-align: left;
		background-color:grey;
		position: relative;
      border: none;
      float: right;
      text-shadow: none;
      color: transparent;
      position: relative;
      top: 0px;
      right: 10px;
   }

	#nav-wrap > a:before,
   #nav-wrap > a:after {
	   position: absolute;
		border: 2px solid #fff;
		top: 35%;
		left: 25%;
		right: 25%;
		content: '';
	}
   #nav-wrap > a:after { top: 60%; }

   /* toggle buttons */
	#nav-wrap:not( :target ) > a:first-of-type,
	#nav-wrap:target > a:last-of-type  {
	   display: block;
	}

   /* hide menu panel */
   #nav-wrap ul#nav {
      height: auto;
		display: none;
      clear: both;
      width: auto; 
      float: right;     
      position: relative;
      top: 12px;
      right: 0px;
   }

   /* display menu panels */
	#nav-wrap:target > ul#nav	{
	  display: block;
      padding: 30px 20px 48px 20px;
      background: #1f2024;
      margin: 0;
      clear:both;
   }

   ul#nav li {
      display: block;
      height: auto;      
      margin: 0 auto; 
      padding: 0;           
      text-align: left;
      border-bottom: 1px solid #302d3a;
      border-bottom-style: dotted; 
   }
  
   ul#nav li a {  
      display: block;    
      margin: 0;
      padding: 0;      
      margin: 12px 0; 
      line-height: 16px; /* reset line-height from 48px */
      border: none;
   }
   
div.center {text-align: center;}