/* @override http://lab.simurai.com/css/tilt-shift/style.css */

/* TiltShift text by simurai.com  */

@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:bold);

html {
	background: url(http://files.simurai.com/tumblr/img/bg_glow.png) no-repeat fixed center center,
				url("http://files.simurai.com/tumblr/img/bg.gif") repeat fixed 0 0;
	font: 62.5%/1 "Lucida Sans Unicode","Lucida Grande",Verdana,Arial,Helvetica,sans-serif;
}


#wrapper {
	text-align: center;
	font-weight: bold;
	font-family: "Yanone Kaffeesatz", "Lucida Grande", Lucida, Verdana, sans-serif;
	margin: 100px auto;
	width: 600px;
	padding: 7em 0;
	background: url(bg.jpg) no-repeat center center;
	-webkit-perspective: 350;
	-webkit-border-radius: 4px;	-moz-border-radius: 4px;
	-webkit-box-shadow: rgba(0,0,0,0.1) 0px 5px 7px;	-moz-box-shadow: rgba(0,0,0,0.1) 0px 5px 7px;
}
#wrapper:focus {
	outline: none;
}


#wrapper p {
	font-size: 10em;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	text-shadow: 	rgba(0,0,0,0.1) 0 20px 80px;
	-webkit-transition: -webkit-transform .1s ease-in;
}


/* wrapper:hover */

#wrapper:hover p {
	color: transparent;
	-webkit-transform: rotate(6.5deg) rotateX(28deg) skewX(-4deg);
			-moz-transform:  rotate(6.5deg);
	-webkit-transition: -webkit-transform .1s ease-out;
}
#wrapper:hover p:nth-child(1) {
	font-size: 9em;
	text-shadow: 	#fff 0 0 10px, 
					#fff 0 4px 3px, #ddd 0 9px 3px,  #ccc 0 12px 1px, 
					rgba(0,0,0,0.2) 0 14px 5px, rgba(0,0,0,0.1) 0 20px 10px,
					rgba(0,0,100,0.2) 0 15px 80px;
	text-indent: 0.3em;
}
#wrapper:hover p:nth-child(2) {
	font-size: 10em;
	text-shadow: 	#fff 0 0 1px, 
					#eee 0 4px 3px, #ddd 0 9px 3px,  #ccc 0 12px 1px, 
					rgba(0,0,0,0.2) 0 14px 3px, rgba(0,0,0,0.1) 0 20px 10px,
					rgba(0,0,100,0.2) 0 15px 80px;
}
#wrapper:hover p:nth-child(3) {
	font-size: 11em;
	text-shadow: 	#fff 0 0 2px, 
					#fff 0 4px 5px, #ddd 0 9px 5px,  #ccc 0 12px 10px, 
					rgba(0,0,0,0.2) 0 14px 5px, rgba(0,0,0,0.1) 0 20px 10px,
					rgba(0,0,100,0.2) 0 15px 80px;
}


/* Interaction */

#wrapper p:nth-child(2):hover {
	text-shadow: 	#fff 0 -5px 1px, 
					#eee 0 -1px 3px, #ddd 0 4px 3px,  #ccc 0 7px 1px, 
					rgba(0,0,0,0.2) 0 15px 5px, rgba(0,0,0,0.1) 0 20px 10px,
					rgba(0,0,0,0.2) 0 15px 80px;
}
#wrapper p:nth-child(2):active {
	text-shadow: 	rgba(0,0,0,0.2) 0 14px 5px, rgba(0,0,0,0.1) 0 20px 10px,
					rgba(0,0,0,0.2) 0 15px 80px;
}

#wrapper p::selection {
	background-color: red;
}



/* below just the usual stuff */

strong {
	font-weight: bold;
	color: #000;
}

#meta {
	color: #777;
	font-size: 1.2em;
	line-height: 1.5em;
	margin-bottom: 90px;
	text-align: center;
	text-shadow: rgba(255,255,255,0.5) 0 1px 0;
} 
#meta p { margin-bottom: 10px; }
#meta a {
	text-decoration: none;
	color: #7276ff;
}
#meta a:hover { color: rgba(114,118,255,0.5); }


#simurai {
	width: 100px;
	height: 300px;
	position: fixed;
	z-index: 88;
	bottom: 60px;
	right: 40px;
	opacity: 0.1;
}
#simurai:hover { opacity: 1; }


/* Love */

#love {
	padding: 10px;
	position: fixed;
	left: 0;
	bottom: 0;
	background-color: rgba(255,255,255,0.3);
	-webkit-box-shadow: inset rgba(0,0,0,0.15) 0 1px 2px;
	border-radius: 0 10px 0 0;
	opacity: .33;
}
#love:hover { opacity: 1; }
#love * { padding-right: 10px; }
#love *:last-child { padding-right: 2px; }