body {
  user-select: none;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
    "Hiragino Sans", Meiryo, sans-serif;
}

/* start */
#modal {
  font-weight: bold;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  user-select: none;
  background: white;
}
#modal h1 {
  margin: 5px;
}
#modal p {
  font-size: 14px;
  /* padding: 5px; */
  margin: 2px 5px;
}
.hide {
  display: none;
}
.select {
  width: 100px;
  font-size: 24px;
  text-align: center;
  margin: 12px auto;
  padding: 5px;
  color: white;
  background: darkblue;
  border-radius: 5px;
}
.select:hover {
  background: pink;
  color: black;
  cursor: pointer;
}

/* main */
main {
  width: 340px;
  height: 510px;
  margin: 0 auto;
  border: 2px solid darkblue;
  border-radius: 3px;
  padding: 10px;
  position: relative;
}
#numDisplay {
  width: 100%;
  height: 50px;
  border: 1px solid black;
  font-size: 36px;
  text-align: center;
  line-height: 50px;
  letter-spacing: 10px;
  background: darkblue;
  color: white;
}

/* button */
.buttons {
  width: 200px;
  display: flex;
  margin: 0 auto;
}
#clearBtn,
#btn {
  width: 100px;
  height: 50px;
  border-radius: 5px;
  background: darkblue;
  color: white;
  margin: 10px;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
}
#btn {
  pointer-events: none;
}
#choiceNums ul {
  margin: 0 auto;
  width: 310px;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  padding: 0;
}
.choiceNum {
  width: 50px;
  text-align: center;
  margin: 5px;
  cursor: pointer;
  background: darkblue;
  color: white;
  border-radius: 3px;
}
.choiceNum:hover,
#clearBtn:hover,
#btn:hover {
  background: pink;
  color: black;
  transition: 0.5s;
}
.disable {
  pointer-events: none;
}

/* table */
#history {
  margin: 0 auto;
  border-collapse: collapse;
  border: 2px solid darkblue;
}
th,
td {
  width: 100px;
  height: 25px;
  border: 1px solid darkblue;
  text-align: center;
  font-weight: bold;
}

/* end */
#end {
  font-weight: bold;
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  width: 100%;
  height: 100%;
  color: white;
  background: rgb(0, 0, 0, 0.7);
}
#end p {
  font-size: 34px;
  margin: 25px 0;
}
#end :nth-child(3) {
  background: rgba(0, 0, 139, 0.7);
  cursor: pointer;
}
#end :nth-child(3):hover {
  background: rgb(255, 192, 203, 0.7);
  color: black;
}