body {
  text-align: center;
}

.dice {
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 105px;
  border-radius: 10px;
  background: black;
}

.dice:nth-child(3) {
  background-color: rgb(248, 120, 120);
}
.dice:nth-child(4) {
  background-color: rgb(120, 120, 255);
}
.dice:nth-child(5) {
  background-color: rgb(41, 190, 41);
}
.dice:nth-child(6) {
  background-color: rgb(250,220,00);
}

#dice-container{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

button {
  background: none;
  border: solid black 5px;
  border-radius: 10px;
  padding: 0;
  box-shadow: none;
  outline: none;
  appearance: none;      /* wichtig für Mobile */
  -webkit-appearance: none;
}


.roll {
  animation: shake 0.2s ease;
}

@keyframes shake {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(180deg); }
}