styles.css

html {
	font-size: 15px;
	font-family: 'Raleway', sans-serif;
	background: #7c7c7c;
}

.letters {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 35vh 35vh 35vh;
    grid-gap: 10px;
}

.letter {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    max-width: 100%;
    border: 2px solid #7c7c7c;
    background-color: transparent;
    transition: all 0.07s;
}

.playing {
	background-color: #424242!important;
	transform: scale(1.1);
	color: #fff;
	border-color: #ff6f00;
	box-shadow: 2px 0px 36px 5px #ff6f00;
-webkit-box-shadow: 2px 0px 36px 5px #ff6f00;
-moz-box-shadow: 2px 0px 36px 5px #ff6f00;
}

div[data-key='68']{
	background-color: #ce93d8;
}

div[data-key='82']{
	background-color: #f48fb1;
}

div[data-key='85']{
	background-color: #ff8a80;
}

div[data-key='77']{
	background-color: #90caf9;
}

div[data-key='66']{
	background-color: #b2ebf2;
}

div[data-key='69']{
	background-color: #a7ffeb;
}

div[data-key='65']{
	background-color: #b9f6ca;
}

div[data-key='84']{
	background-color: #dcedc8;
}

div[data-key='83']{
	background-color: #ffecb3;
}

kbd {
    display: block;
    font-size: 25px;
    font-family: 'Arvo', serif;
}

.sound {
	text-transform: uppercase;
}

@media(max-width:767px){
	.letters{
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    	grid-template-rows: none;
	}

	.letter {
		height: 200px;
	}
}

@media(max-width:500px){
	.letters{
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	}

	.letter {
		height: 150px;
	}	
}