.header {
	background-color: #699ACF;
	color: white;
	width: 100%;
	text-align: center;
	padding: 20px;
}

.letter {
	font-size: 30px;
	font-weight: 500;
	width: 15px;
	color: #8a8a8a;
	margin-right: 25px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.con {
	display: flex;
	justify-content: center;
	align-items: center;

}

.button-container {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	/* border: 1px solid red; */

}

/* every other .button-container blue background */
.button-container:nth-child(2n) {
	background-color: #D0DEEF;
}

/* every 1 3 5 and so on .button-container darker blue */
.button-container:nth-child(2n+1) {
	background-color: #FBFCFE;
}

.audio-grid:nth-child(2n) {
	background-color: #D0DEEF;
}

.audio-grid:nth-child(2n+1) {
	background-color: #FBFCFE;
}


.play-button.spinning::after {
	color: green;
}

.audio-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: repeat(12, 1fr);
	grid-auto-flow: column;
	grid-gap: 10px;


}



.play-button {
	background: transparent;
	cursor: pointer;
	border: none;
	display: flex;
}

/* after play-button, a blue play error icon */
.play-button:after {
	content: "\25B6";
	color: #699ACF;
	text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
	font-size: 50px;
	display: inline;
}

.play-button.played::after {
	color: #A9A9A9; /* DarkGray */
}


.letter-button-container {
	display: flex;
}