@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700&display=swap");

* {
  margin: 0;
  position: 0;
  box-sizing: border-box;
  font-family: "Raleway", sans-serif;
}

body {
  display: flex;
  min-height: 100vh;
  align-items: center;
  align-items: center;
  justify-content: center;
  background: linear-gradient(#05172f, #25719e);
}

.mainContainer {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.mainContainer::before {
  bottom: 0;
  z-index: 1;
  content: "";
  width: 100%;
  height: 200px;
  background: url(christmas-tree.png);
  position: absolute;
  /* background: black; */
}
.mainContainer .moon {
  top: 10%;
  left: 50%;
  width: 350px;
  height: 350px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  transform: translateX(-50%);
  box-shadow: 0 0 0.2rem #fff, 0 0 0.2rem #fff, 0 0 2rem #bc13fe,
    0 0 0.8rem #bc13fe, 0 0 2.8rem #bc13fe, inset 0 0 1.3rem #bc13fe;
}

.mainContainer .moon::before {
  background: url(santaflying.png);
  content: "";
  position: absolute;
  inset: 25px -150px;
  background-size: 600px;
  background-position: center;
  background-repeat: no-repeat;
  animation: animate 5s ease-in-out infinite;
}

@keyframes animate {
  0%,
  100% {
    transform: translateY(-25px);
  }
  50% {
    transform: translateY(25px);
  }
}

.mainContainer .moon::after {
  display: flex;
  color: #fff;
  font-size: 4rem;
  font-weight: 700;
  position: absolute;
  inset: -90px -200px;
  align-items: flex-end;
  justify-content: center;
  content: "Merry Chistmas to All";
  animation: flicker 2s infinite alternate;
  animation-delay: 2s;
}

@keyframes flicker {
  0%,
  18%,
  22%,
  25%,
  53%,
  57%,
  100% {
    text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, 0 0 42px #bc13fe,
      0 0 82px #bc13fe, 0 0 92px #bc13fe, 0 0 102px #bc13fe, 0 0 151px #bc13fe;
  }

  20%,
  24%,
  55% {
    text-shadow: none;
  }
}

.mainContainer .snow-fall {
  position: relative;
  display: flex;
}

.mainContainer .snow-fall span {
  height: 5px;
  margin: 0 1vw;
  min-width: 5px;
  position: relative;
  border-radius: 50%;
  background: #fff;
  box-shadow: -100px 20px 5px #fff, 100px 20px 5px #fff;
  animation: animateSnow 15s linear infinite;
  animation-duration: calc(75s / var(--i));
}

.mainContainer .snow-fall span:nth-child(even) {
  min-width: 10px;
  height: 10px;
}

@keyframes animateSnow {
  0% {
    transform: translateY(-10vh);
  }
  100% {
    transform: translateY(100vh);
  }
}