html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  overflow-x: hidden;
  font-family: "Avenir Next", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color: var(--text-main);
  background-image:
    var(--page-background-extra, none),
    radial-gradient(circle at 10% 8%, rgba(161, 202, 255, 0.5), transparent 30%),
    radial-gradient(circle at 90% 92%, rgba(157, 224, 216, 0.42), transparent 30%),
    linear-gradient(145deg, var(--bg-1), var(--bg-2) 58%, var(--bg-3));
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.22) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.8), transparent 78%);
  mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.8), transparent 78%);
  pointer-events: none;
}