.dice .front {
  transform: translateZ(var(--side-gap));
}

.dice .back {
  transform: rotateX(-180deg) translateZ(var(--side-gap));
}

.dice .right {
  transform: rotateY(90deg) translateZ(var(--side-gap));
}

.dice .left {
  transform: rotateY(-90deg) translateZ(var(--side-gap));
}

.dice .top {
  transform: rotateX(90deg) translateZ(var(--side-gap));
}

.dice .bottom {
  transform: rotateX(-90deg) translateZ(var(--side-gap));
}
.dice-container {
  --side-gap: 100px;
  width: 200px;
  height: 200px;
  position: relative;
  margin: 0 auto 40px;
  perspective: 1000px;
  perspective-origin: 50% 100%;
  transform: translateY(100px);
}
.dice .side {
  height: 200px;
  width: 200px;
  background-color: rgba(210, 25, 25, 0.533);
  border-radius: 0px;
  position: absolute;
  box-shadow: inset 0px 0px 20px 10px #00000057;
}
.dice {
  transform-style: preserve-3d;
  animation: rotate-dice 40s linear infinite;
}

@keyframes rotate-dice {
  0% {
    transform: rotateZ(0deg) rotateX(0deg) rotateY(0deg);
    /* transform: rotateX(0deg); */
  }
  25% {
    transform: rotateZ(40deg) rotateX(360deg) rotateY(40deg);
    /* transform: rotateX(360deg); */
  }
  50% {
    transform: rotateZ(40deg) rotateX(360deg) rotateY(360deg);
    /* transform: rotateX(360deg); */
  }
  75% {
    transform: rotateZ(360deg) rotateX(40deg) rotateY(40deg);
    /* transform: rotateX(360deg); */
  }
  100% {
    transform: rotateZ(0deg) rotateX(0deg) rotateY(0deg);
    /* transform: rotateX(360deg); */
  }
}

@keyframes dice-gap {
  0% {
    --side-gap: 50px;
  }
  25% {
    --side-gap: 100px;
  }
  45% {
    --side-gap: 100px;
  }
  100% {
    --side-gap: 50px;
  }
}
@property --side-gap {
  syntax: "<length>";
  inherit: false;
  initial-value: 0deg;
}

.bg {
  background-size: cover !important;
}
.bg1 {
  /* background-position: -74px -381px; */
  background: url(../../Image/bg1.png);
}

.bg2 {
  /* background-position: -74px -621px; */
  background: url(../../Image/bg2.png);
}
.bg3 {
  /* background-position: -74px -921px; */
  background: url(../../Image/bg3.png);
}
.bg4 {
  /* background-position: -74px -1218px; */
  background: url(../../Image/bg4.png);
}
.bg5 {
  /* background-position: -9px -1522px; */
  background: url(../../Image/bg5.png);
}
.bg6 {
  /* background-position: 4px -1581px; */
  background: url(../../Image/bg6.png);
}