@import url('https://fonts.googleapis.com/css?family=Ubuntu');
body {
  background: #bd523b url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/934290/background.jpg') no-repeat top;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}



.container p {
  color: #fff;
  margin: 0 auto;
  vertical-align: middle;
  text-align: center;
  font-family: 'Ubuntu', sans-serif;
}


.container > p {
    position: absolute;
    width: auto;
    height: 50px;
    top: 58%;
    left: 20%;
}

.container > .follow a {
    text-decoration: none;
    color: #fff;
    letter-spacing: 1px;
    font-size: 14px;
    padding: 12px 0;
    font-weight: 500;
}

.container > .follow a.dr { color: #e9b1bc; }
.container > .follow a.be { color: #8cb8f2; }
.container > .follow a.ig { color: #cfa0c2; }




svg{
  width:100%;
  height:100%;
  visibility:hidden;
 
}

.sparkle{
  /* mix-blend-mode:luminosity */
}

.merryText, .merryTextBg, .fromChrisText{
 font-family:'mountains_of_christmasregular' ;
  fill:#fffcf9;
  text-anchor:middle;
  font-size:3.64em;
}
.merryTextBg{

  stroke:#C89568;
  fill:transparent;
  stroke-width:3;
  text-anchor:middle;
  font-size:3.64em;
}

.fromChrisText{
	  font-size:1.64em;  
	fill:#C89568;
}



#days {
  font-size: 50px;
  color: #FFF;
  text-align: center;
  letter-spacing: 3px;
}

.drop {
	position: absolute;
	top: 0;	
	z-index: -1;
  opacity: 0;
}
.snow {
	height: 8px;
	width: 8px;
	border-radius: 100%;
	background-color: #FFF;
  box-shadow: 0 0 10px #FFF
}


.animate {
	animation: falling 8.5s infinite ease-in;	
}


@keyframes falling {
	0% {top: 0; opacity: 1;}
	100% {top: 1500px; opacity: 0}
}


.button {
  --background: #1A1C27;
  --background-hover: #292C3B;
  --background-progress: #999EB4;
  --background-progress-active: #275EFE;
  --background-progress-success: #292C3B;
  --text: #fff;
  --success-text: #292C3B;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  outline: none;
  cursor: pointer;
  position: relative;
  border: 0;
  padding: 0;
  line-height: 21px;
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  background: none;
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  --letters-y: 0px;
  --letters-r: 0deg;
  --letters-o: 1;
  --progress-opacity: 0;
  --background-opacity: 1;
  --progress: 157;
  --progress-y: .5px;
  --progress-sx: 1;
  --progress-sy: 1;
  --success-opacity: 0;
}
.button:hover {
  --fill: var(--background-hover);
}
.button.active {
  --fill: var(--background-progress);
  --fill-delay: .2s;
  --fill-duration: .4s;
}
.button.success {
  --success-background: var(--background-progress-success);
}
.button svg {
  display: block;
  position: absolute;
  width: 100%;
  left: 0;
  right: 0;
}
.button svg.background {
  height: 45px;
  top: 0;
  opacity: var(--background-opacity);
  fill: var(--fill, var(--background));
  -webkit-transition: fill var(--fill-duration, 0.2s) linear var(--fill-delay, 0s);
  transition: fill var(--fill-duration, 0.2s) linear var(--fill-delay, 0s);
}
.button svg.progress {
  height: 32px;
  bottom: -13px;
  stroke: var(--background-progress);
  fill: none;
  stroke-width: 7;
  stroke-linecap: round;
  pointer-events: none;
  opacity: var(--progress-opacity);
  -webkit-transform: translateY(var(--progress-y)) scale(var(--progress-sx), var(--progress-sy)) translateZ(0);
          transform: translateY(var(--progress-y)) scale(var(--progress-sx), var(--progress-sy)) translateZ(0);
}
.button svg.progress path:last-child {
  stroke-dasharray: 157;
  stroke-dashoffset: var(--progress);
  stroke: var(--success-background, var(--background-progress-active));
  -webkit-transition: stroke .2s linear;
  transition: stroke .2s linear;
}
.button .label,
.button .success {
  z-index: 1;
}
.button .label {
  position: relative;
  display: -webkit-box;
  display: flex;
  padding: 12px 40px;
  opacity: var(--letters-o);
}
.button .label span {
  display: block;
  -webkit-transform: translateY(calc(var(--letters-y) * var(--move))) translateZ(0) rotate(calc(var(--letters-r) * var(--rotate) * var(--part)));
          transform: translateY(calc(var(--letters-y) * var(--move))) translateZ(0) rotate(calc(var(--letters-r) * var(--rotate) * var(--part)));
}
.button .success {
  position: absolute;
  left: 0;
  right: 0;
  top: 12px;
  color: var(--success-text);
  opacity: var(--success-opacity);
}


body .dribbble {
  position: fixed;
  display: block;
  right: 20px;
  bottom: 20px;
}
body .dribbble img {
  display: block;
  height: 28px;
}
body .twitter {
  position: fixed;
  display: block;
  right: 64px;
  bottom: 14px;
}
body .twitter svg {
  width: 32px;
  height: 32px;
  fill: #1da1f2;
}