@import url(http://fonts.googleapis.com/css?family=Bangers);

html,
body{
  background: #111;
  color: #eee;
  font-family: "Bangers", serif;
}

a{
  color: #fff;
  text-decoration: none;
}

a:hover{
  text-decoration: underline;
}

header{
  height: 200px;
  width: 1000px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -110px 0 0 -500px;
}

footer{
  position: fixed;
  bottom: 30px;
  width: 100%;
  text-align: center;
  letter-spacing: 2px;
  line-height: 21px;
  -webkit-font-smoothing: antialiased;
  color: #aaa;
}

h1, h2, h3{
  text-align: center;
  text-transform: uppercase;
  line-height: 200px;
  white-space: nowrap;

  -webkit-animation: color 9s infinite ease;
  -moz-animation:    color 9s infinite ease;
  -o-animation:      color 9s infinite ease;
  animation:         color 9s infinite ease;

  position: absolute;
  top: 0;
  width: inherit;
  text-align: center;

}

h3{
  font-size: 60px;
  color: red;
}

h2{
  font-size: 130px;
  color: green;
  -webkit-animation-delay: -6s; 
  -moz-animation-delay:    -6s; 
  -o-animation-delay:      -6s; 
  animation-delay:         -6s;
}

h1{
  font-size: 190px;
  color: aquamarine;
  -webkit-animation-delay: -3s; 
  -moz-animation-delay:    -3s; 
  -o-animation-delay:      -3s; 
  animation-delay:         -3s;
}


@-webkit-keyframes color {
  0%   { opacity: 0; }
  5%   { opacity: 0; }
  6%   { opacity: 1; }
  30%  { opacity: 1; }
  31%  { opacity: 0; }
  100% { opacity: 0; }
}
@-moz-keyframes color {
  0%   { opacity: 0; }
  5%   { opacity: 0; }
  6%   { opacity: 1; }
  30%  { opacity: 1; }
  31%  { opacity: 0; }
  100% { opacity: 0; }
}
@-o-keyframes color {
  0%   { opacity: 0; }
  5%   { opacity: 0; }
  6%   { opacity: 1; }
  30%  { opacity: 1; }
  31%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes color {
  0%   { opacity: 0; }
  5%   { opacity: 0; }
  6%   { opacity: 1; }
  30%  { opacity: 1; }
  31%  { opacity: 0; }
  100% { opacity: 0; }
}