.dice-container {
  width: 150px;
  height: 150px;
  margin: 0.5rem auto 1.25rem;
  perspective: 900px;
}

.dice {
  position: relative;
  width: 150px;
  height: 150px;
  transform-style: preserve-3d;
  /* start with face 1 (front) */
  transform: rotateX(0deg) rotateY(0deg);
  /* JS animates by changing transform */
  transition: transform 5000ms cubic-bezier(0.19, 1, 0.22, 1);
}

.face {
  position: absolute;
  width: 150px;
  height: 150px;
  background: #e5e7eb;
  border-radius: 24px;
  border: 3px solid #e5e7eb;
  box-shadow:
    0 14px 28px rgba(15, 23, 42, 0.5),
    inset 0 0 0 2px rgba(148, 163, 184, 0.4);
}

/* Face positions */

.face.front {
  transform: translateZ(75px);
}

.face.back {
  transform: rotateY(180deg) translateZ(75px);
}

.face.right {
  transform: rotateY(90deg) translateZ(75px);
}

.face.left {
  transform: rotateY(-90deg) translateZ(75px);
}

.face.top {
  transform: rotateX(90deg) translateZ(75px);
}

.face.bottom {
  transform: rotateX(-90deg) translateZ(75px);
}

/* Pips */

.pip {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #111827;
  box-shadow: 0 0 4px rgba(15, 23, 42, 0.5);
}

.pip.center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.pip.tl {
  top: 22%;
  left: 22%;
}

.pip.tr {
  top: 22%;
  right: 22%;
}

.pip.bl {
  bottom: 22%;
  left: 22%;
}

.pip.br {
  bottom: 22%;
  right: 22%;
}

.pip.ml {
  top: 50%;
  left: 22%;
  transform: translateY(-50%);
}

.pip.mr {
  top: 50%;
  right: 22%;
  transform: translateY(-50%);
}