:root {
  /**彩色**/
  /*
    --custom-gradient-color-1: #a9c9ff;
    --custom-gradient-color-2: #ffbbec;
    --custom-gradient-color-3: #ffc3a0;
	*/

  --header-primary: color-mix(
    in oklab,
    hsl(0 calc(1 * 0%) 98.431% /1) 100%,
    #000 0%
  );
  --background-primary: color-mix(
    in oklab,
    hsl(240 calc(1 * 5.882%) 13.333% /1) 100%,
    #000 0%
  );
}

body {
  background: #000;
}

.animateGradient {
  animation: gradientUsernameAnimation 1.5s linear infinite;
}

.username {
  display: inline;
  flex-shrink: 0;
  font-size: 1rem;
  font-weight: 500;
  overflow: hidden;
  position: relative;
  vertical-align: baseline;
}

.convenienceGlowGradient {
  position: relative;
  z-index: 0;
}

.convenienceGlowGradient:after {
  background: inherit;
  -webkit-background-clip: text;
  background-clip: text;
  content: attr(data-text) / "";
  inset: 0;
  position: absolute;
  -webkit-text-fill-color: transparent;
  filter: blur(4px);
  opacity: 0.8;
  text-indent: 0;
  transition: opacity 0.1s ease-in-out;
  z-index: -1;
}

.threeColorGradient {
  background: linear-gradient(
    to right,
    var(--custom-gradient-color-1),
    var(--custom-gradient-color-2),
    var(--custom-gradient-color-1)
  );
}

.usernameGradient {
  -webkit-background-clip: text;
  background-clip: text;
  background-size: 100px auto;
  -webkit-text-fill-color: transparent;
}

@keyframes gradientUsernameAnimation {
  0% {
    background-position: 0;
  }
  to {
    background-position: 100px;
  }
}

.emoji {
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  background: none !important;
  color: inherit !important;
}