Cacher is the code snippet organizer for pro developers

@import url(http://fonts.googleapis.com/css?family=Creepster);
body{
  background:#333;
  margin:0;
  paddding:0;
}
h1{
  font-family:'Creepster', cursive;
  font-size:5em;
  text-align:center;
  color:#e74c3c;
  text-shadow:0 2px 2px #C0392B, 0 4px 2px #2C0905;
  animation: letter 3s infinite linear;
}
.box{
  position:relative;
  width:416px;
  height:320px;
  margin:5% auto;
  text-align:cemter;
}
.pumpkin{
  position:relative;
  width:400px;
  height:300px;
  background:#C04D00;
  background: linear-gradient(#FFA500,#C04D00);
  /*border-radius*/
  -webkit-border-radius:100%;
  -moz-border-radius:100%;
  border-radius:100%;
  border:5px solid #C04D00;
  overflow:hidden;
  /*box-shadow*/
  -webkit-box-shadow:0 2px 7px #222;
  -moz-box-shadow:0 2px 7px #222;
  box-shadow:0 2px 7px #222;
}
.pump-b-1,.pump-b-2,
.pump-b-3,.pump-b-4{
  position:absolute;
  width:395px;
  height:295px;
  border: 2px solid #C04D00;
  /*border-radius*/
  -webkit-border-radius:100%;
  -moz-border-radius:100%;
  border-radius:100%;
}
.pump-b-1{
  /*transform*/
  -webkit-transform:rotateY(40deg);
  -moz-transform:rotateY(40deg);
  -ms-transform:rotateY(40deg);
  -o-transform:rotateY(40deg);
  transform:rotateY(40deg);
}
.pump-b-2{
  /*transform*/
  -webkit-transform:rotateY(200deg);
  -moz-transform:rotateY(200deg);
  -ms-transform:rotateY(200deg);
  -o-transform:rotateY(200deg);
  transform:rotateY(200deg);
}
.pump-b-3{
  /*transform*/
  -webkit-transform:rotateY(240deg);
  -moz-transform:rotateY(240deg);
  -ms-transform:rotateY(240deg);
  -o-transform:rotateY(240deg);
  transform:rotateY(240deg);
}
.pump-b-4{
  /*transform*/
  -webkit-transform:rotateY(260deg);
  -moz-transform:rotateY(260deg);
  -ms-transform:rotateY(260deg);
  -o-transform:rotateY(260deg);
  transform:rotateY(260deg);
}
.branch .stick{
  position:absolute;
  width:5px;
  height:33px;
  background:#32645A;
  top:-2.8em;
  left:12em;
  display:block;
  padding:0.5em;
  z-index:1000;
  /*border-radius*/
  -webkit-border-radius:0.4em 0.4em 0 0;
  -moz-border-radius:0.4em 0.4em 0 0;
  border-radius:0.4em 0.4em 0 0;
}
.branch .round{
  position:absolute;
  width:50px;
  height:40px;
  background:#2A8170;
  top:-1em;
  left:10.6em;
  display:block;
  padding:0.5em;
  z-index:999;
  /*border-radius*/
  -webkit-border-radius:100%;
  -moz-border-radius:100%;
  border-radius:100%;
  /*transform*/
  -webkit-transform:rotateX(51deg);
  -moz-transform:rotateX(51deg);
  -ms-transform:rotateX(51deg);
  -o-transform:rotateX(51deg);
  transform:rotateX(51deg);
  /*box-shadow*/
  -webkit-box-shadow:0 2px 12px #752E0D;
  -moz-box-shadow:0 2px 12px #752E0D;
  box-shadow:0 2px 12px #752E0D;
}
.eyes .eye-left{
  position:absolute;
  width:70px;
  height:50px;
  background:#34495E;
  /*border-radius*/
  -webkit-border-radius:100%;
  -moz-border-radius:100%;
  border-radius:100%;
  left:3em;
  top:3em;
  z-index:1000;
  color:#ecf0f1;
  text-align:center;
  line-height:45px;
  font-size:2em;
  text-shadow:0 1px 19px #000;
  /*box-shadow*/
  -webkit-box-shadow:inset 0 0 24px 8px #3C2605;
  -moz-box-shadow:inset 0 0 24px 8px #3C2605;
  box-shadow:inset 0 0 24px 8px #3C2605;
  /*animation*/
  -webkit-animation:ojo 5s infinite linear;
  -moz-animation:ojo 5s infinite linear;
  -ms-animation:ojo 5s infinite linear;
  -o-animation:ojo 5s infinite linear;
  animation:ojo 5s infinite linear;
}
.eyes .eye-right{
  position:absolute;
  width:70px;
  height:50px;
  background:#34495e;
  /*border-radius*/
  -webkit-border-radius:100%;
  -moz-border-radius:100%;
  border-radius:100%;
  left:8em;
  top:3em;
  z-index:1000;
  color:#ecf0f1;
  text-align:center;
  line-height:45px;
  font-size:2em;
  text-shadow:0 1px 19px black;
  /*box-shadow*/
  -webkit-box-shadow:inset 0 0 24px 8px #3C2605;
  -moz-box-shadow:inset 0 0 24px 8px #3C2605;
  box-shadow:inset 0 0 24px 8px #3C2605;
  /*animation*/
  -webkit-animation:ojo 5s infinite linear;
  -moz-animation:ojo 5s infinite linear;
  -ms-animation:ojo 5s infinite linear;
  -o-animation:ojo 5s infinite linear;
  animation:ojo 5s infinite linear;
}
.mouth{
  position:absolute;
  top:12em;
  left:7.5em;
  z-index:1000;
  width:182px;
  height:57px;
  background:#2c3e50;
  /*border-radius*/
  -webkit-border-radius:100%;
  -moz-border-radius:100%;
  border-radius:100%;
  overflow:hidden;
  /*box-shadow*/
  -webkit-box-shadow:inset 0 0 24px 8px rgb(39, 39, 39);
  -moz-box-shadow:inset 0 0 24px 8px rgb(39, 39, 39);
  box-shadow:inset 0 0 24px 8px rgb(39, 39, 39);
  /*animation*/
  -webkit-animation:boca 2s infinite ease;
  -moz-animation:boca 2s infinite ease;
  -ms-animation:boca 2s infinite ease;
  -o-animation:boca 2s infinite ease;
  animation:boca 2s infinite ease;
}
.mouth .teeth-1{
  position:absolute;
  top:0;
  left:3em;
  z-index:2000;
  width:30px;
  height:30px;
  background:#ecf0f1;
  /*box-shadow*/
  -webkit-box-shadow:0 0 4px 2px #222;
  -moz-box-shadow:0 0 4px 2px #222;
  box-shadow:0 0 4px 2px #222;
}
.mouth .teeth-2{
  position:absolute;
  top:2em;
  left:7em;
  z-index:2000;
  width:30px;
  height:33px;
  background:#ecf0f1;
  /*box-shadow*/
  -webkit-box-shadow:0 0 4px 2px #222;
  -moz-box-shadow:0 0 4px 2px #222;
  box-shadow:0 0 4px 2px #222;
}
@keyframes boca{ 50%{height:0;top:13em;}}
@-webkit-keyframes boca{ 50%{height:0;top:13em;}}
@-moz-keyframes boca{ 50%{height:0;top:13em;}}
@-o-keyframes boca{ 50%{height:0;top:13em;}}
@-ms-keyframes boca{ 50%{height:0;top:13em;}}

@keyframes ojo{ 50%{color:red;}}
@-webkit-keyframes ojo{ 50%{color:red;}}
@-moz-keyframes ojo{ 50%{color:red;}}
@-o-keyframes ojo{ 50%{color:red;}}
@-ms-keyframes ojo{ 50%{color:red;}}

@keyframes letter{ 
  50%{text-shadow: 0 2px 3px aqua,0 2px 3px aquamarine;}}
@-webkit-keyframes letter{ 
  50%{text-shadow: 0 2px 3px aqua,0 2px 3px aquamarine;}}
@-moz-keyframes letter{ 
  50%{text-shadow: 0 2px 3px aqua,0 2px 3px aquamarine;}}
@-o-keyframes letter{ 
  50%{text-shadow: 0 2px 3px aqua,0 2px 3px aquamarine;}}
@-ms-keyframes letter{ 
  50%{text-shadow: 0 2px 3px aqua,0 2px 3px aquamarine;}}

<h1>Happy Halloween</h1>
<div class="box">
  <div class="eyes">
    <div class="eye-left">o</div>
    <div class="eye-right">o</div>
  </div>
  <div class="branch">
    <div class="stick"></div>
    <div class="round"></div>
  </div>
  <div class="pumpkin">
    <div class="pump-b-1"></div>
    <div class="pump-b-2"></div>
    <div class="pump-b-3"></div>
    <div class="pump-b-4"></div>
  </div>
  <div class="mouth">
    <div class="teeth-1"></div>
    <div class="teeth-2"></div>
  </div>
</div>