@import url(https://fonts.googleapis.com/css?family=Calligraffitti);
@-webkit-keyframes s {
  0% {
    stroke-dasharray: 0 300;
  }
  100% {
    stroke-dasharray: 300 0;
  }
}
@keyframes s {
  0% {
    stroke-dasharray: 0 300;
  }
  100% {
    stroke-dasharray: 300 0;
  }
}
@-webkit-keyframes f {
  0% {
    -webkit-transform: translateY(-40px);
            transform: translateY(-40px);
    opacity: .5;
  }
  50% {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
    opacity: .1;
  }
  100% {
    -webkit-transform: translateY(50vh);
            transform: translateY(50vh);
    opacity: 0;
  }
}
@keyframes f {
  0% {
    -webkit-transform: translateY(-40px);
            transform: translateY(-40px);
    opacity: .5;
  }
  50% {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
    opacity: .1;
  }
  100% {
    -webkit-transform: translateY(50vh);
            transform: translateY(50vh);
    opacity: 0;
  }
}


body {
  font-family: 'Calligraffitti';
  text-align: center;
}

svg {
  margin-top: calc(50vh - 75px);
  width: 300px;
}

.Merry, .Christmas {
  fill: none;
  stroke: #fff;
  text-shadow: 0 0 14px #a32300;
  stroke-width: 4;
  stroke-dasharray: 0 100;
  text-anchor: middle;
}

.Merry {
  font-size: 64px;
}
.Merry tspan:nth-child(1) {
  -webkit-animation: s 2s 1s linear forwards;
          animation: s 2s 1s linear forwards;
}
.Merry tspan:nth-child(2) {
  -webkit-animation: s 2s 2s linear forwards;
          animation: s 2s 2s linear forwards;
}
.Merry tspan:nth-child(3) {
  -webkit-animation: s 2s 3s linear forwards;
          animation: s 2s 3s linear forwards;
}
.Merry tspan:nth-child(4) {
  -webkit-animation: s 2s 4s linear forwards;
          animation: s 2s 4s linear forwards;
}
.Merry tspan:nth-child(5) {
  -webkit-animation: s 2s 5s linear forwards;
          animation: s 2s 5s linear forwards;
}
.Merry tspan:nth-child(6) {
  -webkit-animation: s 2s 6s linear forwards;
          animation: s 2s 6s linear forwards;
}

.Christmas {
  font-size: 94px;
  stroke-width: 6;
}
.Christmas tspan:nth-child(1) {
  -webkit-animation: s 2s 7s linear forwards;
          animation: s 2s 7s linear forwards;
}
.Christmas tspan:nth-child(2) {
  -webkit-animation: s 2s 8s linear forwards;
          animation: s 2s 8s linear forwards;
}
.Christmas tspan:nth-child(3) {
  -webkit-animation: s 2s 9s linear forwards;
          animation: s 2s 9s linear forwards;
}
.Christmas tspan:nth-child(4) {
  -webkit-animation: s 2s 10s linear forwards;
          animation: s 2s 10s linear forwards;
}

.Snow {
  position: absolute;
  -webkit-filter: blur(1px);
          filter: blur(1px);
  top: 0;
  left: 0;
  width: 100%;
  font-size: 0;
  height: 100%;
  overflow: hidden;
}
.Snow-flake {
  -webkit-animation: f 4s linear infinite;
          animation: f 4s linear infinite;
  display: inline-block;
  border-radius: 50%;
  background: #fff;
  margin: 0 10px 0;
  width: 10px;
  height: 10px;
  -webkit-transform: translateY(-40px);
          transform: translateY(-40px);
  opacity: .5;
}
.Snow-flake:nth-child(1) {
  -webkit-animation-delay: -1.5436678752s;
          animation-delay: -1.5436678752s;
}
.Snow-flake:nth-child(2) {
  -webkit-animation-delay: -3.5455486289s;
          animation-delay: -3.5455486289s;
}
.Snow-flake:nth-child(3) {
  -webkit-animation-delay: -2.6654874826s;
          animation-delay: -2.6654874826s;
}
.Snow-flake:nth-child(4) {
  -webkit-animation-delay: -0.6077650095s;
          animation-delay: -0.6077650095s;
}
.Snow-flake:nth-child(5) {
  -webkit-animation-delay: -0.1174211415s;
          animation-delay: -0.1174211415s;
}
.Snow-flake:nth-child(6) {
  -webkit-animation-delay: -0.3136399235s;
          animation-delay: -0.3136399235s;
}
.Snow-flake:nth-child(7) {
  -webkit-animation-delay: -0.0885549329s;
          animation-delay: -0.0885549329s;
}
.Snow-flake:nth-child(8) {
  -webkit-animation-delay: -3.3582471363s;
          animation-delay: -3.3582471363s;
}
.Snow-flake:nth-child(9) {
  -webkit-animation-delay: -1.7332083643s;
          animation-delay: -1.7332083643s;
}
.Snow-flake:nth-child(10) {
  -webkit-animation-delay: -0.4513031625s;
          animation-delay: -0.4513031625s;
}
.Snow-flake:nth-child(11) {
  -webkit-animation-delay: -1.7732391764s;
          animation-delay: -1.7732391764s;
}
.Snow-flake:nth-child(12) {
  -webkit-animation-delay: -0.2670967148s;
          animation-delay: -0.2670967148s;
}
.Snow-flake:nth-child(13) {
  -webkit-animation-delay: -3.487998559s;
          animation-delay: -3.487998559s;
}
.Snow-flake:nth-child(14) {
  -webkit-animation-delay: -1.9531889321s;
          animation-delay: -1.9531889321s;
}
.Snow-flake:nth-child(15) {
  -webkit-animation-delay: -3.1280015662s;
          animation-delay: -3.1280015662s;
}
.Snow-flake:nth-child(16) {
  -webkit-animation-delay: -0.3436469737s;
          animation-delay: -0.3436469737s;
}
.Snow-flake:nth-child(17) {
  -webkit-animation-delay: -2.1714474676s;
          animation-delay: -2.1714474676s;
}
.Snow-flake:nth-child(18) {
  -webkit-animation-delay: -3.4283149815s;
          animation-delay: -3.4283149815s;
}
.Snow-flake:nth-child(19) {
  -webkit-animation-delay: -0.9587716339s;
          animation-delay: -0.9587716339s;
}
.Snow-flake:nth-child(20) {
  -webkit-animation-delay: -1.9443263633s;
          animation-delay: -1.9443263633s;
}
.Snow-flake:nth-child(21) {
  -webkit-animation-delay: -2.9768353742s;
          animation-delay: -2.9768353742s;
}
.Snow-flake:nth-child(22) {
  -webkit-animation-delay: -1.962974752s;
          animation-delay: -1.962974752s;
}
.Snow-flake:nth-child(23) {
  -webkit-animation-delay: -0.6355312169s;
          animation-delay: -0.6355312169s;
}
.Snow-flake:nth-child(24) {
  -webkit-animation-delay: -1.314600075s;
          animation-delay: -1.314600075s;
}
.Snow-flake:nth-child(25) {
  -webkit-animation-delay: -3.4620460315s;
          animation-delay: -3.4620460315s;
}
.Snow-flake:nth-child(26) {
  -webkit-animation-delay: -2.5885007393s;
          animation-delay: -2.5885007393s;
}
.Snow-flake:nth-child(27) {
  -webkit-animation-delay: -0.9473565257s;
          animation-delay: -0.9473565257s;
}
.Snow-flake:nth-child(28) {
  -webkit-animation-delay: -2.4876217544s;
          animation-delay: -2.4876217544s;
}
.Snow-flake:nth-child(29) {
  -webkit-animation-delay: -0.7263164802s;
          animation-delay: -0.7263164802s;
}
.Snow-flake:nth-child(30) {
  -webkit-animation-delay: -3.3172007007s;
          animation-delay: -3.3172007007s;
}
.Snow-flake:nth-child(31) {
  -webkit-animation-delay: -3.3617669308s;
          animation-delay: -3.3617669308s;
}
.Snow-flake:nth-child(32) {
  -webkit-animation-delay: -3.6307639183s;
          animation-delay: -3.6307639183s;
}
.Snow-flake:nth-child(33) {
  -webkit-animation-delay: -0.1121101724s;
          animation-delay: -0.1121101724s;
}
.Snow-flake:nth-child(34) {
  -webkit-animation-delay: -1.3963832063s;
          animation-delay: -1.3963832063s;
}
.Snow-flake:nth-child(35) {
  -webkit-animation-delay: -3.2473913667s;
          animation-delay: -3.2473913667s;
}
.Snow-flake:nth-child(36) {
  -webkit-animation-delay: -1.9858278885s;
          animation-delay: -1.9858278885s;
}
.Snow-flake:nth-child(37) {
  -webkit-animation-delay: -3.0367526312s;
          animation-delay: -3.0367526312s;
}
.Snow-flake:nth-child(38) {
  -webkit-animation-delay: -0.1815196053s;
          animation-delay: -0.1815196053s;
}
.Snow-flake:nth-child(39) {
  -webkit-animation-delay: -0.3587312199s;
          animation-delay: -0.3587312199s;
}
.Snow-flake:nth-child(40) {
  -webkit-animation-delay: -3.9802687188s;
          animation-delay: -3.9802687188s;
}
.Snow-flake:nth-child(41) {
  -webkit-animation-delay: -0.557709208s;
          animation-delay: -0.557709208s;
}
.Snow-flake:nth-child(42) {
  -webkit-animation-delay: -1.983828726s;
          animation-delay: -1.983828726s;
}
.Snow-flake:nth-child(43) {
  -webkit-animation-delay: -2.6535281201s;
          animation-delay: -2.6535281201s;
}
.Snow-flake:nth-child(44) {
  -webkit-animation-delay: -0.2478250834s;
          animation-delay: -0.2478250834s;
}
.Snow-flake:nth-child(45) {
  -webkit-animation-delay: -0.4082201967s;
          animation-delay: -0.4082201967s;
}
.Snow-flake:nth-child(46) {
  -webkit-animation-delay: -2.306580221s;
          animation-delay: -2.306580221s;
}
.Snow-flake:nth-child(47) {
  -webkit-animation-delay: -0.289603122s;
          animation-delay: -0.289603122s;
}
.Snow-flake:nth-child(48) {
  -webkit-animation-delay: -2.1270056287s;
          animation-delay: -2.1270056287s;
}
.Snow-flake:nth-child(49) {
  -webkit-animation-delay: -0.9992308888s;
          animation-delay: -0.9992308888s;
}
.Snow-flake:nth-child(50) {
  -webkit-animation-delay: -2.3131892408s;
          animation-delay: -2.3131892408s;
}
.Snow-flake:nth-child(51) {
  -webkit-animation-delay: -1.875754954s;
          animation-delay: -1.875754954s;
}
.Snow-flake:nth-child(52) {
  -webkit-animation-delay: -2.5500229683s;
          animation-delay: -2.5500229683s;
}
.Snow-flake:nth-child(53) {
  -webkit-animation-delay: -3.6931951419s;
          animation-delay: -3.6931951419s;
}
.Snow-flake:nth-child(54) {
  -webkit-animation-delay: -3.9476036648s;
          animation-delay: -3.9476036648s;
}
.Snow-flake:nth-child(55) {
  -webkit-animation-delay: -2.8311331873s;
          animation-delay: -2.8311331873s;
}

.Love {
  position: absolute;
  background: #fff;
  bottom: 0;
  height: 44px;
  width: 100%;
  left: 0;
  color: #a32300;
}
.Love-heart, .Love-text {
  display: inline-block;
  font-family: sans-serif;
  line-height: 44px;
}