body {
	background-color: rgb(251, 255, 252); /* Light green */
}

button {
	box-sizing: border-box;
	width: calc(25% - 2%);
	box-shadow: 0 .15em .25em rgba(0,0,0,.25);
	padding: 2em;
	margin: 1%;
	background-color: rgb(230, 250, 230); /* Very light green */
	border: 3px dotted rgb(173, 255, 193); /* Light green */
	border-radius: .5em;
	cursor: pointer;
	font-size: 16px;
	text-align: center;
	overflow: hidden;
	transition: all 0.3s ease;
	word-wrap: break-word;
	overflow-wrap: break-word;
	color: black;
	font-weight: bold;
}

button.tapped {
	background-color: rgb(60, 179, 113); /* Green (similar to MediumSeaGreen) */
	border-color: rgb(192, 192, 192); /* Silver */
	color: white;
}

@media (hover: hover) {
	button:hover {
		background-color: rgb(144, 238, 144); /* Light green (similar to LightGreen) */
		border-color: rgb(192, 192, 192); /* Silver */
		color: white;
	}
}

button:active, button:focus {
	background-color: gainsboro;
}

.selected {
	background-color: rgb(60, 179, 113); /* Green (similar to MediumSeaGreen) */
	color: white;
	border: 1px solid black;
}

.selected:hover {
	background-color: rgb(85, 205, 130); /* Brighter green */
	border: 1px solid rgb(192, 192, 192); /* Silver */
}