<div class="container">
  <h1>Hello.</h1>
</div>  

@import 'https://fonts.googleapis.com/css?family=Baloo+Da';

$peach: #EC644B;
$shadow: darken($peach, 2%);
$white: #FAFAFA;

@function createShadow($color) {
  $val: 0px 0px $color;
  @for $i from 1 through 300 {
    $val: #{$val}, #{$i}px #{$i}px #{$color};
  }
  @return $val;
}

@mixin longShadow($color) {
  text-shadow: createShadow($color);
}

@mixin box-shadow() {
  box-shadow: 0 8px 10px 0 rgba(0,0,0,0.16),0 8px 20px 0 rgba(0,0,0,0.12);
}

@mixin box-shadow-hover() {
  box-shadow: 0 10px 22px 0 rgba(0,0,0,0.18),0 8px 30px 0 rgba(0,0,0,0.15);
}

@mixin transition() {
  transition: all .25s ease-in-out;
}

body {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: $peach;
  color: $white;
  font-family: 'Baloo Da', cursive;
}

.container {
  background: lighten($peach, 2%);
  padding: 20px 40px;
  width: 60%;
  overflow: hidden;
  border-radius: 8px;
  @include box-shadow();
  @include transition();
  
  &:hover {
    background: lighten($peach, 4%);
    @include box-shadow-hover();
    @include transition();
  }
}

h1 {
  margin: 0;
  text-align: center;
  font-weight: 100;
  font-size: 20vw;
  @include longShadow($shadow);
}