* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background-color: #000;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", "PingFang SC", "Microsoft Yahei", sans-serif;
}

#bg-holder {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

#bg-holder img {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  height: auto;
  max-width: 100vw;
  max-height: none;
  object-fit: contain;
  pointer-events: none;
}

.btn {
  position: absolute;
  z-index: 2;
  display: inline-block;
  transform: translate(-50%, -50%);
  touch-action: manipulation;
}

.btn img {
  display: block;
  width: var(--btn-w, 240px);
  height: auto;
  max-width: 90vw;
  user-select: none;
  -webkit-user-drag: none;
  image-rendering: auto;
}

.btn:active {
  transform: translate(-50%, -50%) scale(0.98);
}

#snowflake {
  position: fixed;
  left: 50%;
  top: 0;
  transform: translate(-50%, -100%);
  width: var(--snow-w, 64px);
  height: auto;
  z-index: 9999;
  pointer-events: none;
  animation: fallLoop var(--snow-duration, 10s) linear infinite;
  will-change: transform;
}

@keyframes fallLoop {
  0% {
    transform: translate(-50%, -100%);
    opacity: 0.9;
  }

  5% {
    opacity: 1;
  }

  100% {
    transform: translate(-50%, calc(100vh + var(--snow-end, 80px)));
  }
}


@media (max-width: 360px) {
  .btn img {
    max-width: 80vw;
  }
}

.btn,
.btn:focus,
.btn:active,
.btn img,
a.btn,
a.btn:focus,
a.btn:active {
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
}

.btn img {
  border: 0;
  -webkit-user-drag: none;
  user-select: none;
}

a,
a:focus,
a:active {
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
}