@import "bourbon";

*, *:before, *:after { 
  margin: 0;
  @include box-sizing(border-box); 
}

body, html { 
  height: 100%;
  color: #c1c1c1;
  @include radial-gradient(#2d2d2d,#232323); 
}

/* 

.container {
  top: 45%;
  width: 100%; 
  margin: 0 auto 0;
  position: absolute;
}

*/

.slogan {
  width: 0;
  margin: 0 auto;
  padding: 2px 0 0;
  letter-spacing: 2px;
  text-align: center;
  font-family: 'Courier New', monospace;
  font-size: 32px; 
  font-weight: 300; 
  border-right: 6px solid #27ae60;
  overflow: hidden;
  position: relative;
  display: block;
  @include animation-name(blink-start, typing, blink-end);
  @include animation-duration(1s, 1s, 1s);
  @include animation-timing-function(linear, steps(13, end), linear);
  @include animation-iteration-count(1,1,infinite);
  @include animation-delay(0s, 1s, 2s);
  @include animation-fill-mode(forwards);
  
  span { display: block;  width: 260px; }
}

@include keyframes(typing) {
  from { width: 0; }
  to   { width: 270px; }
}

@include keyframes(blink-start) {
  from, to { border-color: #27ae60; }
  50% { border-color: transparent; }
}

@include keyframes(blink-end) {
  from, to { border-color: #27ae60; }
  50% { border-color: transparent; }
}