@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@900&display=swap');

.glowing-element{
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 55px;
	font-family: 'Poppins', sans-serif;
	-webkit-text-stroke: 2px gray;
	color: transparent;
	background-color: #050505;
}

ul {
	position: relative;
	display: flex;
	margin-left: 0;
	padding-left: 0;
}

li {
	list-style: none;
}

input[type="checkbox"]{
	position: absolute;
	opacity: 0;
	cursor: pointer;
	z-index: 100;
}

input[type="checkbox"]:checked ~ div{
	color: yellow;
	text-shadow: 0 0 15px yellow, 0 0 25px yellow;
	animation: glow 3s linear infinite;
}

.glowing-empty-element, .glowing-element div, input[type="checkbox"]{
	height: 80px;
	width: 60px;
}

.glowing-element-inline, .glowing-element-inline div{
	width: auto;
}

.glowing-element-inline input[type="checkbox"]{
	width: 100%;
}

.glowing-element div{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	margin: 0 4px;
	border-radius: 20px;
}

@keyframes glow {
	0% {
		filter: hue-rotate(0deg);
	}
	100% {
		filter: hue-rotate(360deg);
	}
}