#CircleText {
	font-family: "Roboto Mono", monospace;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 40px;
}
#CircleText span {
	position: relative;
	width: 250px;
	height: 250px;
	background: #eaeef0;
	border: 6px solid #eaeef0;
	box-shadow: -8px -8px 15px rgb(255 255 255 / 100%),
	8px 8px 25px rgb(0 0 0 / 15%);
	border-radius: 50%;
	overflow: hidden;
}
#CircleText span::before {
	content: "";
	position: absolute;
	inset: 40px;
	/* top: 40px;
	left: 40px;
	right: 40px;
	bottom: 40px; */
	background: #eaeef0;
	border: 2px solid #eaeef0;
	box-shadow: -8px -8px 25px rgb(255 255 255 / 100%),
	8px 8px 25px rgb(0 0 0 / 25%),
	inset 3px 3px 10px rgb(0 0 0 / 10%),
	inset -1px -1px 15px rgb(255 255 255 / 100%);
	border-radius: 50%;
	z-index: 1;
}
#CircleText span i {
	position: absolute;
	inset: 0;
	background: linear-gradient(#42abff, #ff4f8b, #ffeb3b);
	border-radius: 50%;
	filter: blur(5px);
	animation: circlecolor 1s linear infinite;
}
@keyframes circlecolor {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
#CircleText .text {
	position: absolute;
	width: 340px;
	height: 340px;
	border-radius: 50%;
	animation: circletext 25s linear infinite;
}
@keyframes circletext {
	0% {
		transform: rotate(360deg);
	}
	100% {
		transform: rotate(0deg);
	}
}
#CircleText .text b {
	position: absolute;
	left: 50%;
	display: block;
	transform-origin: 0 170px;
	font-weight: normal;
	font-size: 1.4em;
}