::selection { background-color:none; color:inherit; }

body {
  background-color: #1f1f1f; 
}

.hint {
  color: #fefefe;
  text-align: center;
}

.keyboard {
  width:800px; height: 260px;
  background-color: #111;
  margin: 10% auto;
  border-radius: 8px;
  padding: 30px;
  color: #fefefe;
}

.key {
  width: 40px; height:40px;
  display:block;
  background-color:#333;
  text-align: left;
  padding-left: 8px;
  line-height: 29px;
  border-radius:2px;
  float:left; margin-left: 2px;
  margin-bottom:2px;
  /* cursor: pointer; */
  transition: box-shadow 0.7s ease;
}

.section-a { width:650px; height:260px; float:left; }
.section-b { width:150px; height:260px; float:left; }

.function { font-size: 12px; width:30px; height:30px; margin-bottom:15px; }
.small { font-size:10px; line-height:13px; text-align: center; padding:0 5px; padding-top:2px; height:28px !important; }
.space1 { margin-right: 43px !important; }
.space2 { margin-right: 25px !important; }
.dual  { font-size: 14px; line-height: 20px; width:30px; }
.backspace  { width:84px; font-size: 12px; }
.tab  { width: 50px; line-height: 40px; font-size:13px; }
.letter { width:30px; }
.slash { width:64px; }
.caps { width:70px; font-size:12px; line-height:18px; }
.enter { width:92px; line-height:40px; text-align: center; padding-left:0; }
.shift.left { width: 90px;line-height: 40px; font-size:13px; }
.shift.right { width: 104px;line-height: 40px; font-size:13px; }
.ctrl { width: 50px; line-height: 40px; font-size:13px; }
.space { width:234px; }
.arrows { position:relative; top:42px; }
.sec-func .key { width: 32px; font-size:10px; text-align:left; line-height:40px; float:left; }
.sec-func div.dual { line-height:20px; }
.arrows .key { text-align: center; padding-left: 7px; margin-left:2px; }
.hidden { visibility: hidden; }
.key-pressed { background-color: #800000; }