:root {
  --font-size: min(3vw, 20px);
}

html {
  padding-bottom: 25vh;
}

body {
  background-image: radial-gradient(green, rgb(0, 47, 0));
  background-attachment: fixed;
  height: 100vh;
  color: white;
}

table {
  border-collapse: collapse;
  background-color: white;
  color: black;
}

td {
  border: 1px solid black;
  padding: 10px;
}

#gameArea {
  margin: 10px;
  font-size: var(--font-size);
  font-family: Arial, Helvetica, sans-serif;
  margin-bottom: 100px;
}

#scorecard {
  margin-top: 20px;
  margin-bottom: 10px;
  box-shadow: 5px 5px 5px black;
}

#rollBtn {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: var(--font-size);
  border: 1px solid black;
  border-radius: 5px;
  padding: 10px;
  transition: background-color 0.3s ease-in-out;
}

#rollBtn:hover {
  background-color: rgb(254, 253, 175);
  cursor: pointer;
}

#restartBtn {
  font-size: var(--font-size);
}

#statsBtn {
  font-size: var(--font-size);
  margin-top: 10px;
}

#closeStatsBtn {
  position: absolute;
  right: 5px;
  top: 5px;
  background-color: red;
  color: white;
  font-weight: bolder;
  font-size: 20px;
}

#closeStatsBtn:hover {
  background-color: rgb(167, 0, 0);
  cursor: pointer;
}

#statsTable {
  margin-top: 10px;
  margin-bottom: 10px;
}

.hidden {
  display: none;
}

.visible {
  display: block;
}

.infoCell {
  background-color: rgb(252, 254, 218);
}

.scored {
  background-color: rgb(197, 197, 197);
}

.unscored:hover {
  background-color: rgb(254, 253, 175);
  cursor: pointer;
}

.thickBorderTop {
  border-top: 2px solid black;
}

.thickBorderBottom {
  border-bottom: 2px solid black;
}

.scoreHint {
  color: gray;
}

.diceArea {
  display: flex;
}

.die {
  width: 5ch;
  height: 5ch;
  font-size: var(--font-size);
  color: black;
  background-color: white;
  border: 1px solid black;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
}

.dieRolling {
  animation: rollAnim 0.5s;
}

.die:hover {
  background-color: rgb(254, 253, 175);
}

@keyframes rollAnim {
  from {transform: rotate(0);}
  to {transform: rotate(360deg);}
}

.rollCountNumberCell {
  font-weight: bold;
}