* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.result {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  width: 100%;
}
.dice-container {
  width: 100px;
  height: 100px;
  margin: 25px;
  box-sizing: border-box;
}
.dice {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  box-sizing: border-box;
}

.dice-face {
  position: absolute;
  width: 100px;
  height: 100px;
  padding: 10px;
  box-sizing: border-box;
  background: #0000ff;
}

.dice-face-front {
  transform: rotateY(0deg) translateZ(50px);
}

.dice-face-front {
  display: flex;
  justify-content: center;
  align-items: center;
}

.dice-face-bottom {
  transform: rotateX(-90deg) translateZ(50px);
}
.dice-face-bottom {
  display: flex;
  justify-content: space-between;
}

.dice-face-back {
  transform: rotateY(180deg) translateZ(50px);
}
.dice-face-back {
  display: flex;
  justify-content: space-between;
}
.dice-face-back .pip:nth-of-type(2) {
  align-self: center;
}
.dice-face-back .pip:nth-of-type(3) {
  align-self: end;
}
.dice-face-top {
  transform: rotateX(90deg) translateZ(50px);
}
.dice-face-top,
.dice-face-right {
  display: flex;
  justify-content: space-between;
}

.dice-face-left {
  transform: rotateY(-90deg) translateZ(50px);
}
.dice-face-left {
  display: flex;
  justify-content: space-between;
}

.dice-face-right {
  transform: rotateY(90deg) translateZ(50px);
}
.dice-face-top,
.dice-face-right {
  display: flex;
  justify-content: space-between;
}

.pip {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin: 4px;
  background-color: #fff;
  box-shadow: inset 0 3px #fff, inset 0 -3px #eee;
}

.roll-1 {
  animation: roll-1 1s;
}

.roll-2 {
  animation: roll-2 1s;
  transform: rotateX(90deg);
}

.roll-3 {
  animation: roll-3 1s;
  transform: rotateY(180deg);
}

.roll-4 {
  animation: roll-4 1s;
  transform: rotateX(-90deg);
}

.roll-5 {
  animation: roll-5 1s;
  transform: rotateY(90deg);
}

.roll-6 {
  animation: roll-6 1s;
  transform: rotateY(-90deg);
}

.dice-face-top .column,
.dice-face-right .column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.dice-face-left .column:nth-of-type(2) {
  justify-content: center;
}

.dice-face-left .column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.dice-face-bottom {
  display: flex;
  justify-content: space-between;
}

.dice-face-bottom .pip:nth-of-type(2) {
  align-self: flex-end;
}
@keyframes roll-1 {
  0% {
    -webkit-transform: rotateY(-360deg) rotateX(-360deg);
  }

  100% {
    -webkit-transform: rotateY(0deg) rotateX(0deg);
  }
}

@keyframes roll-2 {
  0% {
    -webkit-transform: rotateX(-360deg) rotateY(-360deg);
  }

  100% {
    -webkit-transform: rotateX(90deg) rotateX(0deg);
  }
}

@keyframes roll-3 {
  0% {
    -webkit-transform: rotateY(-180deg) rotateX(-360deg);
  }

  100% {
    -webkit-transform: rotateY(180deg) rotateX(0);
  }
}

@keyframes roll-4 {
  0% {
    -webkit-transform: rotateX(-430deg) rotateY(-360deg);
  }

  100% {
    -webkit-transform: rotateX(-90deg) rotateY(0);
  }
}

@keyframes roll-5 {
  0% {
    -webkit-transform: rotateY(-360deg) rotateX(-360deg);
  }

  100% {
    -webkit-transform: rotateY(90deg) rotateX(0deg);
  }
}

@keyframes roll-6 {
  0% {
    -webkit-transform: rotateY(-360deg) rotateX(-360deg);
  }

  100% {
    -webkit-transform: rotateY(-90deg) rotateX(0);
  }
}