@layer components {
  .dm-fun-signature {
    --size: 5rem;
    --sign-color: #ff0000aa;
    --rotate: -30deg;
    --opacity: 0.618;
    width: var(--size);
    height: var(--size);
    border: calc(var(--size) * 0.05) solid var(--sign-color);
    border-radius: 50%;
    position: absolute;
    opacity: var(--opacity);
    transform: rotate(var(--rotate));
    right: var(--right, 2rem);
    top: var(--top, 2rem);
  }
  .dm-fun-signature::before {
    position: absolute;
    inset: 2%;
    border: calc(var(--size) * 0.01) solid var(--sign-color);
    border-radius: 50%;
    content: " ";
  }
  .dm-fun-signature::after {
    position: absolute;
    inset: 5%;
    border-radius: 50%;
    content: attr(data-content);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--sign-color);
    font-size: calc(var(--size) * 0.3);
  }
}