keyboard-controller > div {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 2;
	background-color: white;
	border-top: 1px solid black;
	padding: 0.2rem 0rem 0.85rem 0rem;
	user-select: none;

	/* Prevent browser zooming on double click */
	touch-action: none;
}

	qwerty-rail > div {
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 1rem;
		background-color: black;
		cursor: grab;
	}

	qwerty-rail > div.grabbed {
		cursor: grabbing;
	}
	
	qwerty-handle > div {
		text-align: center;
		font-size: 0.6rem;
		background-color: yellow;
	}

	keyboard-keys > div {
		position: relative;
		max-height: 40vh;
		height: 5rem;
	}

		keyboard-key > button {
			position: absolute;
			cursor: pointer;
			border: 1px solid black;
			border-collapse: collapse;
			padding: 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: end;
		}

		keyboard-key > button.white-key {
			background-color: white;
			height: 100%;
			z-index: 10;
			color: black;
		}

		keyboard-key > button.black-key {
			background-color: black;
			height: 70%;
			z-index: 20;
			color: white;
		}

		keyboard-key > button:hover {
			background-color: lightgray;
		}

		keyboard-key > button.key-pressed {
			background-color: gray;
		}