#clickable-areas-container {
	position: absolute;
	pointer-events: none;
}

.clickable-area {
	position: absolute;
	background-color: transparent;
	pointer-events: auto;
	cursor: pointer;
}

.clickable-area::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 20px;
	height: 20px;
	border-radius: 50%;
	animation: pulse 2s infinite;
}

@keyframes pulse {
	0% {
		width: 0;
		height: 0;
		opacity: 1;
		box-shadow: 0 0 0 0 var(--pulse-color);
	}

	70% {
		width: 50px;
		height: 50px;
		opacity: 0;
		box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
	}

	100% {
		width: 0;
		height: 0;
		opacity: 0;
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
	}
}