@import url(http://fonts.googleapis.com/css?family=Vast+Shadow|Special+Elite|Open+Sans|Satisfy|Oswald|Lato:300,400,700);

//colors
$color_charade: #252e35;
$color_black_haze: #f6f6f6;
$color_blue_bayoux: #465c7a;
$white: #fff;
$color_atlantis: #7bd541;
$color_pelorous: #35ABB6;
$color_mantis: #7BD541;
$color_corn_flower_blue: #434672;

//fonts
$font-main: "Open Sans";
$font-stack: "Helvetica, Arial, sans-serif";
$font-satisfy: 'Satisfy';
$font-vast-shadow: 'Vast Shadow';
$font-oswald: 'Oswald';
$font_lato: 'Lato';

//urls
$url_text-bg: url("http://tympanus.net/Tutorials/TexturedText/img/watercolor_1.jpg");

//extends
%swing_letters {
  font-size: 3em;
  line-height: 1;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  position: absolute;
  text-fill-color: transparent;
  font-smoothing: antialiased;
  @include transition(left .25s ease);
}

%effect_block {
  display: none;
  line-height: 2em;
  font-size: 2em;
}

/**************************/

body {
  font-size: 87.5%;
  color: $color_charade;
  font-family: $font-main, $font-stack;
  line-height: 1.5em;
  background: $color_black_haze;
}

header {
  background: $color_charade;
}

header h1 {
  text-align: center;
  margin: 7px 0 0;
  color: $color_blue_bayoux;
  font-weight: 300;
}


.divider {
  background: $color_charade;
  height: 2em;
}

.time {
  text-align: center;
  font-size: 3em;
  font-family: $font-satisfy, $font-stack;
  margin-top: .25em;
  color: $color_blue_bayoux;
}

.clipped {
  background: $url_text-bg no-repeat center center;
  background-size: cover;
  color: $white;
  text-fill-color: transparent;
  @include background-clip(text);
  background-clip: text !important;
  text-align: center;
  #clock {
    font-family: $font-vast-shadow;
    text-align: center;
    font-size: 8em;
    line-height: 1em;
  }
}

//this is weird
#clock {
  > span {
    white-space: nowrap;
  }
  span span {
    font-family: $font-oswald;
    font-size: 25px;
    @include background-clip(border-box);
    color: $color_blue_bayoux;
    font-weight: 400;
  }
}

ul {
  list-style-type: none;
  margin-before: 0;
}

.button {
  background: $color_charade;
  color: $color_blue_bayoux;
  height: 2.5em;
  width: 100%;
  line-height: 1;
  font-size: 140%;
  overflow: hidden;
  @include backface-visibility(hidden);
  &:first-child {
    margin-top: 1em;
  }
  &:active {
    background: $color_charade;
    top: 2px;
    &::before {
      color: $color_blue_bayoux;
    }
  }
  span {
    display: inline-block;
    width: 100%;
    @include transition(all 0.3s);
    @include backface-visibility(hidden);
    @include box-sizing(border-box);
  }
  &::before {
    position: absolute;
    height: 100%;
    width: 100%;
    line-height: 1;
    font-size: 170%;
    @include transition(all 0.3s);
  }
  &::after {
    content: '';
    position: absolute;
    z-index: -1;
    @include transition(all 0.3s);
  }
}

.button-horizontal {
  &::before {
    left: -100%;
    top: 0;
    content: '✬';
    @include box-sizing(border-box);
  }
  &:hover span {
    @include transform(translateX(200%));
    &::before {
      left: 0;
      top: .2em;
    }
  }
}
#character_block {
  @extend %effect_block;
}

#oscilating_block {
  @extend %effect_block;
  position: relative;
  margin: 0 auto;
  text-align: center;
  zoom: 2;
  font-family: $font_lato;

}

.no_move {
  @extend %swing_letters;
  text-stroke: .75px $color_pelorous;
  right: auto;
  left: auto;
  font-weight: 700;
}

.move_right {
  @extend %swing_letters;
  text-stroke: .75px $color_mantis;
  font-weight: 400;
}

.move_left {
  @extend %swing_letters;
  text-stroke: .75px $color_corn_flower_blue;
  font-weight: 300;
}

#colorful_heading {
  font-size: 5em;
  text-align: center;
  font-family: $font-lato;
}



$width: 50px;
$height: $width;

#moving_dot {
  @include border-radius(50%);
  width: $width;
  height: $height;
  background: $color_atlantis;
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  @include transition(all 1s);
}