html {
    /* FF3.6+ */
    /* Chrome,Safari4+ */
    /* Chrome10+,Safari5.1+ */
    /* Opera 11.10+ */
    /* IE10+ */
    background: linear-gradient(to bottom, #241d33 0%, #171930 51%, #091119 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#241d33", endColorstr="#091119", GradientType=0);
    /* IE6-9 */
    height: 100%;
    overflow: hidden;
}

body {
    height: 100%;
}

#new-year {
    position: relative;
    top: 50%;
    width: 90%;
    height: 90%;
    margin: 0 auto 0 auto;
    transform: translateY(-50%);
}
#new-year svg {
    width: 100%;
    height: 100%;
}

.stroke-fill {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    stroke: #efefef;
}

#happy-stroke {
    -webkit-animation: happy-dash 1.7s linear normal forwards;
    animation: happy-dash 1.7s linear normal forwards;
}

#n-stroke {
    -webkit-animation: dash 2s 1.8s linear normal forwards;
    animation: dash 2s 1.8s linear normal forwards;
}

#ew-stroke {
    -webkit-animation: dash 2s 2.5s linear normal forwards;
    animation: dash 2s 2.5s linear normal forwards;
}

#y-stroke {
    -webkit-animation: dash 2s 3.3s linear normal forwards;
    animation: dash 2s 3.3s linear normal forwards;
}

#ye-stroke {
    -webkit-animation: dash 1s 4s linear normal forwards;
    animation: dash 1s 4s linear normal forwards;
}

#ear-stroke {
    -webkit-animation: dash 2s 4.18s linear normal forwards;
    animation: dash 2s 4.18s linear normal forwards;
}

#underline-stroke {
    -webkit-animation: dash 0.5s 5.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) normal forwards;
    animation: dash 0.5s 5.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) normal forwards;
}

@-webkit-keyframes dash {
    0% {
        stroke-dashoffset: 1000;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes dash {
    0% {
        stroke-dashoffset: 1000;
    }
    100% {
        stroke-dashoffset: 0;
    }
}
@-webkit-keyframes happy-dash {
    0% {
        stroke-dashoffset: 1000;
    }
    6% {
        stroke-dashoffset: 976;
    }
    6.01% {
        stroke-dashoffset: 958;
    }
    13% {
        stroke-dashoffset: 936;
    }
    13.01% {
        stroke-dashoffset: 905;
    }
    20% {
        stroke-dashoffset: 896;
    }
    20.01% {
        stroke-dashoffset: 864;
    }
    27% {
        stroke-dashoffset: 840;
    }
    27.01% {
        stroke-dashoffset: 830;
    }
    34% {
        stroke-dashoffset: 808;
    }
    34.01% {
        stroke-dashoffset: 775;
    }
    40% {
        stroke-dashoffset: 764;
    }
    40.01% {
        stroke-dashoffset: 738;
    }
    60% {
        stroke-dashoffset: 688;
    }
    60.01% {
        stroke-dashoffset: 658;
    }
    80% {
        stroke-dashoffset: 610;
    }
    80.01% {
        stroke-dashoffset: 580;
    }
    90% {
        stroke-dashoffset: 555;
    }
    90.01% {
        stroke-dashoffset: 543;
    }
    99.99% {
        stroke-dashoffset: 525;
    }
    100% {
        stroke-dashoffset: 0;
    }
}
@keyframes happy-dash {
    0% {
        stroke-dashoffset: 1000;
    }
    6% {
        stroke-dashoffset: 976;
    }
    6.01% {
        stroke-dashoffset: 958;
    }
    13% {
        stroke-dashoffset: 936;
    }
    13.01% {
        stroke-dashoffset: 905;
    }
    20% {
        stroke-dashoffset: 896;
    }
    20.01% {
        stroke-dashoffset: 864;
    }
    27% {
        stroke-dashoffset: 840;
    }
    27.01% {
        stroke-dashoffset: 830;
    }
    34% {
        stroke-dashoffset: 808;
    }
    34.01% {
        stroke-dashoffset: 775;
    }
    40% {
        stroke-dashoffset: 764;
    }
    40.01% {
        stroke-dashoffset: 738;
    }
    60% {
        stroke-dashoffset: 688;
    }
    60.01% {
        stroke-dashoffset: 658;
    }
    80% {
        stroke-dashoffset: 610;
    }
    80.01% {
        stroke-dashoffset: 580;
    }
    90% {
        stroke-dashoffset: 555;
    }
    90.01% {
        stroke-dashoffset: 543;
    }
    99.99% {
        stroke-dashoffset: 525;
    }
    100% {
        stroke-dashoffset: 0;
    }
}