:root {
	--key: #FFFF96;
	--press: #449CBD;	
	--bg: #293A57;
	--body: #FF7657;
}

body {
	font-family: monospace;
	font-size: 30px;
	background-color: var(--body);
}
table {
	position: relative;
	table-layout: fixed;
	border-spacing: 0;
	color: var(--bg);
	margin-left: auto;
	margin-right: auto;
}

td {
	position: relative;
	width: 100px;
	height: 100px;
	background-color: var(--bg);
	border: solid 0px;
	text-align: center;
}

tr {
	position: relative;
}

.key, .pickup, .hangup {
	position: absolute;
	background-color: var(--key);
	width: 100px;
	height: 100px;
	box-sizing: border-box;
	bottom: 0;
	right: 0;
	transition: all 0.05s;
}

.pickup, .hangup{
	visibility: hidden;
}

.key:active {
	width: 90px;
	height: 90px;
	background-color: var(--press);
	transition: all 0s;
}

.symbol {
	position: absolute;
	width: 100px;
	height: 100px;
	box-sizing: border-box;
	padding-top: 25px;
}

.symbol::selection {
	background-color: var(--key);
	color: var(--bg);
}

.symbol:active::selection {
	background-color: var(--press);
	color: var(--bg);
}

.broider {
    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAABL0lEQVR4Xu3bwWnDMABA0WabztBFOmMX6QzZpsGXghWICPoxxLx3M0YHfyQjBLp8LPr8+v77fziB6+/PZeUzlgZvBN0TdGCGxl4e9GxLetUs+MOXG0H3BI0JGns6qCX+nDGwoIsEjQkaEzQmaEzQmKCxu6D2nS1BY4LGBI0JGhM0JmhM0JigMUFjgsYEjR0edDxMeLWjzyoEjQkaEzQmaEzQmKAxQWOCxgSNCRoTNCZoTNCYoDFBY4LGBI0JGhM0JmhM0JigMUFjgsYEjQkaEzR2eNCzEzQmaEzQmKAxQWOCxgSNCRoTNCZoTNDY3Z2ho+/1vLvx3pWgiwSNCRoTNCZoTNCYoLFp0JF96d4YcPTw5UbQPUFjgsaWg86c7ZcwCzazNHgj6J6gAzM0thr0BoD3ScQ9sHNwAAAAEGRlQkdFMkY2NTg5OEIxNDY3NjdDLpSKsAAAAABJRU5ErkJggg==") 28 /  28px / 0 round;
    border-width:  28px;
    border-style:  solid;
}

td div div {
    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAA/ElEQVR4Xu3awQlCQQxAQbcba7ARa7QRa7AbvXmV5T8jyEwDgXdLyDpfrs8TmSVoS9CYoDFBY4LGBI0JGhM0JmhM0JigsfGgj/ttvacPmF6tBY0JGhM0JmhM0JigMUFjgsYEjQkaEzQmaEzQmKAxQWPbQafvmb+220fQDwSNCRoTNCZoTNCYoDFBY4LGBI0JGhM0JmhM0JigMUFjgsYEjQkaEzQmaEzQmKAxQWOCxgSNCRr7etCjpn+jdoMctf3bdJSgMUFjgsYEjQkaEzQmaEzQmKAxQWOCxgSNCRoTNCYoW8bvof9O0JigMUFjgsYEjQkaEzQmaEzQmKCxFwwwgMT8FKVVAAAAEGRlQkc3NTk1RjY0QUZDQzNCOTZBxezEngAAAABJRU5ErkJggg==") 28 /  7px / 0 round;
    border-width:  7px;
    border-style:  solid;
}