<main class="snow">
  <h1>Merry Christmas 🎅</h1>
</main>

body {
  background: #a11d1d;
  margin: 0;
}

main {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}
h1 {
  color: #fff;
  font-family: "Merienda", sans-serif;
  font-size: 5rem;
  font-weight: normal;
}
.xmas-tree-wrapper {
  width: 700px;
  height: 700px;
  border: dashed 3px #ccc;
  border-radius: 1rem;
}

.snow {
  position: relative;
}
.snowflake {
  --size: 1vw;
  width: var(--size);
  height: var(--size);
  background: white;
  border-radius: 50%;
  position: absolute;
  top: -5vh;
}

@keyframes snowfall {
  0% {
    transform: translate3d(var(--horizontal-start), 0, 0);
  }
  100% {
    transform: translate3d(var(--horizontal-end), 110vh, 0);
  }
}

@for $i from 1 through 50 {
  .snowflake:nth-child(#{$i}) {
    --size: #{random(10) * 0.1}vw;
    --horizontal-start: #{random(20) - 10}vw;
    --horizontal-end: #{random(20) - 10}vw;
    left: #{random(100)}vw;
    animation: snowfall #{10 + random(10)}s linear infinite;
    animation-delay: -#{random(15)}s;
  }
}

const snowContainer = document.querySelector(".snow");
[...Array(50)].forEach((_, i) => {
  const snowFlake = document.createElement("div");
  snowFlake.classList.add("snowflake");
  snowContainer.append(snowFlake);
});