.diceContainer {
        width: 100%; /* 200 px */
        height: 100%; /* 200 px */
        perspective: 250%; /* 500 px */
        margin: 50%; /* 100 px */
      }

      .diceCube {
        position: relative;
        width: 100%; /* 200 px */
        height: 100%; /* 200 px */
        transform-style: preserve-3d;
        transform: rotate3d(0, 1, 1, 90deg);
        transform: rotateX(-35deg) rotateY(45deg) rotateZ(0deg);
      }

      .diceFace {
        width: 100%; /* 200 px */
        height: 100%; /* 200 px */
        background: transparent;
        border: 2px solid #baf5c1;
        position: absolute;
        opacity: 0.5;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: Arial, sans-serif;
        font-size: 2rem;
        /* clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); */
      }

      /* left bottom front */

      .diceTop {
        transform: translateY(-100px) rotateX(90deg);
        opacity: 0.5;
      }

      .diceLeft {
        transform: translateX(-100px) rotateY(-90deg);
        opacity: 0.5;
      }

      .diceFront {
        transform: translateZ(100px);
        opacity: 0.5;
      }
      /*  */
      .diceBottom {
        transform: translateY(100px) rotateX(-90deg);
        opacity: 0.1;
        /* opacity: 0; */
      }

      .diceBack {
        transform: translateZ(-100px) rotateY(180deg);
        opacity: 0.1;
        /* opacity: 0; */
      }

      .diceRight {
        transform: translateX(100px) rotateY(90deg);
        opacity: 0.1;
        /* opacity: 0; */
      }

      .diceTurn {
        animation: turn 5s linear infinite;
      }

      @keyframes diceTurn {
        from {
          transform: rotate3d(0, 0, 0, 0);
        }
        to {
          transform: rotate3d(1, 1, 0, 360deg);
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .cube {
          animation: none;
          transform: rotate3d(1, 1, 0, 45deg);
        }
      }

      .diceH2 {
        position: absolute;
        top: 7%;
        left: 50%;
        transform: translateX(-50%);
        font-size: 32px;
        white-space: nowrap;
      }

      .diceNumber {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #baf5c1;
        font-size: 30%; /* 30vmin */
        font-family: "Times New Roman", Times, serif, Courier, monospace;
        /* transform: rotateX(38deg) rotateY(323deg) rotateZ(30deg) translate(-41%, -33%); */
        /* z-index: -1; */

        display: none;
      }

      .diceCentered {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      /*
      example of HTML
      <div class="diceContainer">
      <div class="diceCube">
        <div class="diceFace diceTop"></div>
        <div class="diceFace diceBottom"></div>
        <div class="diceFace diceLeft"></div>
        <div class="diceFace diceRight"></div>
        <div class="diceFace diceFront"></div>
        <div class="diceFace diceBack"></div>
      </div>
      <div id="rollNum" class="diceNumber">3</div>
    </div>
    */