@import "compass/css3";

@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
    @content; 
  }
  @-moz-keyframes #{$name} {
    @content;
  }
  @-ms-keyframes #{$name} {
    @content;
  }
  @keyframes #{$name} {
    @content;
  } 
}
@mixin animate($animation) {
  -webkit-animation: #{$animation};
	-moz-animation: #{$animation};
	-ms-animation: #{$animation};
	animation: #{$animation};
}

html {
   height: 100%;
} 

body {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex; 
  display: flex;

  -webkit-box-align: center; 
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;

  -webkit-box-pack: center; 
  -moz-box-pack: center; 
  -ms-flex-pack: center; 
  -webkit-justify-content: center;
  justify-content: center;

  margin: 0;
  height: 100%;
  width: 100%; 
   
  background-image: radial-gradient(circle farthest-corner at center, #003F7A 0%, #000 100%);
} 

h1 {
	color: hsla(0,0%,100%,.3);
	font: 900 800% Baskerville, 'Palatino Linotype', Palatino, serif;	
}

@include keyframes (loading) {
	from { max-width: 0; }
}

h1:before {
	content: attr(data-content);
	position: absolute;
	overflow: hidden;
	max-width: 100%;
	color: hsla(0,0%,100%,.6);
	@include animate(loading 10s linear infinite);
}