body {
    display: flex;
    height: 100vh;
    align-items: center;
    justify-content: center;
    background-color: #16323d;}
  
  .christmas-tree {
    position: relative;
    top:100px;
    cursor: pointer;
  }
  
  .tree {
    position: absolute;
    width: 20px;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    border-bottom: 55px solid #823723;
    height:0;
    animation: drop 1s linear;
  }
  
  .tree:before {
    content:"";
    position: absolute;
    background-color: #823723;
    border-radius: 50%;
    width: 30px;
    height:10px;
    top:50px;
    left:-5px;
  }
  
  .tree:after {
    content:"";
    position: absolute;
    border-right: 75px solid transparent;
    border-left: 75px solid transparent;
    border-bottom: 200px solid #107261;
    width:0;
    height:0;
    top:-180px;
    left:-65px;
  }
  
  .tree-details {
    position: absolute;
    width: 150px;
    height: 10px;
    background-color: #107261;
    border-radius: 50%;
    top:15px;
    left:-65px;
    z-index:1;
  }
  
  .tree-details:before {
    content:"";
    position: absolute;
    background-color: #0a897c;
    border-radius:50%;
    width: 5px;
    height: 5px;
    top:-10px;
    left:20px;
    box-shadow: 50px -50px #0a897c, 30px -70px #0a897c, 40px -130px #0a897c, 70px -5px #0a897c, 85px -75px #0a897c;
  }
  
  .lights {
    position: absolute;
    opacity:0;
    animation: light 2s linear infinite, drop 1s linear .5s forwards;
  }
  
  @keyframes light {
    0% {filter: drop-shadow(0 0 2px #fefae0) brightness(1);}
    50% {filter: drop-shadow(0 0 5px #fefae0) brightness(1.35);}
    100% {filter: drop-shadow(0 0 2px #fefae0) brightness(1);}
  }
  
  .row-one {
    position: absolute;
    background-color: #e9d8a6;
    border-radius:50%;
    width:10px;
    height:10px;
    top: -120px;
    left: -15px;
    box-shadow: 10px 10px #e9d8a6, 25px 15px #e9d8a6, 40px 18px #e9d8a6, 54px 15px #e9d8a6;
  }
  
  .row-two {
    position: absolute;
    background-color: #e9d8a6;
    border-radius:50%;
    width:10px;
    height:10px;
    left:-42px;
    top:-45px;
    box-shadow: 10px 10px #e9d8a6, 25px 17px #e9d8a6, 40px 24px #e9d8a6, 55px 28px #e9d8a6, 70px 30px #e9d8a6, 85px 29px #e9d8a6, 100px 25px #e9d8a6, 112px 20px #e9d8a6;
  }
  
  .snowfall {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
}

.snowflake {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #a0a0a0;
    border-radius: 50%;
    opacity: 0.8;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    animation: fall 3s linear infinite;
}

@keyframes fall {
    0% { transform: translateY(-100vh) rotate(0deg); }
    100% { transform: translateY(110vh) rotate(360deg); }
}

/* Add styles for additional snowflakes as needed */
.snowflake:nth-child(2) {
    left: 20vw;
    animation-duration: 7s; /* Adjust the animation duration as needed */
}

.snowflake:nth-child(3) {
    left: 40vw;
    animation-duration: 6s; /* Adjust the animation duration as needed */
}

.snowflake:nth-child(4) {
    left: 60vw;
    animation-duration: 8s; /* Adjust the animation duration as needed */
}

.snowflake:nth-child(5) {
  left: 80vw;
  animation-duration: 5s; /* Adjust the animation duration as needed */
}

.snowflake:nth-child(6) {
  left: 100vw;
  animation-duration: 4s; /* Adjust the animation duration as needed */
}

.snowflake:nth-child(7) {
  left: 30vw;
  animation-duration: 5s; /* Adjust the animation duration as needed */
}
.snowflake:nth-child(8) {
  left: 30vw;
  animation-duration: 7s; /* Adjust the animation duration as needed */
}

.snowflake:nth-child(9) {
  left: 70vw;
  animation-duration: 4s; /* Adjust the animation duration as needed */
}

.snowflake:nth-child(10) {
  left: 70vw;
  animation-duration: 8s; /* Adjust the animation duration as needed */
}

  .balls {
    position: absolute;
    background-color: #f34653;
    width:15px;
    height: 15px;
    border-radius:50%;
    z-index:2;
    opacity:0;
    box-shadow: -20px -55px #f34653, 25px -70px #f34653;
    animation: drop 1s linear 1s forwards;
  }
  
  .balls:before {
    content:"";
    position: absolute;
    background-color: #f34653;
    width:13px;
    height: 13px;
    border-radius:50%;
    left:-40px;
    top:-10px;
    box-shadow: 100px 10px #f34653, 25px -80px #f34653, 60px -120px #f34653;
  }
  
  .balls:after {
    content:"";
    position: absolute;
    background-color: #94d2bd;
    width:10px;
    height: 10px;
    border-radius:50%;
    top:-40px;
    left:40px;
    box-shadow: -35px -35px #94d2bd, -35px -105px #94d2bd, -60px 45px #94d2bd;
  }
  
  .star {
    position: absolute;
    display: block;
    width: 0px;
    height: 0px;
    border-right: 25px solid transparent;
    border-bottom: 17.5px solid #f9c819;
    border-left: 25px solid transparent;
    transform: rotate(-35deg);
    top:-190px;
    left:-9px;
    opacity:0;
    animation: dropStar 1s linear 1.5s forwards;
      }
  
  .star:before {
        border-bottom: 20px solid #f9c819;
        border-left: 7.5px solid transparent;
        border-right: 7.5px solid transparent;
        position: absolute;
        height: 0;
        width: 0;
        top: -12.5px;
        left: -17.5px;
        display: block;
        content: '';
        transform: rotate(-35deg);
      }
  
  .star:after {
        position: absolute;
        display: block;
        top: 0.75px;
        left: -26.25px;
        width: 0px;
        height: 0px;
        border-right: 25px solid transparent;
        border-bottom: 17.5px solid #f9c819;
        border-left: 25px solid transparent;
        transform: rotate(-70deg);
        content: '';
      }
     
      @keyframes drop {
    0% {transform: translateY(-470px) scaleY(0.9); opacity: 0;}
    5% {opacity: 1;}
    50% {transform: translateY(0px) scaleY(1); opacity: 1;}
    65% {transform: translateY(-15px) scaleY(0.9); opacity: 1;}
    75% {transform: translateY(-18px) scaleY(0.9); opacity: 1;}
    100% {transform: translateY(0px) scaleY(1); opacity: 1;}
  }
  
     @keyframes dropStar {
    0% {transform: translateY(-470px) scaleY(0.9) rotate(-35deg); opacity: 0;}
    5% {opacity: 1;}
    50% {transform: translateY(0px) scaleY(1) rotate(-35deg); opacity: 1;}
    65% {transform: translateY(-15px) scaleY(0.9) rotate(-35deg); opacity: 1;}
    75% {transform: translateY(-18px) scaleY(0.9) rotate(-35deg); opacity: 1;}
    100% {transform: translateY(0px) scaleY(1) rotate(-35deg); opacity: 1;}
    100% {transform: translateY(0px) scaleY(1) rotate(-35deg); opacity: 1;}
  }
  
  .shadow {
    position: absolute;
    border-radius: 50%;
    background-color: rgba(0,0,0,0.7);
    width: 50px;
    height: 20px;
    z-index:-1;
    top:50px;
    left:-10px;
    animation: scale .5s linear forwards;
  }
  
  @keyframes scale {
    0% {transform: scaleX(1);}
    100% {transform: scaleX(3);}
  }
  
  footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    color: white;
    background: dimgray;
    height: 70px;
  }
  
  footer h4 {
    padding-left: 25px;
    padding-top: 15px;
  }