body {
  font-size: 2em;
  background: #222;
}

h1 {
  text-align: center;
  font-family: 'Slackey', cursive;
  font-size: 1em;
  color: white;
  @include text-shadow(0.05em 0.05em orange);
}

.pumpkin {
  position: relative;
  width: 9.25em;
  margin: 2em auto 0;
  &:before {
    content: "";
    z-index: -1;
    position: absolute;
    top: -1em;
    left: 4em;
    @include border-radius(0.25em);
    background-color: shade(brown, 50);
    width: 1em;
    height: 2em;
    @include transform(rotate(15deg));
  }
}

.gourd {
  margin-left: 4em;
  span {
    @include border-radius(50%);
    display: inline-block;
    background: shade(orange, 40);
    width: 5em;
    height: 5em;
    margin-left: -4em;
    &.gp1 {
      border-left: 0.0625em solid black;
    }
    &.gp4 {
      border-right: 0.0625em solid black;
    }
  }
}

.face {
  text-align: center;
  width: 6em;
  height: 4em;
  position: absolute;
  top: 0.5em;
  left: 1.5em;
  span {
    display: block;
    background: black;
    border-bottom: 0.125em solid darken(orange, 30);
    @include animation(pulsate 2s ease-in infinite);
    &.eye {
      display: inline-block;
      @include border-radius(50%);
      width: 1.5em;
      height: 1.5em;
      &.right{
        margin-left: 1em;
      }
    }
    &.mouth {
      margin: 0.25em auto 0;
      width: 75%;
      height: 1.5em;
      @include border-radius(0.75em 0.75em 0 0);
      @include animation(smile 2s ease-in infinite, pulsate 2s ease-in infinite);
    }
  }
}

@include keyframes(pulsate){
  0%,100% {
    background: darken(yellow, 50);
    @include box-shadow(0 0 0 0  rgba(goldenrod, 0.75));
  }
  50% {
    background: yellow;
    @include box-shadow(0 0 3em 1em rgba(goldenrod, 0.75));
  }
}

@include keyframes(smile){
  0%,100% {
    @include border-radius(0.75em 0.75em 0 0);
  }
  50% {
    @include border-radius(0 0 0.75em 0.75em);
  }
}