@font-face {
  font-family: 'Rock Salt';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Rock Salt Regular'), local('RockSalt-Regular'), url(https://fonts.gstatic.com/s/rocksalt/v10/MwQ0bhv11fWD6QsAVOZrt0M_.ttf) format('truetype');
}
html {
  font-family: 'Rock Salt', cursive;
  font-size: calc(14px + (20 - 14) * ((100vw - 400px) / ( 1200 - 400)));
}
body {
  background: #000;
  padding:0;
  margin:0;
  overflow: hidden;
}
@-webkit-keyframes fall {
  from {
    -webkit-transform: translateY(-20vh) rotateX(0deg) rotateZ(0deg);
            transform: translateY(-20vh) rotateX(0deg) rotateZ(0deg);
  }
  to {
    -webkit-transform: translateY(140vh) rotateX(60deg) rotateZ(300deg);
            transform: translateY(140vh) rotateX(60deg) rotateZ(300deg);
  }
}
@keyframes fall {
  from {
    -webkit-transform: translateY(-20vh) rotateX(0deg) rotateZ(0deg);
            transform: translateY(-20vh) rotateX(0deg) rotateZ(0deg);
  }
  to {
    -webkit-transform: translateY(140vh) rotateX(60deg) rotateZ(300deg);
            transform: translateY(140vh) rotateX(60deg) rotateZ(300deg);
  }
}
@-webkit-keyframes fall-2 {
  from {
    -webkit-transform: translateY(-20vh) rotateX(0deg) rotateZ(0deg);
            transform: translateY(-20vh) rotateX(0deg) rotateZ(0deg);
  }
  to {
    -webkit-transform: translateY(140vh) rotateX(60deg) rotateZ(140deg);
            transform: translateY(140vh) rotateX(60deg) rotateZ(140deg);
  }
}
@keyframes fall-2 {
  from {
    -webkit-transform: translateY(-20vh) rotateX(0deg) rotateZ(0deg);
            transform: translateY(-20vh) rotateX(0deg) rotateZ(0deg);
  }
  to {
    -webkit-transform: translateY(140vh) rotateX(60deg) rotateZ(140deg);
            transform: translateY(140vh) rotateX(60deg) rotateZ(140deg);
  }
}
.snowflake {
  position: absolute;
  top: -20vh;
  left: 50%;
  color: #fff;
  -webkit-animation: fall 5s linear infinite;
          animation: fall 5s linear infinite;
}
.snowflake:nth-of-type(3n) {
  font-size: 2.2rem;
}
.snowflake:nth-of-type(3n - 1) {
  font-size: 1.5rem;
}
.snowflake:nth-of-type(3n - 2) {
  font-size: 1rem;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
}
.snowflake:nth-of-type(5n) > .layer-3 {
  -webkit-transform: rotate(45deg) translateX(0.15em) translateY(-0.7em) scale(1.5);
          transform: rotate(45deg) translateX(0.15em) translateY(-0.7em) scale(1.5);
}
.snowflake:nth-of-type(5n - 1) > .layer-1 {
  -webkit-transform: rotate(45deg) translateX(0.15em) translateY(-0.7em) scale(1.5);
          transform: rotate(45deg) translateX(0.15em) translateY(-0.7em) scale(1.5);
}
.snowflake:nth-of-type(5n - 2) > .layer-2 {
  -webkit-transform: rotate(45deg) translateX(0.15em) translateY(-0.7em) scale(1.5);
          transform: rotate(45deg) translateX(0.15em) translateY(-0.7em) scale(1.5);
}
.snowflake:nth-of-type(1) {
  left: 10%;
  -webkit-animation-delay: -1s;
          animation-delay: -1s;
  -webkit-animation-name: fall-2;
          animation-name: fall-2;
}
.snowflake:nth-of-type(2) {
  left: 30%;
  -webkit-animation-delay: -2s;
          animation-delay: -2s;
  -webkit-animation-duration: 7s;
          animation-duration: 7s;
}
.snowflake:nth-of-type(3) {
  left: 20%;
  -webkit-animation-delay: -1.5s;
          animation-delay: -1.5s;
}
.snowflake:nth-of-type(4) {
  left: 40%;
  -webkit-animation-delay: -3s;
          animation-delay: -3s;
  -webkit-animation-duration: 8s;
          animation-duration: 8s;
}
.snowflake:nth-of-type(5) {
  left: 50%;
  -webkit-animation-delay: -4.5s;
          animation-delay: -4.5s;
  -webkit-animation-name: fall-2;
          animation-name: fall-2;
}
.snowflake:nth-of-type(6) {
  left: 90%;
  -webkit-animation-delay: -2.5s;
          animation-delay: -2.5s;
}
.snowflake:nth-of-type(7) {
  left: 70%;
  -webkit-animation-delay: -6s;
          animation-delay: -6s;
  -webkit-animation-duration: 6s;
          animation-duration: 6s;
}
.snowflake:nth-of-type(8) {
  left: 60%;
  -webkit-animation-delay: -4s;
          animation-delay: -4s;
  -webkit-animation-duration: 6.5s;
          animation-duration: 6.5s;
}
.snowflake:nth-of-type(9) {
  left: 80%;
  -webkit-animation-delay: -3.5s;
          animation-delay: -3.5s;
}
.snowflake:nth-of-type(10) {
  left: 100%;
  -webkit-animation-delay: -1.5s;
          animation-delay: -1.5s;
}
.snowflake:nth-of-type(11) {
  left: 5%;
  -webkit-animation-delay: -2s;
          animation-delay: -2s;
}
.snowflake:nth-of-type(12) {
  left: 25%;
  -webkit-animation-delay: -3.5s;
          animation-delay: -3.5s;
}
.snowflake:nth-of-type(13) {
  left: 15%;
  -webkit-animation-delay: -4s;
          animation-delay: -4s;
  -webkit-animation-duration: 9s;
          animation-duration: 9s;
}
.snowflake:nth-of-type(14) {
  left: 35%;
  -webkit-animation-delay: -1s;
          animation-delay: -1s;
}
.snowflake:nth-of-type(15) {
  left: 45%;
  -webkit-animation-delay: -7.5s;
          animation-delay: -7.5s;
  -webkit-animation-name: fall-2;
          animation-name: fall-2;
}
.snowflake:nth-of-type(16) {
  left: 75%;
  -webkit-animation-delay: -1.5s;
          animation-delay: -1.5s;
}
.snowflake:nth-of-type(17) {
  left: 65%;
  -webkit-animation-delay: -3s;
          animation-delay: -3s;
  -webkit-animation-duration: 7s;
          animation-duration: 7s;
}
.snowflake:nth-of-type(18) {
  left: 55%;
  -webkit-animation-delay: -7s;
          animation-delay: -7s;
}
.snowflake:nth-of-type(19) {
  left: 85%;
  -webkit-animation-delay: -2s;
          animation-delay: -2s;
  -webkit-animation-name: fall-2;
          animation-name: fall-2;
}
.snowflake:nth-of-type(20) {
  left: 95%;
  -webkit-animation-delay: -3s;
          animation-delay: -3s;
}
.snowflake > .layer-1 {
  position: absolute;
  left: 3em;
}
.snowflake > .layer-1 > .a {
  position: absolute;
}
.snowflake > .layer-1 > .a:nth-of-type(1) {
  -webkit-transform: rotate(0) translateY(30%);
          transform: rotate(0) translateY(30%);
}
.snowflake > .layer-1 > .a:nth-of-type(2) {
  -webkit-transform: rotate(90deg) translateY(30%);
          transform: rotate(90deg) translateY(30%);
}
.snowflake > .layer-1 > .a:nth-of-type(3) {
  -webkit-transform: rotate(180deg) translateY(30%);
          transform: rotate(180deg) translateY(30%);
}
.snowflake > .layer-1 > .a:nth-of-type(4) {
  -webkit-transform: rotate(270deg) translateY(30%);
          transform: rotate(270deg) translateY(30%);
}
.snowflake > .layer-2 {
  position: absolute;
  left: 3em;
}
.snowflake > .layer-2 > .a {
  position: absolute;
  font-size: 0.7em;
}
.snowflake > .layer-2 > .a:nth-of-type(1) {
  -webkit-transform: rotate(45deg) translateY(-80%) translateX(50%);
          transform: rotate(45deg) translateY(-80%) translateX(50%);
}
.snowflake > .layer-2 > .a:nth-of-type(2) {
  -webkit-transform: rotate(135deg) translateY(-110%) translateX(30%);
          transform: rotate(135deg) translateY(-110%) translateX(30%);
}
.snowflake > .layer-2 > .a:nth-of-type(3) {
  -webkit-transform: rotate(225deg) translateY(-100%) translateX(-30%);
          transform: rotate(225deg) translateY(-100%) translateX(-30%);
}
.snowflake > .layer-2 > .a:nth-of-type(4) {
  -webkit-transform: rotate(315deg) translateY(-70%);
          transform: rotate(315deg) translateY(-70%);
}
.snowflake > .layer-3 {
  position: absolute;
  left: 3em;
}
.snowflake > .layer-3 > .a {
  position: absolute;
  font-size: 0.5em;
}
.snowflake > .layer-3 > .a:nth-of-type(1) {
  -webkit-transform: rotate(0) translateY(200%) translateX(50%);
          transform: rotate(0) translateY(200%) translateX(50%);
}
.snowflake > .layer-3 > .a:nth-of-type(2) {
  -webkit-transform: rotate(90deg) translateY(120%) translateX(90%);
          transform: rotate(90deg) translateY(120%) translateX(90%);
}
.snowflake > .layer-3 > .a:nth-of-type(3) {
  -webkit-transform: rotate(180deg) translateY(100%) translateX(-50%);
          transform: rotate(180deg) translateY(100%) translateX(-50%);
}
.snowflake > .layer-3 > .a:nth-of-type(4) {
  -webkit-transform: rotate(270deg) translateY(180%) translateX(-90%);
          transform: rotate(270deg) translateY(180%) translateX(-90%);
}