/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
i {
  top: 25%;
  box-shadow: inset -2px -4px 4px rgba(0,100,200,.2);
}
#snowman {
  font-size: 9px !important;
  width: 100px;
  height: 200px;
  right: 0;
  top: 5px;
  margin: 20px;
  position: fixed;
  z-index:10000;
}

#snowman #headcontainer {
  width: 100%;
  position: absolute;
  -webkit-animation: bouncehead 1s infinite;
}

#snowman #eyebrow {
  width: 25px;
  height: 20px;
  background-color: #000;
  position: absolute;
  left: 37%;
  margin-top: -17px;
  border-radius: 20px 20px 20px 25px/15px 15px 25px 25px;
  box-shadow: inset -2px -4px 4px rgba(0, 100, 200, 0);
}

#snowman #eyebrow2 {
  width: 25px;
  height: 20px;
  background-color: #fff;
  position: absolute;
  left: 37%;
  margin-top: -13.8px;
  border-radius: 20px 20px 20px 25px/15px 15px 25px 25px;
  box-shadow: inset -2px -4px 4px rgba(0, 100, 200, 0);
}

#snowman #eyebrow3 {
  width: 5px;
  height: 10px;
  background-color: #fff;
  position: absolute;
  left: 50%;
  margin-left: -2.5px;
  margin-top: -18.8px;
  box-shadow: inset -2px -4px 4px rgba(0, 100, 200, 0);
}

#snowman #tooth {
  width: 2.5em;
  height: 1.5em;
  background-color: #fff;
  position: absolute;
  left: 50%;
  margin-left: -1.3em;
  margin-top: 10px;
  border-radius: 25px 25px 15px 15px;
  box-shadow: inset 1px 5px 5px rgba(0, 100, 200, 0.6);
}

#snowman #nose {
  width: 1.2em;
  height: 1.5em;
  background-color: #F59B00;
  position: absolute;
  transform: rotate(310deg);
  -webkit-transform: rotate(310deg);
  left: 50%;
  margin-left: -.6em;
  margin-top: 2px;
  border-radius: 41px 41px 45px 45px/50px 50px 40px 20px;
  box-shadow: inset 1px 5px 5px rgba(160, 82, 45, 0.7);
}

#snowman #mouth {
  width: 30px;
  height: 36px;
  background-color: #fff;
  position: absolute;
  left: 34%;
  margin-top: 7px;
  border-radius: 11px 21px 15px 25px/10px 10px 20px 20px;
  box-shadow: 0px 1px 1px 1px rgba(0, 100, 200, 0.2);
}

#snowman #mouth2 {
  width: 30px;
  height: 35px;
  background-color: #000;
  position: absolute;
  left: 34%;
  margin-top: 5px;
  border-radius: 11px 21px 15px 25px/10px 10px 20px 20px;
  box-shadow: 0px 1px 1px 1px rgba(0, 100, 200, 0.2);
}

#eye {
  width: 1.4em;
  height: 1.7em;
  background-color: #fff;
  position: absolute;
  border-radius: 50px;
  left: 37%;
  margin-top: -9px;
  box-shadow: 1px 0px 1px 1px rgba(0, 100, 200, 0.2);
}

#eye2 {
  width: .85em;
  height: .85em;
  background-color: #000;
  position: absolute;
  left: 39%;
  margin-top: -4px;
  border-radius: 50px;
  box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.9);
}

#eye3 {
  width: 1.4em;
  height: 1.7em;
  background-color: #fff;
  position: absolute;
  left: 50%;
  margin-top: -9px;
  border-radius: 50px;
  box-shadow: 0px 1px 1px 1px rgba(0, 100, 200, 0.2);
}

#eye4 {
  width: .85em;
  height: .85em;
  background-color: #000;
  position: absolute;
  left: 52%;
  margin-top: -2px;
  border-radius: 50px;
  box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.9);
}

#head2 {
  width: 4em;
  height: 4em;
  background-color: #fff;
  position: absolute;
  left: 50%;
  margin-left: -2em;
  margin-top: -20px;
  border-radius: 25px 25px 45px 15px/50px 50px 10px 10px;
  box-shadow: inset 1px 3px 3px rgba(0, 100, 200, 0.1);
}

#head {
  width: 5em;
  height: 5em;
  background-color: #fff;
  position: absolute;
  left: 50%;
  margin-left: -2.5em;
  border-radius: 15px 15px 35px 35px/30px 30px 50px 50px;
  box-shadow: inset -2px -4px 4px rgba(0, 100, 200, 0.2);
}

#ball {
  width: 50px;
  height: 48px;
  background-color: #fff;
  position: absolute;
  left: 50%;
  margin-left: -25px;
  border-radius: 45%;
  -webkit-animation: bounce 1s infinite;
}

#ball2 {
  width: 34px;
  height: 30px;
  background-color: #fff;
  position: absolute;
  border-radius: 50%;
  left: 50%;
  margin-left: -17px;
  -webkit-animation: bounce2 1s infinite;
  border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
  -webkit-border-radius: 63px 63px 63px 63px/ 108px 108px 72px 72px;
}

#shadow {
  width: 56px;
  height: 20px;
  background-color: #000;
  opacity: .5;
  position: absolute;
  -webkit-animation: shrink 1s infinite;
  border-radius: 50%;
  margin-top: 15.6em;
  left: 50%;
  margin-left: -28px;
}

#lfoot {
  position: absolute;
  width: 18px;
  height: 18px;
  background-color: #fff;
  border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
  -webkit-border-radius: 63px 63px 63px 63px/ 108px 108px 72px 72px;
  -webkit-animation: bouncefeet 1s infinite;
  left: 26%;
}

#rfoot {
  position: absolute;
  width: 18px;
  height: 18px;
  background-color: #fff;
  border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
  -webkit-border-radius: 63px 63px 63px 63px/ 108px 108px 72px 72px;
  -webkit-animation: bouncefeet 1s infinite;
  left: 56%;
}

#button {
  width: 1em;
  height: 1em;
  background-color: #000;
  border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
  -webkit-border-radius: 63px 63px 63px 63px/ 108px 108px 72px 72px;
  position: absolute;
  margin-left: 2.2em;
  margin-top: 2em;
  box-shadow: inset 1px 2px 1px rgba(255, 255, 255, 0.3);
}

#button2 {
  width: 1em;
  height: 1em;
  background-color: #000;
  border-radius: 40% 50% 50% 30%/60% 50% 40% 20%;
  -webkit-border-radius: 63px 63px 63px 63px/ 108px 108px 72px 72px;
  position: absolute;
  margin-left: 2.2em;
  margin-top: .5em;
  box-shadow: inset 1px 2px 1px rgba(255, 255, 255, 0.6);
}

#button3 {
  width: 1em;
  height: 1em;
  background-color: #000;
  border-radius: 40% 50% 50% 30%/60% 50% 40% 20%;
  -webkit-border-radius: 63px 63px 63px 63px/ 108px 108px 72px 72px;
  position: absolute;
  margin-top: .5em;
  margin-left: 1.43em;
  z-index: 2;
  box-shadow: inset 1px 2px 1px rgba(255, 255, 255, 0.9);
}

#leftarm {
  width: 100%;
  position: absolute;
  -webkit-animation: leftarm 1s infinite;
}

#larm {
  width: 3px;
  position: absolute;
  height: 26px;
  background: #290f00;
  border-radius: 40% 40% 50% 30%/20% 50% 40% 40%;
  transform: rotate(310deg);
  -webkit-transform: rotate(310deg);
  left: 26%;
  margin-top: 43px;
}

#larm2 {
  width: 2px;
  position: absolute;
  height: 26px;
  background: #290f00;
  border-radius: 50% 50% 50% 30%/50% 50% 40% 40%;
  transform: rotate(325deg);
  -webkit-transform: rotate(325deg);
  left: 13%;
  margin-top: 29px;
}

#lfinger {
  width: 2px;
  position: absolute;
  height: 10px;
  background: #290f00;
  border-radius: 50% 50% 50% 30%/50% 50% 40% 40%;
  transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  left: 12%;
  margin-top: 30px;
}

#lfinger2 {
  width: 2px;
  position: absolute;
  height: 10px;
  background: #290f00;
  border-radius: 50% 50% 50% 30%/50% 50% 40% 40%;
  transform: rotate(300deg);
  -webkit-transform: rotate(300deg);
  left: 6%;
  margin-top: 32px;
}

#lfinger3 {
  width: 2px;
  position: absolute;
  height: 7px;
  background: #290f00;
  border-radius: 50% 50% 50% 30%/50% 50% 40% 40%;
  transform: rotate(35deg);
  -webkit-transform: rotate(35deg);
  left: 15%;
  margin-top: 35px;
}

#rightarm {
  width: 100%;
  position: absolute;
  -webkit-animation: rightarm 1s infinite;
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: scaleX(-1);
  filter: FlipH;
  -webkit-transform: scaleX(-1);
}

#rarm {
  width: 3px;
  position: absolute;
  height: 26px;
  background: #290f00;
  border-radius: 40% 40% 50% 30%/20% 50% 40% 40%;
  transform: rotate(310deg);
  -webkit-transform: rotate(310deg);
  left: 26%;
  margin-top: 43px;
}

#rarm2 {
  width: 2px;
  position: absolute;
  height: 26px;
  background: #290f00;
  border-radius: 50% 50% 50% 30%/50% 50% 40% 40%;
  transform: rotate(325deg);
  -webkit-transform: rotate(325deg);
  left: 13%;
  margin-top: 29px;
}

#rfinger {
  width: 2px;
  position: absolute;
  height: 10px;
  background: #290f00;
  border-radius: 50% 50% 50% 30%/50% 50% 40% 40%;
  transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  left: 12%;
  margin-top: 30px;
}

#rfinger2 {
  width: 2px;
  position: absolute;
  height: 10px;
  background: #290f00;
  border-radius: 50% 50% 50% 30%/50% 50% 40% 40%;
  transform: rotate(300deg);
  -webkit-transform: rotate(300deg);
  left: 6%;
  margin-top: 32px;
}

#rfinger3 {
  width: 2px;
  position: absolute;
  height: 7px;
  background: #290f00;
  border-radius: 50% 50% 50% 30%/50% 50% 40% 40%;
  transform: rotate(35deg);
  -webkit-transform: rotate(35deg);
  left: 15%;
  margin-top: 35px;
}

#hair {
  width: 100%;
  position: absolute;
  -webkit-animation: hair 1s infinite;
}

#hair1 {
  width: 1px;
  position: absolute;
  height: 15px;
  background: #290f00;
  left: 46%;
  margin-top: -34px;
}

#hair2 {
  width: 10px;
  height: 15px;
  position: absolute;
  border-radius: 50%;
  background: rgba(41, 15, 0, 0);
  left: 35%;
  margin-top: -35px;
  transform: rotate(300deg) scaleX(-1);
  -webkit-transform: rotate(300deg) scaleX(-1);
  box-shadow: inset 1px 0.5px 0px 0px black;
  filter: FlipH;
}

#hair3 {
  width: 1px;
  position: absolute;
  height: 6px;
  background: #290f00;
  left: 53%;
  margin-top: -33px;
}

#hair4 {
  width: 20px;
  height: 30px;
  position: absolute;
  border-radius: 50%;
  background: rgba(41, 15, 0, 0);
  left: 56%;
  margin-top: -42px;
  transform: rotate(50deg);
  -webkit-transform: rotate(50deg);
  box-shadow: inset 1px 0.5px 0px 0px black;
}

#hair5 {
  width: 10px;
  height: 40px;
  position: absolute;
  border-radius: 50%;
  background: rgba(41, 15, 0, 0);
  left: 40%;
  margin-top: -57px;
  transform: rotate(170deg);
  -webkit-transform: rotate(170deg);
  box-shadow: inset 1px 0.5px 0px 0px black;
  filter: FlipH;
}

@-webkit-keyframes leftarm {
  0% {
    margin-top: 3em;
    animation-timing-function: ease-in;
    -webkit-transform: rotate(0deg);
  }
  50% {
    margin-top: 8em;
    animation-timing-function: ease-out;
    -webkit-transform: rotate(0deg);
  }
  100% {
    margin-top: 3em;
    animation-timing-function: ease-out;
  }
}
@-webkit-keyframes rightarm {
  0% {
    margin-top: 3em;
    animation-timing-function: ease-in;
  }
  50% {
    margin-top: 8em;
    animation-timing-function: ease-out;
  }
  100% {
    margin-top: 3em;
    animation-timing-function: ease-out;
  }
}
@-webkit-keyframes hair {
  0% {
    margin-top: 4em;
    animation-timing-function: ease-in;
  }
  50% {
    margin-top: 9.5em;
    animation-timing-function: ease-out;
  }
  100% {
    margin-top: 4em;
    animation-timing-function: ease-out;
  }
}
@-webkit-keyframes bouncehead2 {
  0% {
    margin-top: 4em;
    animation-timing-function: ease-in;
  }
  50% {
    margin-top: 9.5em;
    animation-timing-function: ease-out;
  }
  100% {
    margin-top: 4em;
    animation-timing-function: ease-out;
  }
}
@-webkit-keyframes bouncehead {
  0% {
    margin-top: 4em;
    animation-timing-function: ease-in;
  }
  51.5% {
    margin-top: 9.5em;
    animation-timing-function: ease-in;
  }
  50% {
    margin-top: 9.5em;
    animation-timing-function: ease-out;
  }
  100% {
    margin-top: 4em;
    animation-timing-function: ease-out;
  }
}
@-webkit-keyframes bounce2 {
  0% {
    margin-top: 3em;
    animation-timing-function: ease-in;
  }
  50% {
    margin-top: 8.2em;
    animation-timing-function: ease-out;
  }
  100% {
    margin-top: 3em;
    animation-timing-function: ease-out;
  }
}
@-webkit-keyframes bounce {
  0% {
    margin-top: 5em;
    animation-timing-function: ease-in;
  }
  50% {
    margin-top: 10em;
    animation-timing-function: ease-out;
  }
  100% {
    margin-top: 5em;
    animation-timing-function: ease-out;
  }
}
@-webkit-keyframes bouncefeet {
  0% {
    margin-top: 9.5em;
    animation-timing-function: ease-in;
  }
  50% {
    margin-top: 14em;
    animation-timing-function: ease-out;
  }
  100% {
    margin-top: 9.5em;
    animation-timing-function: ease-out;
  }
}
@-webkit-keyframes shrink {
  0% {
    width: 3.42222;
    margin-left: calc(50% - 3.42222/1.8);
    opacity: 0.2;
    animation-timing-function: ease-out;
  }
  50% {
    width: 6.16;
    height: 11px;
    opacity: 0.5;
    margin-left: calc(50% - 6.16/2);
    animation-timing-function: ease-in;
  }
  100% {
    width: 3.42222;
    margin-left: calc(50% - 3.42222/1.8);
    opacity: 0.2;
    animation-timing-function: ease-out;
  }
}