@import "compass/css3";

/* The hover effect */

span {
 transform-origin: 50% 50% 80px;
 transform: rotateX(0deg);
 position: absolute;
 width: 20px;
}

h1.no-transition span {
  transition: all 0s !important;
  transform: rotateX(0deg) !important;
}

@for $i from 1 through 7 {
  span:nth-child(#{$i}) {
    transition: all 0.7s ease + ' ' + $i /8 + s;
    left: $i * 31 + px;
  }
}

h1:hover span {
  transform: rotateX(360deg);
  color: deeppink;
}

/* Beautifications */

html {
  height: 100%;
}

body {
  background-repeat: no-repeat;
  background-attachment: fixed;
  overflow: hidden;
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  font-weight: bold;
  text-transform: uppercase;
  font-family: Monaco, Consolas, "Lucida Console", monospace;
  font-smoothing: antialiased;
  perspective: 700px;
  transform-style: preserve-3d;
  
  background-color: #ffffff;
@include filter-gradient(#ffffff, #eae0de, horizontal);
@include background-image(radial-gradient(center, ellipse cover, #ffffff 0%,#eae0de 100%));
}

h1 {
  position: relative;
  margin-top: -40px;
  top: 50%;
  width: 260px;
  height: 55px;
  margin-left: -130px;
  cursor: pointer; 
  left: 50%;
  font-size: 47px;
  color: #556270;
}

.transition span{
  transform: rotateX(360deg);
}