@import url(https://fonts.googleapis.com/css?family=Calligraffitti);
@keyframes s {
  0% {
    stroke-dasharray: 0 300;
  }
  100% {
    stroke-dasharray: 300 0;
  }
}
@keyframes f {
  0% {
    transform: translateY(-40px);
    opacity: .5;
  }
  50% {
    transform: scale(1.5);
    opacity: .1;
  }
  100% {
    transform: translateY(50vh);
    opacity: 0;
  }
}
svg {
  margin-top: 6vh;
  width: 300px;
  font-family: 'Calligraffitti';
  text-align: center;
}

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

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

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

.Snow {
  position: absolute;
  filter: blur(1px);
  top: 0;
  left: 0;
  width: 100%;
  font-size: 0;
  height: 100%;
  overflow: hidden;
}
.Snow-flake {
  animation: f 4s linear infinite;
  display: inline-block;
  border-radius: 50%;
  background: #fff;
  margin: 0 10px 0;
  width: 10px;
  height: 10px;
  transform: translateY(-40px);
  opacity: .5;
}
.Snow-flake:nth-child(1) {
  animation-delay: -2.61212052s;
}
.Snow-flake:nth-child(2) {
  animation-delay: -0.89743308s;
}
.Snow-flake:nth-child(3) {
  animation-delay: -1.11931634s;
}
.Snow-flake:nth-child(4) {
  animation-delay: -2.84545894s;
}
.Snow-flake:nth-child(5) {
  animation-delay: -1.99172371s;
}
.Snow-flake:nth-child(6) {
  animation-delay: -0.41770418s;
}
.Snow-flake:nth-child(7) {
  animation-delay: -2.07796712s;
}
.Snow-flake:nth-child(8) {
  animation-delay: -1.09637295s;
}
.Snow-flake:nth-child(9) {
  animation-delay: -3.12862258s;
}
.Snow-flake:nth-child(10) {
  animation-delay: -0.79205702s;
}
.Snow-flake:nth-child(11) {
  animation-delay: -1.51495122s;
}
.Snow-flake:nth-child(12) {
  animation-delay: -2.46330278s;
}
.Snow-flake:nth-child(13) {
  animation-delay: -2.95597651s;
}
.Snow-flake:nth-child(14) {
  animation-delay: -2.244538s;
}
.Snow-flake:nth-child(15) {
  animation-delay: -1.52539887s;
}
.Snow-flake:nth-child(16) {
  animation-delay: -3.25537068s;
}
.Snow-flake:nth-child(17) {
  animation-delay: -0.95587956s;
}
.Snow-flake:nth-child(18) {
  animation-delay: -1.11696493s;
}
.Snow-flake:nth-child(19) {
  animation-delay: -1.64910303s;
}
.Snow-flake:nth-child(20) {
  animation-delay: -1.89819048s;
}
.Snow-flake:nth-child(21) {
  animation-delay: -0.68164859s;
}
.Snow-flake:nth-child(22) {
  animation-delay: -3.98286616s;
}
.Snow-flake:nth-child(23) {
  animation-delay: -0.52181331s;
}
.Snow-flake:nth-child(24) {
  animation-delay: -1.45878195s;
}
.Snow-flake:nth-child(25) {
  animation-delay: -1.65378437s;
}
.Snow-flake:nth-child(26) {
  animation-delay: -2.78920657s;
}
.Snow-flake:nth-child(27) {
  animation-delay: -1.51232048s;
}
.Snow-flake:nth-child(28) {
  animation-delay: -1.75782079s;
}
.Snow-flake:nth-child(29) {
  animation-delay: -3.8456277s;
}
.Snow-flake:nth-child(30) {
  animation-delay: -0.22606809s;
}
.Snow-flake:nth-child(31) {
  animation-delay: -3.03646659s;
}
.Snow-flake:nth-child(32) {
  animation-delay: -2.65913073s;
}
.Snow-flake:nth-child(33) {
  animation-delay: -1.88907341s;
}
.Snow-flake:nth-child(34) {
  animation-delay: -3.05749794s;
}
.Snow-flake:nth-child(35) {
  animation-delay: -1.83972953s;
}
.Snow-flake:nth-child(36) {
  animation-delay: -2.31150655s;
}
.Snow-flake:nth-child(37) {
  animation-delay: -3.00996109s;
}
.Snow-flake:nth-child(38) {
  animation-delay: -1.04870074s;
}
.Snow-flake:nth-child(39) {
  animation-delay: -3.45102344s;
}
.Snow-flake:nth-child(40) {
  animation-delay: -1.79605097s;
}
.Snow-flake:nth-child(41) {
  animation-delay: -2.91110739s;
}
.Snow-flake:nth-child(42) {
  animation-delay: -1.27936439s;
}
.Snow-flake:nth-child(43) {
  animation-delay: -1.26789087s;
}
.Snow-flake:nth-child(44) {
  animation-delay: -1.71564469s;
}
.Snow-flake:nth-child(45) {
  animation-delay: -0.37483839s;
}
.Snow-flake:nth-child(46) {
  animation-delay: -0.85240796s;
}
.Snow-flake:nth-child(47) {
  animation-delay: -0.24609308s;
}
.Snow-flake:nth-child(48) {
  animation-delay: -2.95512164s;
}
.Snow-flake:nth-child(49) {
  animation-delay: -3.38798068s;
}
.Snow-flake:nth-child(50) {
  animation-delay: -3.21209538s;
}
.Snow-flake:nth-child(51) {
  animation-delay: -0.1602282s;
}
.Snow-flake:nth-child(52) {
  animation-delay: -1.30570931s;
}
.Snow-flake:nth-child(53) {
  animation-delay: -0.32502849s;
}
.Snow-flake:nth-child(54) {
  animation-delay: -2.89234263s;
}
.Snow-flake:nth-child(55) {
  animation-delay: -0.66008932s;
}

.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;
}
