/* From Uiverse.io by Spacious74 */ 
.anim-dot-box {
	position: relative;
	border-radius: 10px;
}

.anim-dot {
	position: absolute;
	top: 22px;
	right: 16px;
	width: 5px;
	height: 5px;
	background-color: #ffffff82;
	box-shadow: 0 0 10px #ffffff;
	border-radius: 100px;
	z-index: 2;
	animation: moveDot 12s linear infinite;
}

	.anim-dot-second {
		animation: moveDot 21s linear infinite;
	}

	.anim-dot-third {
		animation: moveDot 30s linear infinite;
	}

	.anim-dot-in-line .anim-dot {
		top: 1px;
		right: 1px;
		left: 1px;
		width: 60px;
		height: 3px;
		background: linear-gradient(100deg, rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 30%) 45%, rgb(255 255 255 / 60%) 85%);
		animation: moveDotInLine 15s linear infinite;
	}

		@keyframes moveDot {
			0%,
			100% {
			top: 22px;
			right: 16px;
			}
			25% {
				top: 22px;
				right: calc(100% - 35px);
			}
			50% {
				top: calc(100% - 30px);
				right: calc(100% - 35px);
			}
			75% {
				top: calc(100% - 30px);
				right: 16px;
			}
		}

		@keyframes moveDotInLine {
			0%,
			100% {
			right: 1px;
			left: 1px;
			opacity: 1;
			}
			50% {
				right: calc(100% - 70px);
				left: calc(100% - 30px);
				opacity: 0.1;
			}
		}

.anim-bgr-change {
	background: rgba(255, 255, 255, 0.55);
	animation: changeBgr 6s infinite;
}

	@keyframes changeBgr {
		0%,
		100% {
		background: rgba(255, 255, 255, 0.55);
		}
		50% {
			background: rgba(210, 236, 206, 0.99);
		}
	}