.keyboard {display: inline-block;font-size: 0.45em; margin: 2em;}

.keyboard span {float: left;width: 2em;height: 2em;margin: 2px; background:#FFF1; color:#FFF9; border-radius:0.3em;}

.keyboard span {display:flex;justify-content:center; align-items:center;}

.keyboard span:nth-of-type(14){clear: both;margin-left: 3em}
.keyboard span:nth-of-type(27) {clear: both;margin-left: 3.5em}
.keyboard span:nth-of-type(38) {clear:both;width: 4em}
.keyboard span:nth-of-type(49) {width: 4em}
.keyboard span:nth-of-type(50) {clear: both;margin-left: 8em;width: 12em}

.keyboard span.active{background:#FFF4;}

.keyboard span.highlight{background:var(--groen);color:#FFF;}

.upper .shift{background:#070;color:#FFF}
.groups .keyboard span.highlight{border:transparent}

@media only screen and (min-width: 800px)
{
	.keyboard {display: inline-block;font-size: 0.8em}			
}