body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: radial-gradient(circle at bottom, rgba(255, 255, 255, 0.288), transparent 50%), 
                linear-gradient(to bottom, #00010f, #010118);
    height: 100vh;
  }

  .scene {
    height: 100vh;
    width: 100vw;
    position: relative;
    overflow: hidden;
  }

  .rooftop-container {
    position: absolute;
    bottom: -1%;
    width: 200px;
    height: 150px;
    z-index: 2;
  }

  .rooftop {
    width: 100%;
    height: 100%;
    background-image: url('https://cloud-clvhnrjcl-hack-club-bot.vercel.app/0image.png');
    background-size: cover;
    background-position: center bottom;
  }

  .chimney {
    position: absolute;
    bottom: 32px;
    left: 23%;
    width: 20px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0);
    z-index: -1000;
  }

  .snow-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
  }

  @keyframes fall {
    0% {
      transform: translateX(0) translateY(-10vh) rotate(0deg);
      opacity: 1;
    }
    50% {
      transform: translateX(calc(-10vw + 20vw * var(--random-x))) translateY(50vh) rotate(180deg);
      opacity: 0.8;
    }
    100% {
      transform: translateX(calc(-20vw + 40vw * var(--random-x))) translateY(110vh) rotate(360deg);
      opacity: 0;
    }
  }

  .snowflake {
    position: absolute;
    top: -30px;
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    animation: fall linear infinite;
  }

  .smoke {
    position: absolute;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    animation: smoke 3s infinite;
  }

  @keyframes smoke {
    0% {
      transform: translateY(0) scale(1);
      opacity: 0.8;
    }
    100% {
      transform: translateY(-200px) scale(4);
      opacity: 0;
    }
  }

  .message {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 20%;
    font-family: 'Arial', sans-serif;
    font-size: 64px;
    font-weight: bold;
    color: #ff0000;
    text-shadow: 0 0 10px #fff,
                 0 0 20px #fff,
                 0 0 30px #ff0000,
                 0 0 40px #ff0000,
                 0 0 50px #ff0000,
                 0 0 60px #ff0000;
    animation: messageFloat 15s linear infinite;
    z-index: 1001;
  }

  @keyframes messageFloat {
    0% {
      transform: translateX(100%) translateY(0) scale(1);
      filter: hue-rotate(0deg);
    }
    25% {
      transform: translateX(25%) translateY(-20px) scale(1.1);
      filter: hue-rotate(90deg);
    }
    50% {
      transform: translateX(-25%) translateY(0) scale(1);
      filter: hue-rotate(180deg);
    }
    75% {
      transform: translateX(-75%) translateY(-20px) scale(1.1);
      filter: hue-rotate(270deg);
    }
    100% {
      transform: translateX(-100%) translateY(0) scale(1);
      filter: hue-rotate(360deg);
    }
  }

  .santa {
    position: absolute;
    top: 15rem;
    left: 0rem;
    animation: santaJump 15s 0s infinite;
    z-index: 99999;
  }

  .santa__head {
    position: absolute;
    top: 5rem;
    left: 0rem;
    z-index: 178;
    animation: headMove 2s infinite;
  }
  
  .santa__head--face {
    width: 9rem;
    height: 4rem;
    background-color: #ffddbe;
    position: absolute;
    border-radius: 5rem 4rem 4rem 4rem;
    left: 50.4rem;
    top: 26.4rem;
    transform: skew(-19deg, 10deg);
  }
  
  .santa__head--eye-r {
    width: 2rem;
    height: 1rem;
    position: absolute;
    top: 27.9rem;
    left: 51.1rem;
    box-shadow: inset -1px 4px black;
    border-radius: 50%;
  }
  
  .santa__head--eye-l {
    width: 2rem;
    height: 1rem;
    position: absolute;
    top: 28.5rem;
    left: 55.5rem;
    box-shadow: inset -1px 4px black;
    border-radius: 50%;
    transform: rotate(12deg);
  }

  .santa__head--nose {
    width: 2rem;
    height: 1.7rem;
    position: absolute;
    top: 29rem;
    left: 52.7rem;
    background-color: #e79f9f;
    border-radius: 50%;
  }

  .santa__head--beard {
    width: 9.8rem;
    height: 7.6rem;
    position: absolute;
    top: 28.1rem;
    background-color: #ffffff;
    border-radius: 9rem 0rem 18rem 11rem;
    left: 49.4rem;
    transform: rotate(6deg);
  }

  .santa__head--backofhead {
    width: 10rem;
    height: 10rem;
    background-color: #d1d3c7;
    position: absolute;
    border-radius: 5rem 4rem 5rem 4rem;
    left: 50rem;
    top: 25.8rem;
    transform: skew(-19deg, 10deg);
  }

  .santa__hat {
    position: absolute;
    left: 0rem;
    top: 0rem;
    z-index: 200;
  }
  
  .santa__hat--fluffy {
    width: 8.2rem;
    height: 2.7rem;
    background-color: #fff;
    position: absolute;
    top: 24rem;
    left: 50.5rem;
    border-radius: 3rem 4rem 0rem 1rem;
  }

  .santa__hat--fluffy:after {
    content: '';
    width: 8.2rem;
    height: 2.7rem;
    background-color: #fff;
    position: absolute;
    top: 0.4rem;
    left: 1.6rem;
    border-radius: 3rem 9rem 0rem 0rem;
    transform: skewY(10deg);
  }

  .santa__hat--fluffy:before {
    content: '';
    width: 3.5rem;
    height: 2.7rem;
    background-color: #fff;
    position: absolute;
    top: 1rem;
    left: 7.6rem;
    border-radius: 50rem;
    transform: skewY(27deg);
  }

  .santa__hat--base {
    width: 6.6rem;
    height: 4rem;
    background: #bd4443;
    position: absolute;
    top: 21.9rem;
    left: 52.3rem;
    border-radius: 9rem 3rem 6rem 4rem;
    transform: skew(-33deg, 10deg);
  }
  
  .santa__hat--fluffy-aux {
    width: 2rem;
    height: 2rem;
    background: white;
    position: absolute;
    top: 23.4rem;
    left: 62.4rem;
    border-radius: 50%;
  }

  .santa__hat--base-aux {
    width: 6.6rem;
    height: 2rem;
    background: #bd4443;
    position: absolute;
    top: 22.7rem;
    left: 55.3rem;
    border-radius: 9rem 3rem 6rem 4rem;
    transform: skew(-56deg, 25deg);
    animation: hatMove 2s infinite;
  }

  .santa__body {
    position: absolute;
    top: 0rem;
    animation: bodyMove 3s infinite;
  }

  .santa__body__chest {
    z-index: 50;
    position: absolute;
    top: 0rem;
    left: 0rem;
  }

  .santa__body__chest--base {
    width: 12.5rem;
    height: 10rem;
    background-color: #bd4443;
    position: absolute;
    top: 33rem;
    left: 49.5rem;
    border-radius: 7rem 5rem 2rem 3rem;
    transform: rotate(-4deg);
  }

  .santa__body__chest--belt {
    width: 13.2rem;
    height: 2.5rem;
    background-color: #0c0d32;
    position: absolute;
    top: 38.3rem;
    left: 49.3rem;
    border-radius: 3rem 4rem 2rem 2rem;
    transform: rotate(2deg);
  }

  .santa__body__chest--belt:after {
    content: '';
    width: 2.3rem;
    height: 2rem;
    border-radius: 1rem;
    border: 1rem solid #f2cc54;
    position: absolute;
    left: 1.7rem;
    top: -0.6rem;
  }

  .santa__body__chest--aux {
    width: 13rem;
    height: 4rem;
    position: absolute;
    top: 38.6rem;
    left: 49.4rem;
    border-radius: 50%;
    transform: rotate(1deg);
    box-shadow: 1px 16px white;
  }

  .santa__body__arm--r {
    width: 4rem;
    height: 6rem;
    position: absolute;
    top: 33.8rem;
    background-color: #953b3a;
    left: 48.3rem;
    border-radius: 50%;
    transform: rotate(45deg);
    animation: rightArmMove 2s 0s infinite;
  }

  .santa__body__arm--r:before {
    content: '';
    width: 2rem;
    height: 3rem;
    position: absolute;
    top: 3rem;
    background-color: #953b3a;
    left: 0rem;
    transform: rotate(1deg);
  }

  .santa__body__arm--r:after {
    content: '';
    width: 3.3rem;
    height: 3.3rem;
    position: absolute;
    top: 2.7rem;
    background-color: #ffffff;
    left: -2rem;
    transform: rotate(-1deg);
    border-radius: 50%;
  }
  
  .santa__body__arm--l {
    width: 4.4rem;
    height: 6rem;
    position: absolute;
    top: 33.8rem;
    background-color: #bd4443;
    left: 58.3rem;
    border-radius: 50%;
    transform: rotate(12deg);
    z-index: 160;
  }

  .santa__body__arm--l:before {
    content: '';
    width: 2rem;
    height: 3rem;
    position: absolute;
    top: 3rem;
    background-color: #bd4443;
    left: 0rem;
    transform: rotate(1deg);
  }

  .santa__body__arm--l:after {
    content: '';
    width: 3.3rem;
    height: 3.3rem;
    position: absolute;
    top: 2.7rem;
    background-color: #ffffff;
    left: -2rem;
    transform: rotate(-1deg);
    border-radius: 50%;
  }
  
  .santa__body__hand--r {
    width: 3rem;
    height: 3.5rem;
    background-color: #101130;
    position: absolute;
    top: 33.1rem;
    left: 44.8rem;
    border-radius: 50%;
    animation: rightHandMove 2s 0s infinite;
  }

  .santa__body__hand--r:before {
    content: '';
    width: 2rem;
    height: 2rem;
    background-color: #101130;
    position: absolute;
    top: 0.5rem;
    left: 1.5rem;
    border-radius: 50%;
  }
  
  .santa__body__hand--l {
    width: 3rem;
    height: 3.5rem;
    background-color: #101130;
    position: absolute;
    top: 35.1rem;
    left: 55.8rem;
    border-radius: 50%;
    z-index: 180;
  }

  .santa__body__hand--l:before {
    content: '';
    width: 2rem;
    height: 2rem;
    background-color: #101130;
    position: absolute;
    top: 0.8rem;
    left: -0.3rem;
    border-radius: 50%;
  }

  .santa__body__leg {
    position: absolute;
    top: 0rem;
    left: 0rem;
    z-index: 10;
  }

  .santa__body__leg--r {
    width: 4.4rem;
    height: 4rem;
    background-color: #953b3a;
    position: absolute;
    top: 42.2rem;
    left: 51.1rem;
    border-radius: 1rem 1rem 2rem 2rem;
    transform: rotate(26deg);
    animation: rightLegMove 2s 0s infinite;
  }
  
  .santa__body__leg--l {
    width: 4.4rem;
    height: 4.5rem;
    background-color: #bd4443;
    position: absolute;
    top: 41.7rem;
    left: 56.1rem;
    border-radius: 1rem 1rem 2rem 4rem;
    transform: rotate(-37deg);
    animation: leftLegMove 2s 0s infinite;
  }

  .santa__body__foot {
    position: absolute;
    top: 0rem;
    left: 0rem;
    z-index: 5;
  }

  .santa__body__foot--r {
    width: 2.8rem;
    height: 3rem;
    background-color: #10112f;
    position: absolute;
    top: 45.2rem;
    left: 50.7rem;
    border-radius: 0rem 0rem 1rem 0rem;
    transform: rotate(26deg);
    animation: rightFootMove 2s 0s infinite;
  }

  .santa__body__foot--r:after {
    content: '';
    width: 2rem;
    height: 2rem;
    background-color: #10112f;
    position: absolute;
    top: 1rem;
    left: -1.4rem;
    border-radius: 1rem 0rem 0rem 1rem;
    transform: rotate(0deg);
  }
  
  .santa__body__foot--l {
    width: 2.5rem;
    height: 3rem;
    background-color: #10112f;
    position: absolute;
    top: 42.8rem;
    left: 60.3rem;
    border-radius: 0rem 0rem 1rem 0rem;
    transform: rotate(-89deg);
    animation: leftFootMove 2s 0s infinite;
  }

  .santa__body__foot--l:after {
    content: '';
    width: 2rem;
    height: 2rem;
    background-color: #10112f;
    position: absolute;
    top: 1rem;
    left: -1.4rem;
    border-radius: 1rem 0rem 0rem 1rem;
    transform: rotate(0deg);
  }
  
  .santa__bag {
    width: 9rem;
    height: 8rem;
    background-color: #bf2423;
    position: absolute;
    top: 29.5rem;
    left: 60.5rem;
    border-radius: 0rem 5rem 8rem 5rem;
    transform: rotate(-70deg) scaleY(1.5);
    box-shadow: inset 3px -12px 0px #a5201f;
    z-index: 177;
    animation: bagMove 1.3s infinite;
  }

  .santa__bag--aux {
    width: 2rem;
    height: 8rem;
    background-color: #bf2423;
    position: absolute;
    top: 32.5rem;
    left: 57.7rem;
    border-radius: 0rem 5rem 8rem 1rem;
    transform: rotate(67deg);
    z-index: 177;
  }

  .santa {
position: absolute;
top: 15rem;
left: 0rem;
animation: santaJump 15s 0s infinite;
z-index: 99999;
}

@keyframes santaJump {
0% {
  left: 60rem;
  top: 15rem;
  transform: scale(1, 1);
}

50% {
  left: 60rem;
  top: -1rem;
  transform: scale(1, 1);
}

100% {
  left: 60rem;
  top: 15rem;
  transform: scale(1, 1);
}
}

@keyframes rightLegMove {
0% {
  left: 51.1rem;
  transform: rotate(26deg);
  background-color: #953b3a;
}

50% {
  left: 56rem;
  transform: rotate(-10deg);
  background-color: #bd4443;
}

100% {
  left: 51.1rem;
  transform: rotate(26deg);
  background-color: #953b3a;
}
}

@keyframes leftFootMove {
0% {
  top: 42.8rem;
  left: 60.3rem;
  transform: rotate(-89deg);
}

50% {
  top: 45.8rem;
  left: 50.8rem;
  transform: rotate(10deg);
}

100% {
  top: 42.8rem;
  left: 60.3rem;
  transform: rotate(-89deg);
}
}

@keyframes leftLegMove {
0% {
  left: 56.1rem;
  transform: rotate(-37deg);
  background-color: #bd4443;
}

50% {
  left: 50.1rem;
  transform: rotate(32deg);
  background-color: #953b3a;
}

100% {
  left: 56.1rem;
  transform: rotate(-37deg);
  background-color: #bd4443;
}
}

@keyframes rightFootMove {
0% {
  top: 45.2rem;
  left: 50.7rem;
  transform: rotate(26deg);
}

50% {
  top: 43.2rem;
  left: 59.7rem;
  transform: rotate(-81deg);
}

100% {
  top: 45.2rem;
  left: 50.7rem;
  transform: rotate(26deg);
}
}

@keyframes bagMove {
0% {
  transform: rotate(-70deg) scaleY(1.5);
  top: 29.5rem;
}

50% {
  transform: rotate(-72deg) scaleY(1.5);
  top: 29.4rem;
}

100% {
  transform: rotate(-70deg) scaleY(1.5);
  top: 29.5rem;
}
}

@keyframes headMove {
0% {
  top: 0rem;
}

50% {
  top: 0.1rem;
}

100% {
  top: 0rem;
}
}

@keyframes hatMove {
0% {
  transform: skew(-56deg, 25deg);
}

50% {
  transform: skew(-60deg, 25deg);
}

100% {
  transform: skew(-56deg, 25deg);
}
}

@keyframes bodyMove {
0% {
  top: 0rem;
}

50% {
  top: 0.2rem;
}

100% {
  top: 0rem;
}
}

@keyframes rightHandMove {
0% {
  top: 33.1rem;
}

50% {
  top: 35.1rem;
}

100% {
  top: 33.1rem;
}
}

@keyframes rightArmMove {
0% {
  left: 48.3rem;
  transform: rotate(45deg);
  top: 33.8rem;
}

50% {
  left: 48.3rem;
  transform: rotate(30deg);
  top: 35rem;
}

100% {
  left: 48.3rem;
  transform: rotate(45deg);
  top: 33.8rem;
}
}