@import url(http://fonts.lug.ustc.edu.cn/css?family=Play);

@mixin centerer {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

@mixin cf {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

@mixin shadow($h, $v, $b, $s, $c) {
  -webkit-box-shadow: $h $v $b $s $c;
  -moz-box-shadow:    $h $v $b $s $c;
   box-shadow:        $h $v $b $s $c;

}

//some mountain variables
$mountain_width:  1em;
$mountain_height: 1em;

body {
  background: #c1f6f3;
}

.container {
  @include centerer;
  min-width: 270px;
}

.mountain-range {
  @include cf;
  position: relative;
}

.mountain {
  width: $mountain_width;
  height: $mountain_height;
  float: left;
  border-left: .25em solid #666;
  border-top: .25em solid #fff;
  background: #c1f6f3;
  transform: rotate(45deg);
  &:nth-child(1) { position: relative; z-index: 25; margin-right: -2em; margin-top: -1em; }
  &:nth-child(2) { position: relative; z-index: 50; }
  &:nth-child(3) { position: relative; z-index: 75; }
}

.eight-k   { width: $mountain_width*8; height: $mountain_height*8; }
.six-k     { width: $mountain_width*6; height: $mountain_height*6; }
.four-k    { width: $mountain_width*4; height: $mountain_height*4; }

.sun {
  width: 3em;
  height: 3em;
  background: orange;
  border-radius: 3em 3em 3em 3em;
  position: absolute;
  top: -1.3em;
  right: 4.5em;
  @include shadow(0, 0, 1em, 1em, rgba(255, 253, 184, .6))
}