.ringbg:first-of-type {
	/* min-height: 250px; */
	height: calc(2.20 * var(--buffer));
	aspect-ratio: 1;
	display: grid;
	place-items: center;
}

.ringbg:last-of-type {
	display: grid;
	gap: 2rem;
}



.ring {
/* 	--character-width: 1ch; */
	--inner-angle: calc((360 / var(--char-count)) * 1deg);
	--character-width: 1;
/*	font-family: monospace;
*/	text-transform: uppercase;
	font-size: calc(var(--font-size, 1) * 1.45rem);
	position: relative;
	color:#FFFFFF;
	font-weight: 100px;
}
@media (prefers-reduced-motion: no-preference) {
  .ring {
  	-webkit-animation: spin 6s infinite linear;
  	        animation: spin 6s infinite linear;  
  }
  @-webkit-keyframes spin {
    to {
      rotate: -360deg;
    }
  }
  @keyframes spin {
    to {
      rotate: -360deg;
    }
  }
}

.char {
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 50%;
/* 	line-height: 1; */
	transform:
		translate(-50%, -50%)
		rotate(calc(var(--inner-angle) * var(--char-index)))
		translateY(var(--radius));
}