body, html		{ height: 100%;
			  width: 100%;
			  margin: 0;
			  padding: 0; }
body 			{ position: relative; 
			  font-weight: 300;
			  background-color: #F3F7FC;
			  font-family: 'Alegreya sans', 'sans-serif'; }
#head			{ position: absolute;
			  top: 0;
			  left: 0;
			  width: 100%;
			  color: #D8DEE9;
			  text-shadow: 0 0 2px #666;
			  font-size: 14pt;
			  background-color: #2E3440; }
#head > div		{ padding: 8pt 10pt; }
#tail			{ position: absolute;
			  left: 10pt;
			  color: #8FBCBB;
			  opacity: 1.0;
			  bottom: 10pt; }
h1			{ margin: 0; 
			  line-height: 60pt;
			  font-weight: 500;
			  color: #2E3440;
			  font-size: 60pt; }
h2			{ margin: 0;
			  font-weight: 300;
			  line-height: 20pt;
			  padding-left: 0.5ex;
			  font-variant: small-caps;
			  font-size: 20pt; }
h1, time		{ display: inline-block; 
			  vertical-align: top; }
h2, time		{ text-shadow: 0 0 1px #acd; }
time			{ transform: rotate(90deg);
		 	  transform-origin: left bottom 0; 
			  font-size: 18pt; }

#tail.shown, 
#head-inner.shown	{ opacity: 1.0; }

@media (min-width: 750px) {
 #tail			{ transition: opacity 1s ease-in;
	 		  left: 40pt;
			  bottom: 40pt;
	 		  opacity: 0.0; }
 h1			{ font-size: 128pt; 
	 		  line-height: 100pt; }
 h2			{ font-size: 48pt; 
	 		  line-height: 32pt; }
 time			{ font-size: 30pt; }
 #head-inner		{ opacity: 0.0;
			  transition: opacity 1s ease-in; }
 #head > div		{ padding: 20pt 40pt; }
}