@import url(http://fonts.googleapis.com/css?family=Sacramento|Montserrat:700);

@mixin centerer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
} // end mixin centerer

body {
  background: rgba(235, 235, 235, 1);
} // end body

$white: rgba(255, 255, 255, 1);
$brown: rgba(73, 49, 28, 1);

.coffee {
  @include centerer;
  &:before {
    content: "COFFEE";
    font-family: Montserrat;
    font-weight: 700;
    font-size: 6em;
    background: $brown;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: drinking 20s infinite;
  } // end .coffee:before
  &:after {
    content: "Please wait.";
    font-family: Sacramento;
    font-size: 3em;
    display: block;
    text-align: center;
  } // end .coffee:after
} // end .coffee

@keyframes drinking {
  $p: 0;
  @while $p < 100 + 1 {
    #{$p * 1%} {
      background: linear-gradient($white ($p * 1%) , $brown ($p * 1%)); 
    }
    $p: $p + 1;
  }
}