body {
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  user-select: none; /* supported by Chrome and Opera */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
}

#wrapper {
  width:254px;
  height:410px;
  margin:0 auto 0 auto;
  top:116px;
  padding:24px 0 0 0;
  background:#fff;
}

.inp{
  color:#444;
  width:180px;
  height:70px;
  text-align:left;
  font-size:30px;
  float:right;
  box-sizing:border-box;
  padding:5px 0 0 0;
  margin:0 7px 10px 7px;
  border:none;

}

.inpc{
  color:#444;
  width:40px;
  height:70px;
  text-align: right;
  font-size:30px;
  float:left;
  box-sizing:border-box;
  padding:5px 0 0 0;
  margin:0 7px 10px 7px;
  border:none;

}

.key {
  border-radius: 50px 50px 50px 50px;
  color:black;
  width:70px;
  height:70px;
  text-align:center;
  font-size:30px;
  float:left;
  box-sizing:border-box;
  padding:5px 0 0 0;
  margin:0 7px 10px 7px;
  background-color: rgb(235, 233, 233);
  cursor:pointer;
  transition: background-color 0.3s;
}

.key:hover{
  background-color: rgb(185, 182, 182);
  transition: background-color 0.3s;
}


.key span {
  display:block;
  color:#444;
  text-align:center;
  font-size:12px;
  text-transform:uppercase;
}
.del {
  border-radius: 50px 50px 50px 50px;
  width:70px;
  height:70px;
  text-align:center;
  font-size:30px;
  float:left;
  box-sizing:border-box;
  padding:5px 0 0 0;
  margin:0 7px 10px 7px;
  border:1px solid #444;
  cursor:pointer;
  line-height:60px;
  border:none;
  background: url("blight.png");
  background-repeat: no-repeat;
  background-size: 80px 80px;
}
.key.nb {
  border:none;
  background-color: white;
}
.chat {
  border-radius: 50px 50px 50px 50px;
  color:#444;
  width:70px;
  height:70px;
  text-align:center;
  font-size:30px;
  float:left;
  box-sizing:border-box;
  padding:5px 0 0 0;
  margin:0 7px 10px 7px;
  border:1px solid #444;
  cursor:pointer;
  background:#5CDB74;
  border:none;
  color:#FFF;
  line-height:60px;
  font-size:40px;
}

.chat:hover{
  background:#49b15c;
  transition: background 0.3s;
}

.clear {
  clear:both;
}

.header{
  color:#444;
  width: 180px;
  float: right;
}

.error{
  color: #444;
}

@media (prefers-color-scheme: dark){
body{
  background-color: black;
}

#wrapper {
  background: black;
}
.inp{
  color:white;
  background-color: black;
}
.inpc{
  color:white;
  background-color: black;
}
.header{
  color:white;
}

.key {
  color:white;
  border:none;
  background-color: rgb(36, 36, 36);
}
.key span {
  color:white;
}
.del {
  color:white;
  border:none;
  background: url("bdark.png");
  background-repeat: no-repeat;
  background-size: 80px 80px;
}
.key.nb{
  background-color: black;
}
.chat {
  color:white;
  border: none;
}
}