style.css

:root {
	--white-key-height: 150px;
	--white-key-width: 30px;
	--black-key-ratio: 0.6;
	--key-border-width: 1px;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0 auto;
	font-family: Helvetica;

	background-color: #fff;
	user-select: none;
}

canvas {
	z-index: 0;
    position: absolute;
}

#margin {
	position: absolute;
	bottom: 10px;
	right: 10px;

	font-size: 13px;
	color: #999;
	letter-spacing: 1.5px;
	font-variant-caps: all-small-caps;
}


#piano {
	z-index: 1;
	position: absolute;
	display: flex;
	bottom: 10%;
	left: 50%;
	margin: 0;
	padding: 0;
	transform: translateX(-50%);

	list-style:none;
}

#piano li {
	transition: background-color 0.1s;
}

.white-key {
	z-index: 1;
	width: var(--white-key-width);
	height: var(--white-key-height);

	background-color: white;
	border: solid var(--key-border-width) black;
	/* To prevent double borders of double width */
	border-left: none;
}
.white-key:hover {
	background-color: #bbb;
}

.key-left-end {
	border: solid var(--key-border-width) black;
}

.black-key {
	z-index: 2;
	width: calc(var(--white-key-width) * var(--black-key-ratio));
	height: calc(var(--white-key-height) * var(--black-key-ratio));

	/* Center between white keys by accounting for border width */
	margin-right: calc(-1 * var(--black-key-ratio) * var(--white-key-width));
	transform: translateX(calc(-50% - var(--key-border-width)));

	background-color: black;
	border: solid var(--key-border-width) black;
}
.black-key:hover {
	background-color: #555;
}