.tes-character-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.tes-character-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 11% 20%, rgba(46, 155, 217, .22), transparent 27%),
    radial-gradient(circle at 81% 14%, rgba(255, 203, 89, .24), transparent 23%),
    radial-gradient(circle at 18% 84%, rgba(93, 164, 117, .2), transparent 27%),
    radial-gradient(circle at 91% 76%, rgba(205, 82, 82, .17), transparent 25%);
}

.tes-character-bg img {
  position: absolute;
  width: clamp(78px, 10vw, 128px);
  height: auto;
  opacity: .16;
  filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .13));
  transform-origin: center;
}

.tes-character-bg img:nth-child(1) { left: 1vw; top: 44vh; transform: rotate(-10deg); }
.tes-character-bg img:nth-child(2) { right: 2vw; top: 16vh; transform: rotate(9deg); opacity: .18; }
.tes-character-bg img:nth-child(3) { left: 7vw; bottom: 7vh; transform: rotate(7deg); opacity: .14; }
.tes-character-bg img:nth-child(4) { right: 8vw; bottom: 9vh; transform: rotate(-8deg); opacity: .16; }
.tes-character-bg img:nth-child(5) { left: 50vw; top: 70vh; transform: translateX(-50%) rotate(4deg); opacity: .09; }
.tes-character-bg img:nth-child(6) { right: 29vw; top: 35vh; transform: rotate(-5deg); opacity: .1; }

body > header,
body > main,
body > footer {
  position: relative;
  z-index: 1;
}

@media (max-width: 760px) {
  .tes-character-bg img {
    width: 70px;
    opacity: .09;
  }

  .tes-character-bg img:nth-child(1),
  .tes-character-bg img:nth-child(2),
  .tes-character-bg img:nth-child(3),
  .tes-character-bg img:nth-child(5),
  .tes-character-bg img:nth-child(6) {
    display: none;
  }
}