:root {
  --dice: rotateY(185deg) rotateX(150deg) rotateZ(315deg);
}
.dice-wrapper {
  transform: scale(0.7);
}

.dice-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem 0;
    perspective: 700px;
  }
  .dice {
    position: relative;;
    width: 35vw;
    aspect-ratio: 1/1;
   transform-style: preserve-3d;
   transform: var(--dice);
  }
  .dice img {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0) invert(0.88) sepia(0.15);
  }
  .dice.animate {
    transform: var(--dice);
    animation: rotate 3s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .dice.dice2.animate {
    transform: var(--dice);
    animation: rotate2 3.6s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .side::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
    border: 3px solid #000;
    border-radius: 3px;
}  
  .side {
    width: 100%;
    height: 100%;
    background: #8b1a2d;
    border: 1px solid black;
    border-radius: 3px;
    position: absolute;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .dice:not(.rolled) > div.side.three,
  .dice:not(.rolled) > div.side.two,
  .dice:not(.rolled) > div.side.six{
    background: #12080a;
  }

  .one {
      transform: translateZ(17.5vw);
  }
  .two {
      transform: translateX(-17.5vw) rotateY(-90deg);
  }
  .two {
    transform: translateX(-17.5vw) rotateY(-90deg);
  }
  .three {
      transform: translateY(17.5vw) rotateX(90deg);
  }

  .four {
      transform: translateY(-17.5vw) rotateX(90deg);
  }

  .five {
      transform: translateX(17.5vw) rotateY(90deg);
  }

  .six {
      transform: translateZ(-17.5vw);
  }
  .six span {
    transform: translateX(-50%) rotateY(180deg)!important;
  }
  .six .custom-text {
    transform: translateX(0) rotateY(180deg)!important;
  }
  .custom-text {
    font-size: 2rem;
    word-break: break-all;
    padding: 0.5rem
  }
  .five span {
    transform: rotateZ(270deg)!important;
      right: -20px;
      bottom: auto!important;
      text-align: center;
  }
  .five .custom-text {
      right: auto!important;
  }
  .one img,
  .two img,
  .four img  {
    transform: rotateX(180deg) ;
  }
  .side i,
  .side span {
    color: #f5e8d0;
  }

  .one i,
  .four i,
  .two i {
   transform: rotateX(180deg)
  }
  
  .four span,
  .one span,
  .two span {
    top: 20px!important;
    bottom: auto!important;
    transform: rotate(180deg) translateX(50%)!important;
  }
  .four .custom-text,
  .one .custom-text,
  .two .custom-text {
    transform: rotate(180deg) translateX(0)!important;
    bottom: auto!important;
    top: auto!important;
  }
  .three span {
    transform: rotateY(180deg) translateX(50%);
  }
  .three .custom-text {
    transform: rotateY(180deg);
  }

  .five i,
  .five img {
    transform: rotateZ(270deg);
  }
  .side span.custom-text {
    position: static;
  }
  
  
  @keyframes rotate {
    0%   { transform: rotateY(2160deg) rotateX(720deg)  rotateZ(360deg); }
    80%  { transform: var(--dice) rotateX(12deg)  rotateZ(-5deg); }
    90%  { transform: var(--dice) rotateX(-5deg)  rotateZ(2deg); }
    100% { transform: var(--dice); }
  }

  @keyframes rotate2 {
    0%   { transform: rotateX(1800deg) rotateY(360deg)  rotateZ(1440deg); }
    78%  { transform: var(--dice) rotateZ(11deg)  rotateX(-6deg); }
    88%  { transform: var(--dice) rotateZ(-4deg)  rotateX(3deg); }
    100% { transform: var(--dice); }
  }



li {
  list-style: circle;
  padding-bottom: 0.5rem;
}
li span {
  font-weight: bold;
}


@media (min-width: 768px){
  i {
    font-size: 6rem;
  }

  .dice {
    position: relative;;
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    transform: var(--dice);
  }
  .one {
    transform: translateZ(100px);
  }
  .two {
    transform: translateX(-100px) rotateY(-90deg);
  }
  .two {
  transform: translateX(-100px) rotateY(-90deg);
  }
  .three {
    transform: translateY(100px) rotateX(90deg);
  }

  .four {
    transform: translateY(-100px) rotateX(90deg);
  }

  .five {
    transform: translateX(100px) rotateY(90deg);
  }

  .six {
    transform: translateZ(-100px);
  }
  
}