.background-element {
	position: fixed;
	/* z-index: -1; */
	/* opacity: .7; */
	
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.cell-container {
	width: 5rem;
	height: 5rem;
	/* border: 10px solid black; */
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-weight: bold;
	font-size: 2rem;
	background-color: transparent;
}


.cell {
	width: 4.7rem;
	height: 4.7rem;
	background-color: #333;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border-radius: 8%;
	opacity: .6;
  	transition: transform 0.1s, opacity 0.1s, background-color 0.1s;
}

.cell:hover {
	opacity: .8;
	transform: scale(1.05);
}



.cell.revealed {
	background-color: #000;
}
.cell.flag {
	background-color: #522;
}
.cell.flag-success {
	background-color: #242;
}
.cell.mine {
	/* background-color: #ff4444; */
}
.cell.number {
	color: #333;
}


/* https://www.30secondsofcode.org/css/s/mouse-cursor-gradient-tracking/ */
.mouse-cursor-gradient-tracking {
  --size: 0px;
  content: '';
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  background: radial-gradient(circle closest-side, purple, transparent);
  transform: translate(-50%, -50%);
  transition: width 0.5s ease, height 0.5s ease;
  z-index: -2;
  opacity: .7;
}

.mouse-cursor-gradient-tracking:hover::before {
  --size: 200px;
}