/*--------------------------------------------------*/
/*	OVERRIDES
/*--------------------------------------------------*/

/*--------------------------------------------------*/
/*	GENERAL
/*--------------------------------------------------*/

.kbsc {
	color: #f4f4f4;

	line-height: 48px;
	text-align: center;
	font-family: monospace;
	line-height: 48px;
	font-size: 14px;
}

.kbsc .key,
.kbsc .key2,
.kbsc .key3 {
	display: inline-block;
	user-select: none;
	white-space: nowrap;

	width: 48px;
	height: 48px;

	color: #333;
	background: #f4f4f4;

	border: 1px solid #ccc;
	box-shadow: inset 0 -1px 0 #aaa;

	border-radius: 4px;
}

.kbsc .key2 {
	width: calc(48px * 2);
}

.kbsc .key3 {
	width: calc(48px * 6);
}

@media (prefers-color-scheme: dark) {
	.kbsc {
		color: #333;
	}

	.kbsc .key,
	.kbsc .key2,
	.kbsc .key3 {
		color: #f4f4f4;
		background: #333;

		border: 1px solid #555;
		box-shadow: inset 0 -1px 0 #000;
	}
}