.keyboard {
	text-align: center;
	display: flex;
	flex-direction: column;
	text-transform: uppercase;
	/* font-size: 2.5vw; */
	font-size: 1.25vw;
	color: black;
	aspect-ratio: 3 / 1;
}

.key {
	width: 6%;
	/* line-height: 6vw; */
}

.key,
.arrows {
	/* height: 2.5em; */
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}

.arrow,
.key {
	background-color: #ccc;
	border-radius: 0.25em;
}

.mid {
	width: 7.5%;
}

.wide {
	width: 10%;
}

.row {
	display: flex;
	flex-grow: 1;
}

.keyboard,
.row,
.arrows {
	gap: 0.4vw;
	gap: 0.4vw;
}

.grow {
	flex-grow: 1;
}

.tab {
	flex-grow: 0.5;
}

.leftShift {
	flex-grow: 0.8;
}

.arrows {
	flex-grow: 0.25;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	display: grid;
	text-align: center;
}

.arrow {
	height: 100%;
}

.up {
	grid-column: 2;
	grid-row: 1;
}

.left {
	grid-column: 1;
	grid-row: 2;
}

.right {
	grid-column: 3;
	grid-row: 2;
}

.down {
	grid-column: 2;
	grid-row: 2;
}

.dim {
	opacity: 0.35;
}

.whiteNote {
	background-color: #ccc;
}

.blackNote {
	background-color: #000;
	color: #fff;
}

.octaveUp {
	background-color: #beb;
}

.octaveDown {
	background-color: #ebb;
}

.keyboard label {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	font-size: 0.75em;
	margin-bottom: 0.1em;
	color: #777;
}

.blackNote label {
	color: #ccc;
}