:root {
	--cols: 3;
	--rows: 3;
	--size: 10em;
}


body {
	min-height: 100vh;
	background: #fff;
	
	display: grid;
	place-items: center;
	text-align: center;
}

* {
	padding: 0;
	margin: 0;
}

/* Reserve space while .drumpad is loading …*/
#app {
	width: calc(var(--cols) * var(--size));
	height: calc(var(--rows) * var(--size));
}

section {
	display: grid;
	gap: 1em;
}

.drumpad {
	width: calc(var(--cols) * var(--size));
	height: calc(var(--rows) * var(--size));
	list-style: none;
	
	display: grid;
	grid-template-rows: repeat(var(--rows), 1fr);
	grid-template-columns: repeat(var(--cols), 1fr);
	gap: 1em;
}

.drumpad li {
	position: relative;
}

.drumpad li::before,
.drumpad li::after {
	display: block;
	position: absolute;
	pointer-events: none;
}

.drumpad li::after {
	top: 50%;
	left: 50%;
	content: attr(data-title);
	transform: translate3d(-50%, -50%, 0);
	font-size: 1.5em;
}

.drumpad li::before {
	content: attr(data-keycode);
	bottom: 1em;
	left: 0;
	right: 0;
	height: 1em;
	font-size: 0.7em;
	font-style: italic;
}

.drumpad audio {
	border: 1px solid #333;
	width: 100%;
	height: 100%;
	background: var(--color, #ccc);
	border-radius: 0.2em;
}

.drumpad audio::-webkit-media-controls {
	display: none;
}

/* Not Supported. See https://bugs.chromium.org/p/chromium/issues/detail?id=1176947 */
.drumpad audio:playing {
	background: lime;
}