/* @override file:///Users/sim/simurai/Projects/lab/css/tiltshift/style.css */

/* TiltShift text by simurai.com */

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

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

header {display:block;}
header a {position:static;margin:0;color:black;display:inline;}
header p{margin-top:0;background:rgba(0,0,0,0.1);color:rgba(0,0,0,0.8);font-weight:normal;padding:10px;}

#wrapper {
  text-align: center;
  font-weight: bold;
  margin: 100px auto;
  width: 600px;
  padding: 7em 0;
  background: url(bg.jpg) no-repeat center center;
  -webkit-perspective: 350;
  -moz-perspective: 350;
  -o-perspective: 350;
  perspective: 350;
  -moz-border-radius: 4px;
  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;
  box-shadow: rgba(0,0,0,0.1) 0px 5px 7px;
}


#wrapper p {
  font-family: 'Yanone Kaffeesatz', 'Droid Serif', 'Nobile', serif;
  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;
  -moz-transition: -moz-transform .1s ease-in;
  -o-transition: -o-transform .1s ease-in;
  transition: 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) rotateX(28deg) skewX(-4deg);
  -o-transform: rotate(6.5deg) rotateX(28deg) skewX(-4deg);
  transform: rotate(6.5deg) rotateX(28deg) skewX(-4deg);
  -webkit-transition: -webkit-transform .1s ease-out;
  -moz-transition: -moz-transform .1s ease-out;
  -o-transition: -o-transform .1s ease-out;
  transition: 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;
  cursor: crosshair;
}
#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;
}