html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

* {
    position: relative;
    box-sizing: border-box;
}

body {
    background-color: #b7d3de;
}

*:before,
*:after {
    content: '';
}

.wrapper {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.snowman  {
    position: absolute;
    bottom: 0;
    left: 40%;
    height: 60vmin;
    width: 84vmin;
    animation: snowman 3s infinite;
}

.head {
    position: absolute;
    z-index: 30;
    top: 12%;
    left: 50%;
    transform: translateX(-50%);
    width: 29%;
    height: 38%;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: inset -3px 0px 7px 0 #c5f2ed;
}

.hat {
    position: absolute;
    bottom: 92%;
    left: 19%;
    background-color: #000;
    width: 62%;
    height: 70px;
    border-radius: 4px;
}

.hat:after {
    position: absolute;
    top: 76%;
    width: 140%;
    height: 30%;
    left: -20%;
    right: -20%;
    background-color: #000;
    border-radius: 4px;
}

.hat:before {
    position: absolute;
    top: 63%;
    left: 0;
    width: 100%;
    height: 34%;
    background-color: yellow;
}

.eye {
    position: absolute;
    top: 20%;
    left: 50%;
    display: block;
    width: 6%;
    height: 6%;
    background-color: #000;
    border-radius: 50%;
    animation: eyes 2s infinite;
}

.eye.one {
    transform: translateX(-10px);
}

.eye.two {
    transform: translateX(20px);
}

.nose {
    position: absolute;
    top: 37%;
    left: 54%;
    border-left: 2.5vw solid red;
    border-top: 1vh solid transparent;
    border-bottom: 1vh solid transparent;
    transform: rotate(-3deg);
}

.mouth {
    position: absolute;
    z-index: 10;
    bottom: 23%;
    left: 57%;
    transform: translateX(-50%) rotate(-45deg);
    display: block;
    width: 32%;
    height: 32%;
    border: 0;
    border-bottom: 5px solid #000;
    border-left: 5px solid #000;
    border-bottom-left-radius: 400px;
    backface-visibility: hidden;
}

.body {
    position: absolute;
    z-index: 3;
    bottom: 0%;
    left: 50%;
    transform: translateX(-50%);
    width: 45%;
    height: 65%;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: inset -3px 0px 7px 0 #c5f2ed;
}

.hand {
    position: absolute;
    top: 54%;
    width: 22%;
    height: 2%;
    background-color: brown;
}

.hand.one {
    z-index: 50;
    left: 15%;
    transform: rotate(8deg);
}

.hand.two {
    z-index: -5;
    right: 15%;
    transform: rotate(-8deg);
}

.house {
    position: absolute;
    left: 15%;
    bottom: 3%;
    height: 45vmin;
    width: 36vmin;
}

.house .base {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60%;
    background-color: #fbeebf;
}

.house .door {
    position: absolute;
    bottom: 6%;
    left: 50%;
    width: 20%;
    height: 34%;
    background-color: #c5431c;
}

.house .roof {
    position: absolute;
    top: 13%;
    left: 14%;
    width: 74%;
    height: 54%;
    background-color: #c5241c;
    transform: rotate(-42deg);
}

.house .chimney {
    position: absolute;
    top: -29%;
    left: 37%;
    width: 20%;
    height: 43%;
    background-color: #c5241c;
    transform: rotate(42deg);
}

.house .chimney .smoke {
    position: absolute;
    bottom: 94%;
    left: -100%;
    width: 200%;
    height: 103%;
    background-color: #5c5c5c;
    filter: blur(8px);
    border-radius: 50%;
    opacity: .3;
    transform: skewX(2deg);
    animation: smoke 4s 1s infinite;
}

.house .chimney .smoke:nth-child(1) {
  animation: smoke 4s 1.5s infinite;
}
.house .chimney .smoke:nth-child(2) {
  animation: smoke 4s 2.5s infinite;
}
.house .chimney .smoke:nth-child(3) {
  animation: smoke 4s 3s infinite;
}

.ground {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 135%;
    height: 40%;
    transform: translateY(76%);
    font-size: 0;
}

.ground span {
    display: inline-block;
    width: 45%;
    margin-left: -15%;
    height: 100%;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: inset -20px 3px 27px 0 #c5f2ed;
}

.snowflakes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.snowflake {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.7);
    animation: snow 8000ms infinite;
    opacity: 0;
    position: absolute;
    top: 0;
    transform: translateZ(0) translate(0, 0) scale(.2);
}

.snowflake1 {
    left: 10%;
    transform: translate(1vh);
}

.snowflake2 {
    left: 20%;
    transform: translate(1.5vh);
    animation-delay: 200ms;
}

.snowflake3 {
    left: 30%;
    transform: translate(2vh);
    animation-delay: 520ms;
}

.snowflake4 {
    left: 40%;
    transform: translate(2.5vh);
    animation-delay: 999ms;
}

.snowflake5 {
    left: 50%;
    transform: translate(3vh);
    animation-delay: 150ms;
}

.snowflake6 {
    left: 60%;
    transform: translate(3.5vh);
    animation-delay: 400ms;
}

.snowflake7 {
    left: 70%;
    transform: translate(4vh);
    animation-delay: 1550ms;
}

.snowflake8 {
    left: 80%;
    transform: translate(4.5vh);
    animation-delay: 655ms;
}

.snowflake9 {
    left: 86%;
    transform: translate(5vh);
    animation-delay: 250ms;
}

.snowflake10 {
    left: 55%;
    transform: translate(5.5vh);
    animation-delay: 600ms;
}

.snowflake11 {
    left: 15%;
    transform: translate(6vh);
    animation-delay: 2000ms;
}

.snowflake12 {
    left: 25%;
    transform: translate(6.5vh);
    animation-delay: 2400ms;
}

.snowflake13 {
    left: 35%;
    transform: translate(7vh);
    animation-delay: 2999ms;
}

.snowflake14 {
    left: 45%;
    transform: translate(7.5vh);
    animation-delay: 1300ms;
}

.snowflake15 {
    left: 55%;
    transform: translate(8vh);
    animation-delay: 2150ms;
}

.snowflake16 {
    left: 65%;
    transform: translate(8.5vh);
    animation-delay: 2140ms;
}

.snowflake17 {
    left: 75%;
    transform: translate(5.5vh);
    animation-delay: 2600ms;
}

.snowflake18 {
    left: 84%;
    transform: translate(5.5vh);
    animation-delay: 2666ms;
}

.snowflake19 {
    left: 89%;
    transform: translate(5.5vh);
    animation-delay: 2200ms;
}

.snowflake20 {
    left: 10%;
    transform: translate(5.5vh);
    animation-delay: 2400ms;
}

.snowflake21 {
    left: 20%;
    transform: translate(5.5vh);
    animation-delay: 3200ms;
}

.snowflake22 {
    left: 30%;
    transform: translate(5.5vh);
    animation-delay: 3500ms;
}

.snowflake24 {
    left: 40%;
    transform: translate(2.5vh);
    animation-delay: 3999ms;
}

.snowflake25 {
    left: 50%;
    transform: translate(3vh);
    animation-delay: 3150ms;
}

.snowflake26 {
    left: 60%;
    transform: translate(3.5vh);
    animation-delay: 3400ms;
}

.snowflake27 {
    left: 70%;
    transform: translate(4vh);
    animation-delay: 4550ms;
}

.snowflake28 {
    left: 79%;
    transform: translate(4.5vh);
    animation-delay: 3655ms;
}

.snowflake29 {
    left: 86%;
    transform: translate(5vh);
    animation-delay: 3250ms;
}

.snowflake30 {
    left: 55%;
    transform: translate(5.5vh);
    animation-delay: 4600ms;
}

.snowflake31 {
    left: 15%;
    transform: translate(6vh);
    animation-delay: 6000ms;
}

.snowflake32 {
    left: 25%;
    transform: translate(6.5vh);
    animation-delay: 6400ms;
}

.snowflake33 {
    left: 35%;
    transform: translate(7vh);
    animation-delay: 6999ms;
}

.snowflake34 {
    left: 45%;
    transform: translate(7.5vh);
    animation-delay: 5300ms;
}

.snowflake35 {
    left: 55%;
    transform: translate(8vh);
    animation-delay: 6150ms;
}

.snowflake36 {
    left: 65%;
    transform: translate(8.5vh);
    animation-delay: 6140ms;
}

.snowflake37 {
    left: 75%;
    transform: translate(5.5vh);
    animation-delay: 6600ms;
}

.snowflake38 {
    left: 83%;
    transform: translate(5.5vh);
    animation-delay: 6666ms;
}

.snowflake39 {
    left: 89%;
    transform: translate(5.5vh);
    animation-delay: 6200ms;
}

.snowflake40 {
    left: 94%;
    transform: translate(5vh);
    animation-delay: 7000ms;
}

@keyframes smoke {
  10% {
    left: -50%;
  }
  30% {
    left: 50%;
  }
  70% {
    left: -50%;
  }
  100% {
    left: 50%;
    bottom: 120%;
    width: 390%;
    height: 290%;
    opacity: 0;
    filter: blur(15px);
  }
}

@keyframes snowman {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(2deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

@keyframes eyes {
    0% {
        height: 6%;
    }

    5% {
        top: 21%;
        height: 2%;
    }

    10% {
        height: 5%;
    }

    70% {
        top: 20%;
    }

    100% {
        top: 20%;
    }
}

@keyframes snow {
    10%{
        opacity: 1
    }

    80%{
        transform: translate3d(0, 95vh, 0) scale(1.2);
    }
}