<div class="pumpkin">
  <div class="front left"></div>
  <div class="front right"></div>
  <div class="top-dent-back left"></div>
  <div class="top-dent-back right"></div>
  <div class="top-dent-front left"></div>
  <div class="top-dent-front right"></div>
  <div class="stalk"></div>
  <div class="stalk-shadow"></div>
  <div class="eye left"></div>
  <div class="eye right"></div>
  <div class="nose"></div>
  <div class="mouth"></div>
  <div class="bottom-shadow"></div>
  <div class="candle eye left"></div>
  <div class="candle eye right"></div>
  <div class="candle nose"></div>
  <div class="candle mouth"></div>
</div>
<p>Happy Halloween!</p>

@import 'compass';

$p-height: 200px;
$p-width: 240px;

body {
  background: #111111;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  height: $p-height * 1.2;
  width: 100%;
  margin: auto;
}

:before, :after {
  content: "";
  position: absolute;
  height: 0;
  width: 0;
}

$pumpkin-thickness: 8px;

.pumpkin {
  position: relative;
  left: calc(50% - (#{$p-width} / 2));
  height: $p-height;
  width: $p-width;
  background: #E37100;
  @include border-radius(45% 45% 40% 40% / 43% 43% 50% 50%);
  @include box-shadow(inset 0 -20px 20px 0px rgba(0,0,0,0.4));
  
  * {
    position: absolute;
  }
  
  .front {
    height: 94%;
    width: 50%;
    bottom: 0;
    z-index: 2;
    
    &:before {
      top: 5%;
      height: 94%;
      width: 85%;
      @include border-radius(inherit);
    }
    
    &:after {
      top: 12%;
      height: 85%;
      width: 40%;
      @include border-radius(inherit);
    }

    &.left {
      @include box-shadow(inset 5px 5px 10px -5px rgba(0,0,0,0.3));
      @include border-radius(65% 35% 10% 85% / 45% 20% 10% 60%);
      left: 0;
      
      &:before {
        left: 20%;
        @include box-shadow( -7px 0 5px -5px rgba(0,0,0,0.3));
      }
      
      &:after {
        left: 60%;
        @include box-shadow( -7px 0 5px -5px rgba(0,0,0,0.3));
      }
    }

    &.right {
      @include box-shadow(inset -5px 5px 10px -5px rgba(0,0,0,0.3));
      @include border-radius(35% 65% 85% 10% / 20% 45% 60% 10%);
      right: 0;
      
      &:before {
        right: 20%;
        @include box-shadow( 7px 0 5px -5px rgba(0,0,0,0.3));
      }
      
      &:after {
        right: 60%;
        @include box-shadow( 7px 0 5px -5px rgba(0,0,0,0.3));
      }
    }
  }
  
  .top-dent-back,
  .top-dent-front {
    height: 30px;
    width: 20px;
    @include border-radius(50%);
  }
    
  $dent-rotate-back: 110deg;
  $dent-rotate-front: 90deg;
  
  .top-dent-back {
    top: 3px;
    
    &.left {
      left: 80px;
      @include transform(rotate($dent-rotate-back));
      @include box-shadow( -7px 0 5px -5px rgba(0,0,0,0.3));
    }
    
    &.right {
      right: 80px;
      @include transform(rotate(-$dent-rotate-back));
      @include box-shadow( 7px 0 5px -5px rgba(0,0,0,0.3));
    }
  }
  
  .top-dent-front {
    top: 18px;
    
    &.left {
      left: 90px;
      @include transform(rotate($dent-rotate-front));
      @include box-shadow( -7px 0 5px -5px rgba(0,0,0,0.2));
    }
    
    &.right {
      right: 90px;
      @include transform(rotate(-$dent-rotate-front));
      @include box-shadow( 7px 0 5px -5px rgba(0,0,0,0.2));
    }
  }
  
  .stalk {
    top: -5px;
    left: calc(50% - 15px);
    height: 30px;
    width: 30px;
    z-index: 1;
    background: #35260F;
    @include border-radius(10% 10% 50% 50% / 90% 90% 20% 20%);
    @include transform(rotate(5deg));
  }
  
  .stalk-shadow {
    top: -10px;
    left: calc(50% - 60px);
    height: 50px;
    width: 120px;
    @include filter-gradient(#000000, #000000, horizontal);
    @include background-image(radial-gradient(center, ellipse cover,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%));
    opacity: 0.4;
  }
  
  .eye {
    top: 65px;
    height: 35px;
    width: 70px;
    background: #5A2504;
    z-index: 4;
    
    $eye-position: 38px;
    $eye-rotate: 25deg;
    
    &:before {
      height: 100%;
      width: 87%;
      @include border-radius(inherit);
      z-index: 3;
    }
    
    &.left {
      left: $eye-position;
      @include transform(rotate($eye-rotate));
      @include border-radius(10% 10% 40% 60% / 0% 30% 50% 95%);
      
      &:before {
        left: $pumpkin-thickness;
        @include box-shadow(-$pumpkin-thickness 0 0 0 #AD4B07);
        border-right: 1px solid darken(#AD4B07, 10%);
      }
    }
    
    &.right {
      right: $eye-position;
      @include transform(rotate(-$eye-rotate));
      @include border-radius(10% 10% 60% 40% / 30% 0% 95% 50%);
      
      &:before {
        right: $pumpkin-thickness;
        @include box-shadow($pumpkin-thickness 0 0 0 #AD4B07);
        border-right: 1px solid darken(#AD4B07, 10%);
      }
    }
  }
  
  .nose {
    top: 105px;
    left: calc(50% - 13px);
    height: 26px;
    width: 26px;
    background: #AD4B07;
    z-index: 4;
    -webkit-clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
    clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
    overflow: hidden;
    
    &:before {
      left: 15%;
      top: 15%;
      height: 70%;
      width: 70%;
      background: #5A2504;
      -webkit-clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
      clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
    }
  }
  
  .mouth {
    top: 65px;
    left: calc(50% - 80px);
    height: 110px;
    width: 160px;
    z-index: 3;
    background: #5A2504;
    -webkit-clip-path: polygon(
      0% 58%, 7% 65%, 19% 70%, 22% 71%, /**/28% 82%/**/, 33% 74%, 38% 74%, 50% 75%, 62% 74%, 67% 74%, /**/72% 82%/**/, 78% 71%, 81% 70%, 93% 65%,
      100% 58%, 94% 75%, 86% 89%, 79% 94%, 70% 98%, 60% 100%, 56% 100%, /**/50% 88%/**/, 44% 100%, 40% 100%, 30% 98%, 21% 95%, 14% 89%, 6% 75%);
    clip-path: polygon(
      0% 58%, 7% 65%, 19% 70%, 22% 71%, /**/28% 82%/**/, 33% 74%, 38% 74%, 50% 75%, 62% 74%, 67% 74%, /**/72% 82%/**/, 78% 71%, 81% 70%, 93% 65%,
      100% 58%, 94% 75%, 86% 89%, 79% 94%, 70% 98%, 60% 100%, 56% 100%, /**/50% 88%/**/, 44% 100%, 40% 100%, 30% 98%, 21% 95%, 14% 89%, 6% 75%);
    overflow: hidden;
    
    &:before {
      left: $pumpkin-thickness;
      height: 100%;
      width: calc(100% - (#{$pumpkin-thickness} * 2));
      background: #5A2504;
      top: -$pumpkin-thickness;
      -webkit-clip-path: polygon(
        0% 58%, 7% 65%, 19% 70%, 22% 71%, /**/26% 89%/**/, 30% 87%, 38% 74%, 50% 75%, 62% 74%, 70% 87%, /**/74% 89%/**/, 78% 71%, 81% 70%, 93% 65%,
        100% 58%, 94% 75%, 86% 89%, 79% 94%, 70% 98%, 60% 100%, 56% 100%, /**/50% 90%/**/, 44% 100%, 40% 100%, 30% 98%, 21% 95%, 14% 89%, 6% 75%);
      clip-path: polygon(
        0% 58%, 7% 65%, 19% 70%, 22% 71%, /**/28% 82%/**/, 33% 74%, 38% 74%, 50% 75%, 62% 74%, 65% 82%, /**/74% 90%/**/, 78% 71%, 81% 70%, 93% 65%,
        100% 58%, 94% 75%, 86% 89%, 79% 94%, 70% 98%, 60% 100%, 56% 100%, /**/50% 90%/**/, 44% 100%, 40% 100%, 30% 98%, 21% 95%, 14% 89%, 6% 75%);
      z-index: 2;
    }
    
    &:after {
      left: 0;
      height: 100%;
      width: 100%;
      background: #AD4B07;
      z-index: 1;
    }
  }
  
  .bottom-shadow {
    bottom: -195px;
    left: calc(50% - 250px);
    width: 500px;
    height: 400px;
    background: radial-gradient(circle at 50% 50%, rgba(0,0,0, 0.8), rgba(0,0,0, 0.2) 25%, rgba(0,0,0, 0) 35%);
    z-index: -1;
    @include transform(scaleY(0.2));
  }
  
  .candle {
    background: rgba(yellow, 0.5);
    z-index: 15;
    @include box-shadow( 0 0 50px 2px rgba(yellow, 0.8));
    
    &:before, &:after {
      display: none;
    }
    
    &.nose, &.mouth {
      @include box-shadow(none);
    }
  }
}

p {
  font-family: 'eater', 'cursive';
  font-size: 40px;
  width: 100%;
  text-align: center;
  margin-top: 15px;
  color: #AC0805;
}

/* Animation */

@keyframes candle {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

.candle {
  @include animation(candle linear 3s infinite);
}