body {}

@keyframes blinking {
  0% {
    background-color: #06c3d1;
  }

  100% {
    background-color: #270da6;
  }
}

.blink {
  animation: blinking 1s infinite;
  color: white;
}

#centerBox {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -150px;
  margin-left: -225px;
  width: 450px;
  height: 300px;
  background-color: white;
  color: black;
  z-index: 5;

}

#centerBox button {
  padding: 20px 200px;
}

.gameBegin {
  display: block;

}

.gameOver {
  display: none;
}

.blur {
  background-image: rgb(0, 0, 0, 0.5);
  opacity: 0.5;
}

.grid-container {
  display: grid;

}


.grid-item {
  display: grid;
  align-items: center;
  justify-items: center;
}

#zar1 {
  background-image: url("assets/dice/one.jpg");
}

#zar2 {
  background-image: url("assets/dice/two.jpg");
}

#zar3 {
  background-image: url("assets/dice/three.jpg");
}

#zar4 {
  background-image: url("assets/dice/four.jpg");
}

#zar5 {
  background-image: url("assets/dice/five.jpg");
}

#zar6 {
  background-image: url("assets/dice/six.jpg");
}

.zar {
  float: left;
  width: 75px;
  height: 75px;
  background-repeat: no-repeat;
  background-size: 75px 75px;
  padding: 0 10px;
}

.selectedZar {
  opacity: 0.5;
}

.zarlar {
  width: 475px;
  height: 75px;
  background-color: turquoise;
  padding: 10px;
}

.tablo {
  margin-top: 10px
}

.tablo td {
  background-color: red;
  color: white;
  padding: 5px;
  text-align: center;
}

.tablo .point {
  background-color: blueviolet;
}

.tablo td:nth-child(1) {
  background-color: blue;
}

.tablo td.selected {
  background-color: crimson;
}

.tablo .point:hover {
  background-color: cadetblue;
}

button.rollDice {
  padding: 10px;
  margin: 10px;
}

.secilenler {
  float: left;
  width: 600px;
  height: 110px;
  background-color: blueviolet;
  padding: 10px;
  margin: 25px;
}