/* .snowball {
  position: absolute;
  top: 0;
  left: 15px;
  background-color: ghostwhite;
  height: 15px;
  width: 15px;
  clip-path: polygon(50% 0, 60% 30%, 100% 0%, 70% 40%, 100% 50%, 70% 60%, 100% 100%, 55% 68%, 50% 100%, 45% 68%, 0% 100%, 30% 60%, 0 50%, 30% 40%, 0% 0%, 41% 30%);
  animation: snowballFall 10s ease-out;
  z-index: 10;
}

@keyframes snowballFall {
  0% {
    transform: translateY(0vh) rotate(0deg) translateX(25px);
    opacity: 1;
  }

  70% {
    opacity: 1;
  }

  100% {
    transform: translateY(95vh) rotate(360deg) translateX(-25px);
    opacity: 0;
  }
} */
/* .lightrope {
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
  z-index: 1;
  margin: -15px 0 0 0;
  padding: 0;
  pointer-events: none;
  width: 100%;
}
.lightrope li {
  position: relative;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
  width: 12px;
  height: 24px;
  border-radius: 50%;
  margin: 20px;
  display: inline-block;
  background: #00f7a5;
  box-shadow: 0px 4.6666666667px 24px 3px #00f7a5;
  -webkit-animation-name: flash-1;
          animation-name: flash-1;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
          animation-delay: 0.5s;
}
.lightrope li:nth-child(2n+1) {
  background: aqua;
  box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 255, 255, 0.5);
  -webkit-animation-name: flash-2;
          animation-name: flash-2;
  -webkit-animation-duration: 0.4s;
          animation-duration: 0.4s;
          animation-delay: 0.5s;
}
.lightrope li:nth-child(4n+2) {
  background: #f70094;
  box-shadow: 0px 4.6666666667px 24px 3px #f70094;
  -webkit-animation-name: flash-3;
          animation-name: flash-3;
  -webkit-animation-duration: 1.1s;
          animation-duration: 1.1s;
          animation-delay: 0.5s;
}
.lightrope li:nth-child(odd) {
  -webkit-animation-duration: 1.8s;
          animation-duration: 1.8s;
          animation-delay: 0.5s;
}
.lightrope li:nth-child(3n+1) {
  -webkit-animation-duration: 1.4s;
          animation-duration: 1.4s;
          animation-delay: 0.5s;
}
.lightrope li:before {
  content: "";
  position: absolute;
  background: #222;
  width: 10px;
  height: 9.3333333333px;
  border-radius: 3px;
  top: -4.6666666667px;
  left: 1px;
}
.lightrope li:after {
  content: "";
  top: -14px;
  left: 9px;
  position: absolute;
  width: 52px;
  height: 18.6666666667px;
  border-bottom: solid #222 2px;
  border-radius: 50%;
}
.lightrope li:last-child:after {
  content: none;
}
.lightrope li:first-child {
  margin-left: -40px;
}

@-webkit-keyframes flash-1 {
  0%, 100% {
    background: #00f7a5;
    box-shadow: 0px 4.6666666667px 24px 3px #00f7a5;
  }
  50% {
    background: rgba(0, 247, 165, 0.4);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 247, 165, 0.2);
  }
}

@keyframes flash-1 {
  0%, 100% {
    background: #00f7a5;
    box-shadow: 0px 4.6666666667px 24px 3px #00f7a5;
  }
  50% {
    background: rgba(0, 247, 165, 0.4);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 247, 165, 0.2);
  }
}
@-webkit-keyframes flash-2 {
  0%, 100% {
    background: aqua;
    box-shadow: 0px 4.6666666667px 24px 3px aqua;
  }
  50% {
    background: rgba(0, 255, 255, 0.4);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 255, 255, 0.2);
  }
}
@keyframes flash-2 {
  0%, 100% {
    background: aqua;
    box-shadow: 0px 4.6666666667px 24px 3px aqua;
  }
  50% {
    background: rgba(0, 255, 255, 0.4);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 255, 255, 0.2);
  }
}
@-webkit-keyframes flash-3 {
  0%, 100% {
    background: #f70094;
    box-shadow: 0px 4.6666666667px 24px 3px #f70094;
  }
  50% {
    background: rgba(247, 0, 148, 0.4);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(247, 0, 148, 0.2);
  }
}
@keyframes flash-3 {
  0%, 100% {
    background: #f70094;
    box-shadow: 0px 4.6666666667px 24px 3px #f70094;
  }
  50% {
    background: rgba(247, 0, 148, 0.4);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(247, 0, 148, 0.2);
  }
} */
.christmasTree {
  position: absolute;
  width: 100px;
  height: 100px;
  bottom: 80px;
  right: 15px;
  border-radius: 50%;
  background-color: #0C1E42;
  background-image: radial-gradient(circle at 50% 18%, yellow 3%, transparent 3.5%), linear-gradient(60deg, #7dae41 8%, transparent 8.5%), linear-gradient(-60deg, #79a83f 8%, transparent 8.5%), linear-gradient(60deg, #75a33d 10%, transparent 10.5%), linear-gradient(-60deg, #719d3b 10%, transparent 10.5%), linear-gradient(60deg, #6d9839 12%, transparent 12.5%), linear-gradient(-60deg, #699237 12%, transparent 12.5%), linear-gradient(80deg, #855726 5%, transparent 5.5%), linear-gradient(-80deg, #7f5324 5%, transparent 5.5%);
  background-position: 0px 0, 50px 40px, 50px 40px, 50px 55.555555px, 50px 55.555555px, 50px 71.4285px, 50px 71.4285px, 50px 80px, 50px 80px;
}
.christmasTree_Night{
  background-image: radial-gradient(circle at 50% 18%, pink 0.5%, transparent 10%), radial-gradient(circle at 50% 18%, aqua 0.5%, transparent 10%), radial-gradient(circle at 50% 18%, aqua 0.5%, transparent 10%), radial-gradient(circle at 50% 18%, lime 0.5%, transparent 10%), radial-gradient(circle at 50% 18%, lime 0.5%, transparent 10%), radial-gradient(circle at 50% 0%, white 3.5%, transparent 50%), radial-gradient(circle at 50% 18%, red 3%, transparent 3.5%), radial-gradient(circle at 50% 18%, blue 3%, transparent 3.5%), radial-gradient(circle at 50% 18%, blue 3%, transparent 3.5%), radial-gradient(circle at 50% 18%, green 3%, transparent 3.5%), radial-gradient(circle at 50% 18%, green 3%, transparent 3.5%), radial-gradient(circle at 50% 18%, yellow 3%, transparent 3.5%), linear-gradient(60deg, #7dae41 8%, transparent 8.5%), linear-gradient(-60deg, #79a83f 8%, transparent 8.5%), linear-gradient(60deg, #75a33d 10%, transparent 10.5%), linear-gradient(-60deg, #719d3b 10%, transparent 10.5%), linear-gradient(60deg, #6d9839 12%, transparent 12.5%), linear-gradient(-60deg, #699237 12%, transparent 12.5%), linear-gradient(80deg, #855726 5%, transparent 5.5%), linear-gradient(-80deg, #7f5324 5%, transparent 5.5%);
  background-position: 0px 15px, 7px 30px, -6px 30px, -10px 47px, 10px 47px, 0px 0px, -0px 15px, 7px 30px, -6px 30px, -10px 47px, 10px 47px, 
   0px 0, 50px 40px, 50px 40px, 50px 55.555555px, 50px 55.555555px, 50px 71.4285px, 50px 71.4285px, 50px 80px, 50px 80px, 0px 0px;
  animation: christmasTree_Snowman_Animation 2s ease-in-out;
}
@keyframes christmasTree_Snowman_Animation {
  0%{
    background-image: radial-gradient(circle at 50% 0%, white 0.5%, transparent 50%);
    background-position: 0px 0px;
  }
  12.5%{
    background-image: radial-gradient(circle at 50% 0%, white 0.5%, transparent 50%), radial-gradient(circle at 50% 50%, ghostwhite 0.5%, transparent 100%);
    background-position: 0px 0px, 0px 0px;
  }
  25%{
    background-image: radial-gradient(circle at 50% 0%, white 0.5%, transparent 50%), radial-gradient(circle at 50% 50%, ghostwhite 0.5%, transparent 100%), radial-gradient(circle at 50% 50%, black 3.5%, transparent 5.5%);
    background-position: 0px 0px, 0px 0px, 0px -15px;
  }
  37.5%{
    background-image: radial-gradient(circle at 50% 0%, white 0.5%, transparent 50%), radial-gradient(circle at 50% 50%, ghostwhite 0.5%, transparent 100%), radial-gradient(circle at 50% 50%, black 3.5%, transparent 5.5%), radial-gradient(circle at 50% 50%, #fffafa 15.5%, transparent 20%);
    background-position: 0px 0px, 0px 0px, 0px -15px, 0px -10px;
  }
  50%{
    background-image: radial-gradient(circle at 50% 0%, white 0.5%, transparent 50%), radial-gradient(circle at 50% 50%, ghostwhite 0.5%, transparent 100%), radial-gradient(circle at 50% 50%, black 3.5%, transparent 5.5%), radial-gradient(circle at 50% 50%, #fffafa 15.5%, transparent 20%), radial-gradient(circle at 50% 50%, #fffafa 20.5%, transparent 25%);
    background-position: 0px 0px, 0px 0px, 0px -15px, 0px -10px, 0px 10px;
  }
  62.5%{
    background-image: radial-gradient(circle at 50% 0%, white 0.5%, transparent 50%), radial-gradient(circle at 50% 50%, ghostwhite 0.5%, transparent 100%), radial-gradient(circle at 50% 50%, black 3.5%, transparent 5.5%), radial-gradient(circle at 50% 50%, #fffafa 15.5%, transparent 20%), radial-gradient(circle at 50% 50%, #fffafa 20.5%, transparent 25%), radial-gradient(circle at 50% 50%, #fffafa 25.5%, transparent 30%);
    background-position: 0px 0px, 0px 0px, 0px -15px, 0px -10px, 0px 10px, 0px 30px;
  }
  75%{
    background-image: radial-gradient(circle at 50% 0%, white 0.5%, transparent 50%), radial-gradient(circle at 50% 50%, ghostwhite 0.5%, transparent 100%), radial-gradient(circle at 50% 50%, black 3.5%, transparent 5.5%), radial-gradient(circle at 50% 50%, #fffafa 15.5%, transparent 20%), radial-gradient(circle at 50% 50%, #fffafa 20.5%, transparent 25%), radial-gradient(circle at 50% 50%, #fffafa 25.5%, transparent 30%), linear-gradient(-140deg, orange 11%, transparent 3%);
    background-position: 0px 0px, 0px 0px, 0px -15px, 0px -10px, 0px 10px, 0px 30px, 50px -70px;
  }
  100%{
    background-image: radial-gradient(circle at 50% 18%, yellow 3%, transparent 3.5%), linear-gradient(60deg, #7dae41 8%, transparent 8.5%), linear-gradient(-60deg, #79a83f 8%, transparent 8.5%), linear-gradient(60deg, #75a33d 10%, transparent 10.5%), linear-gradient(-60deg, #719d3b 10%, transparent 10.5%), linear-gradient(60deg, #6d9839 12%, transparent 12.5%), linear-gradient(-60deg, #699237 12%, transparent 12.5%), linear-gradient(80deg, #855726 5%, transparent 5.5%), linear-gradient(-80deg, #7f5324 5%, transparent 5.5%);
    background-position: 0px 0, 50px 40px, 50px 40px, 50px 55.555555px, 50px 55.555555px, 50px 71.4285px, 50px 71.4285px, 50px 80px, 50px 80px;
  }
}
.christmasTree:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform: rotate(-15deg);
  background-image: radial-gradient(circle at 30% 30%, #fff 1.5%, transparent 2.5%), radial-gradient(circle at 80% 70%, #fff 1.5%, transparent 2.5%), radial-gradient(circle at 30% 50%, #fff 1%, transparent 2%), radial-gradient(circle at 70% 85%, #fff 1%, transparent 2%);
  background-size: 100% 100%, 100% 100%, 50% 100%, 50% 50%;
  background-position: 0 0, 0 0, 0 0, 0 0;
  -webkit-animation: snow 6s linear infinite forwards;
          animation: snow 6s linear infinite forwards;
          animation-delay: 2s;
}
@-webkit-keyframes snow {
  100% {
    background-position: 0px 200px, 0 200px, 0px 200px, 0px 200px;
  }
}
@keyframes snow {
  100% {
    background-position: 0px 200px, 0 200px, 0px 200px, 0px 200px;
  }
}
.penguin {
  width: 25px;
  height: 45px;
  bottom: 50%;
  position: absolute;
  bottom: 0;
  animation: walk 25s linear 1;
  display: none;
}

@keyframes walk {
  0% { 
    left: 0;    
    transform: translatex(0) scalex(-1); 
  }
  49.999%{
    transform: translatex(calc(100vw - 55px)) scalex(-1);
  }
  50%{
    transform: translatex(calc(100vw - 55px)) scalex(1);
  }
  95%{
    opacity: 1;
  }
  100%{
    transform: translatex(0) scalex(1); 
    opacity: 0;
  }
}