div#default {
	display: none;
}
div#default:target {
	display: block;
}

div#altgr {
	display: none;
}
div#altgr:target {
	display: block;
}

/*
div#default:target ~ div#default {
	display: block;
}

div#altgr:target ~ div#altgr {
	display: block;
}

:target ~ #default {
	display: none;
}*/

.right-align {
	text-align: right;
}

div.key {
	background-color: #333;
	border: 0.3vw solid #000;
	text-align: center;
	font-size: 4.3vw;
	color: #999;
	vertical-align: middle;
	line-height: 6vw;
	font-family: sans-serif;
	transition-duration: 0.2s;
}
div.key:hover {
	background-color: #520;
}

div.sq {
	font-size: 2.8vw;
	color: #fff;
	background-color: #444;
	font-family: DejaVu Sans Mono, monospace;
	flex: 10;
}
div.sq:hover {
	background-color: #750;
}

div.bksl {
	font-size: 2.8vw;
	color: #fff;
	background-color: #444;
	font-family: monospace;
	flex: 14;
}
div.bksl:hover {
	background-color: #750;
}

div.ctrl {
	font-size: 2vw;
	flex: 14;
}

div.alt {
	font-size: 2vw;
	flex: 12;
}
div.alt_active {
	font-size: 2vw;
	flex: 12;
	background-color: #520;
}

div.mod {
	font-size: 3.3vw;
	flex: 12;
}

div.menu {
	font-size: 2.8vw;
	flex: 12;
}

div.space {
	flex: 60;
}

div.lshift {
	flex: 12;
}

div.rshift {
	flex: 26;
}

div.ret {
	flex: 21;
}

div.tab {
	flex: 14;
}

div.caps {
	flex: 17;
}

div.back {
	flex: 18;
}

div.flex {
	display: flex;
	width: 100%;
	border: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
}

div.dead {
	color: #0bd;
}
div.dead:hover {
	background-color: #004c66;
}

div.jump:hover {
	background-image: var(--link);
}

a.jump {
	color: var(--flame);
	text-decoration: none;
}
a.jump:hover {
	color: #000;
}
a.jump:active {
	color: var(--red);
}

span.up {
	color: #000;
}
span.dead {
	color: #0bd;
}
span.dead_up {
	color: #079;
}