@charset "utf-8";
/* キーボードのCSSのみ記述すること(自戒) */

/* テンキー全体 */
#tenkey {
  width: 324px;
  margin: 0;
  padding: 0;
  border-radius: 20px;
  background-color: #060606;
  transform: translateY(-3px);
  border-bottom: 3px solid #000;
  z-index: 15;
}

/* 全体に合わせて四隅のキーも角丸 */
.key.lefttop {
  border-top-left-radius: 20px;
}

.key.righttop {
  border-top-right-radius: 20px;
}

.key.rightbottom {
  border-bottom-right-radius: 20px;
}

.key.leftbottom {
  border-bottom-left-radius: 20px;
}

/* 行間を開けない */
.row {
  display: flex;
  padding: 0;
  margin: 0;
}

/* 上の3行は押した時下にもぐる */
.row1 {
  z-index: 5;
  overflow: hidden;
}

.row2 {
  z-index: 10;
  overflow: hidden;
}

.row3 {
  z-index: 15;
  overflow: hidden;
}

.key {
  will-change: transform;
  font-family: "Monomaniac One", serif;
  font-weight: 400;
  font-style: normal;
  color: #67eb9a;
  height: 48px;
  padding: 0;
  background-color: #161616;
  border: 1px solid #3f3f3f;
  text-align: center;
  cursor: pointer;
  font-size: 25px;
  width: 108px;
}

.key:hover {
  color: rgb(250, 255, 106);
  background-color: #060606;
  font-size: 25px;
}

.key.newGameBtn {
  font-size: 22px;
}
.key.newGameBtn:hovor {
  font-size: 23px;
}

.keyleft {
  border-right: none;
}

.keyright {
  border-left: none;
}

.key:active {
  color: #FF0;
  box-shadow: none;
  transform: translateY(2px);
  background-color: #000000;
}