@charset "utf-8";
/* CSS Document */
body{ background:#000}
.grid-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
	/* grid-auto-rows: minmax(50px, auto);*/
	overflow: hidden;
	z-index: -1;
}
.grid-item {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.05);
	transition: all 0.5s ease;
	position: relative;
}
.grid-item:hover {
	background: rgba(191, 191, 191, 0.3);
	transform: scale(0.9);
	box-shadow: 0 0 15px rgba(191, 191, 191, 0.5);
	z-index: 2;
}
.grid-item::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: radial-gradient(circle at center, transparent 40%, rgba(191, 191, 191, 0.1) 100%);
	opacity: 0;
	transition: opacity 0.3s ease;
}
.grid-item:hover::before {
	opacity: 1;
}
.pulse {
	animation: pulseAnimation 4s infinite;
}
 . @media (max-width: 768px) {
 .grid-container {
 grid-template-columns: repeat(auto-fill, minmax(30px, 0.5fr));
}
}