.alphabet-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 3px;
	padding: 0px;
	background: none;
}

.alphabet-button {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 40px;
	height: 40px;
	background: rgba(119, 170, 1, .55);
	text-decoration: none;
	border: 1px solid #fff;
	border-radius: 6px;
	color: #fff;
	font-weight: 400;
	font-size: 16px;
	transition: background .3s ease, color .3s ease;
}

.alphabet-button:hover {
	background-color: #fff;
	color: #77aa01;
	border: 1px solid #77aa01;
}

@media (max-width: 768px) {
	.alphabet-button {
		width: 36px;
		height: 36px;
		font-size: 14px;
	}
}

@media (max-width: 480px) {
	.alphabet-button {
		width: 32px;
		height: 32px;
		font-size: 12px;
	}
}