body {
    margin: 0;
}
.keyboard {
	margin-bottom: 20px;
	margin-top: -10px;
}

.keyboard table {
    width: 100%;
    font-family: 'texgyreadventorregular';
    font-size: 3vw;
    color: white;
	margin-bottom: 0.5rem;
}

.keyboard table td {
    text-align: center;
    padding:0px;
    background: #f5893e;
    border: none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.hover {
    -moz-transform: scale(1) rotate(0deg) translate(1px, -1px) skew(0deg, 0deg);
    -webkit-transform: scale(1) rotate(0deg) translate(1px, -1px) skew(0deg, 0deg);
    -o-transform: scale(1) rotate(0deg) translate(1px, -1px) skew(0deg, 0deg);
    -ms-transform: scale(1) rotate(0deg) translate(1px, -1px) skew(0deg, 0deg);
    transform: scale(1) rotate(0deg) translate(1px, -1px) skew(0deg, 0deg);
	background: #FFA636;
}

.keydown {
    -moz-transform: scale(0.95);
    -webkit-transform: scale(0.95);
    -o-transform: scale(0.95);
    -ms-transform: scale(0.95);
    transform: scale(0.95);
	background: #FFA636 !important;
}

.capsLockOn {
    color: lawngreen;
}

.uppercase {
    text-transform: uppercase;
}

.on {
    display: none;
}

.off {
    display: block;
}

@media screen and (min-width: 640px) {
    .keyboard table {
        font-size: 1.5vw;
    }
    .keyboard table td {
        height:1em;
		width:1em;
        border: 1px solid white;
    }
}

#keyboardtarget {
    width: 100%;
    height: 100px;
}

.text-container {
    margin: 10px;
}