@import "compass/css3";

$numCircles:12;
$circleColor:#df91df;//lilac
$backgroundColor:#bfbfbf; //grey
$boxShadowDimensions: 100px 100px 50px; //horiz-offset, vert-offset, blur
$period: 2.4s;

@keyframes blink {
  0% {
     box-shadow: $circleColor $boxShadowDimensions;
  }
  10% {
     box-shadow: $backgroundColor $boxShadowDimensions;
  }
  
 20%{
    box-shadow: $circleColor $boxShadowDimensions;
  }
  100% {
     box-shadow: $circleColor $boxShadowDimensions;
  }
}

body{
  background-color:$backgroundColor;
}
.stare_here{
  position:absolute;
  top:40%;
  left:45%;
  display:block;
  margin-left:34px;
  margin-top:30px;
  font-family: Helvetica, Arial, Sans-Serif;
}

.circles div{
  position:absolute;
  top:40%;
  left:45%;
  width:68px;
  height:68px;
  border-radius: 68px;
  box-shadow: $circleColor $boxShadowDimensions;
  animation: blink $period steps(10) infinite;
}

@for $i from 1 through $numCircles {
  .circles div:nth-child(#{$i}) {
      animation-delay: ($period*$i/$numCircles);
      transform: rotateZ((360/$numCircles)*$i*1deg + 3deg) translateX(80px);
    }
}