* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --sky-bg: 230, 60%, 15%;
  --sky-bg-mid: 230, 60%, 11%;
  --sky-bg-deep: 230, 60%, 5%;
  --sky-star: 230, 30%, 85%;
  --panel-0: rgba(8, 8, 22, 0.42);
  --panel-1: rgba(40, 40, 80, 0.36);
  --panel-2: rgba(14, 14, 36, 0.26);
  --text-0: rgba(255, 255, 255, 0.94);
  --text-1: rgba(235, 235, 255, 0.78);
  --text-2: rgba(229, 229, 255, 0.9);
  --stroke-0: rgba(255, 255, 255, 0.06);
  --stroke-1: rgba(255, 255, 255, 0.18);
  --shadow-0: rgba(0, 0, 0, 0.55);
  --grad-a: hsl(208, 38%, 85%);
  --grad-b: hsl(230, 30%, 78%);
  --grad-c: hsl(252, 36%, 88%);
  --star-hex: #d8dcf0;
  --line-hex: #e6ebff;
}

html,
body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  background: radial-gradient(
    circle at top,
    hsl(var(--sky-bg)) 0,
    hsl(var(--sky-bg-mid)) 45%,
    hsl(var(--sky-bg-deep)) 100%
  );
  color: var(--text-0);
  overflow-x: hidden;
}

body.is-loading {
  overflow: hidden;
}

body {
  position: relative;
  display: flex;
  flex-direction: column;
  font-family: "LXGW WenKai";
  font-weight: normal;
}

.fall-heart {
  position: fixed;
  pointer-events: none;
  z-index: 9;
  font-size: 22px;
  line-height: 1;
  transform: translate(-50%, -50%) translateY(0) rotate(var(--rot, 0deg));
  opacity: 0.95;
  will-change: transform, opacity;
  animation: fall-heart 1500ms linear forwards;
}

@keyframes fall-heart {
  0% {
    transform: translate(-50%, -50%) translateY(0) rotate(var(--rot, 0deg));
    opacity: 0.95;
  }
  70% {
    opacity: 0.95;
  }
  100% {
    transform: translate(-50%, -50%) translateY(var(--dy, 320px))
      rotate(calc(var(--rot, 0deg) + var(--spin, 0deg)));
    opacity: 0;
  }
}

#particles-js {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

#particles-js canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}