.dice {
  position: absolute;
  width: 60px;
  height: 60px;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  transform-style: preserve-3d;
  transform: rotate3d(0, 0.9, 0.9, 90deg);
  transition: 0.5s cubic-bezier(0.42, 1.57, 0.62, 0.86);
}

.dice.rolling {
  animation: rotatePerFace 3s cubic-bezier(0.42, 1.57, 0.62, 0.86);
}

.dice.throw {
  animation: rotateDice 0.7s ease-in reverse, throwDice 1s linear;
}

.dice .diceFace {
  box-sizing: border-box;
  position: absolute;
  width: 60px;
  height: 60px;
  background-color: #f6f3f0;
  border: 2px solid white;
  border-radius: 20px;
  transform-style: preserve-3d;
  transition: 0.5s;
}

.dice .diceFace::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-color: white;
  border-radius: 20px;
  transform: translateZ(-1px);
}

.dice .diceFace::after {
  position: absolute;
  content: "";
  width: 10px;
  height: 10px;
  top: 50%;
  left: 50%;
  margin: -5px 0 0 -5px;
  background-color: #131210;
  border-radius: 100%;
  transform: translateZ(1px);
}

.dice .front {
  transform: translateZ(30px);
}

.dice .front::after {
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  background-color: #f63330;
}

.dice .up {
  transform: rotateX(90deg) translateZ(30px);
}

.dice .up::after {
  margin: -15px 0 0 -15px;
  box-shadow: 20px 20px #131210;
}

.dice .left {
  transform: rotateY(-90deg) translateZ(30px);
}

.dice .left::after {
  margin: -20px 0 0 -20px;
  box-shadow: 15px 15px #131210, 30px 30px #131210;
}

.dice .right {
  transform: rotateY(90deg) translateZ(30px);
}

.dice .right::after {
  margin: -15px 0 0 -15px;
  background-color: #f63330;
  box-shadow: 20px 0px #f63330, 0px 20px #f63330, 20px 20px #f63330;
}

.dice .bottom {
  transform: rotateX(-90deg) translateZ(30px);
}

.dice .bottom::after {
  margin: -18px 0 0 -18px;
  box-shadow: 13px 13px #131210, 26px 26px #131210, 26px 0px #131210, 0px 26px #131210;
}

.dice .back {
  transform: rotateX(180deg) translateZ(30px);
}

.dice .back::after {
  margin: -20px 0 0 -15px;
  box-shadow: 20px 0px #131210, 0px 15px #131210, 20px 15px #131210, 0px 30px #131210, 20px 30px #131210;
}

.diceWrap {
  position: absolute;
  width: 120px;
  height: 120px;
  top: calc(50% - 60px);
  left: calc(50% - 60px);
}

.diceWrap::before {
  position: absolute;
  content: "";
  width: 70%;
  height: 10%;
  top: 90%;
  left: 15%;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 100%;
  filter: blur(10px);
}

@keyframes rotateDice {
  30% {
    transform: rotate3d(1, 1, 1, 0deg);
  }

  100% {
    transform: rotate3d(1, 1, 1, 720deg);
  }
}

@keyframes rotatePerFace {
  16% {
    transform: rotate3d(-0.1, 0.6, -0.4, 180deg);
  }

  32% {
    transform: rotate3d(-0.85, -0.42, 0.73, 180deg);
  }

  48% {
    transform: rotate3d(-0.8, 0.3, -0.75, 180deg);
  }

  64% {
    transform: rotate3d(0.3, 0.45, 0.9, 180deg);
  }

  80% {
    transform: rotate3d(-0.16, 0.6, 0.18, 180deg);
  }

  100% {
    transform: rotate3d(-0.1, 0.3, -1, 180deg);
  }
}

@keyframes throwDice {
  20% {
    margin-top: -100px;
  }

  40% {
    margin-top: 0px;
  }

  60% {
    margin-top: -30px;
  }

  80% {
    margin-top: 0px;
  }

  85% {
    margin-top: -10px;
  }

  90% {
    margin-top: 0px;
  }

  95% {
    margin-top: -3px;
  }

  100% {
    margin-top: 0px;
  }
}

body {
  background-color: #333;
}

.controller {
  position: absolute;
  width: 200px;
  padding: 20px;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  text-align: center;
  line-height: 40px;
}

@media (max-width: 980px) {
  .game_content .game_content_main .game .dicesContainer .diceWrap.dice1 {
    bottom: 38%;
    left: 23%;
  }

  .game_content .game_content_main .game .dicesContainer .diceWrap.dice2 {
    bottom: 51%;
    left: 36%;
  }

  .game_content .game_content_main .game .dicesContainer .diceWrap.dice3 {
    bottom: 51%;
    left: 52%;
  }

  .game_content .game_content_main .game .dicesContainer .diceWrap.dice4 {
    bottom: 38%;
    left: 66%;
  }

  .game_content .game_content_main .game .dicesContainer .diceWrap.dice5 {
    left: 36%;
  }

  .game_content .game_content_main .game .dicesContainer .diceWrap.dice6 {}

}

@media (max-width: 640px) {
  .game_content .game_content_main .game .dicesContainer .diceWrap .dice {
    width: 30px;
    height: 30px;
    top: calc(50% - 15px);
    left: calc(50% - 15px);
  }

  .game_content .game_content_main .game .dicesContainer .diceWrap .dice .diceFace {
    width: 30px !important;
    height: 30px !important;
    border-radius: 5px;
  }

  .game_content .game_content_main .game .dicesContainer .diceWrap .dice .diceFace::before {
    border-radius: 15px;
  }

  .game_content .game_content_main .game .dicesContainer .diceWrap .dice .diceFace::after {
    width: 5px;
    height: 5px;
    margin: -2.5px 0 0 -2.5px;
  }

  .game_content .game_content_main .game .dicesContainer .diceWrap .dice .front {
    transform: translateZ(15px);
  }

  .game_content .game_content_main .game .dicesContainer .diceWrap .dice .front::after {
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
  }

  .game_content .game_content_main .game .dicesContainer .diceWrap .dice .up {
    transform: rotateX(90deg) translateZ(15px);
  }

  .game_content .game_content_main .game .dicesContainer .diceWrap .dice .up::after {
    margin: -7.5px 0 0 -7.5px;
    box-shadow: 10px 10px #131210;
  }

  .game_content .game_content_main .game .dicesContainer .diceWrap .dice .left {
    transform: rotateY(-90deg) translateZ(15px);
  }

  .game_content .game_content_main .game .dicesContainer .diceWrap .dice .left::after {
    margin: -10px 0 0 -10px;
    box-shadow: 7.5px 7.5px #131210, 15px 15px #131210;
  }

  .game_content .game_content_main .game .dicesContainer .diceWrap .dice .right {
    transform: rotateY(90deg) translateZ(15px);
  }

  .game_content .game_content_main .game .dicesContainer .diceWrap .dice .right::after {
    margin: -7.5px 0 0 -7.5px;
    background-color: #f63330;
    box-shadow: 10px 0px #f63330, 0px 10px #f63330, 10px 10px #f63330;
  }

  .game_content .game_content_main .game .dicesContainer .diceWrap .dice .bottom {
    transform: rotateX(-90deg) translateZ(15px);
  }

  .game_content .game_content_main .game .dicesContainer .diceWrap .dice .bottom::after {
    margin: -9px 0 0 -9px;
    box-shadow: 6.5px 6.5px #131210, 13px 13px #131210, 13px 0px #131210, 0px 13px #131210;
  }

  .game_content .game_content_main .game .dicesContainer .diceWrap .dice .back {
    transform: rotateX(180deg) translateZ(15px);
  }

  .game_content .game_content_main .game .dicesContainer .diceWrap .dice .back::after {
    margin: -10px 0 0 -7.5px;
    box-shadow: 10px 0px #131210, 0px 7.5px #131210, 10px 7.5px #131210, 0px 15px #131210, 10px 15px #131210;
  }

  .game_content .game_content_main .game .dicesContainer .diceWrap .diceWrap {
    width: 60px;
    height: 60px;
    top: calc(50% - 30px);
    left: calc(50% - 30px);
  }

  .game_content .game_content_main .game .dicesContainer .diceWrap.dice1 {
    bottom: 28%;
    left: 20%;
  }

  .game_content .game_content_main .game .dicesContainer .diceWrap.dice2 {
    bottom: 42%;
    left: 38%;
  }

  .game_content .game_content_main .game .dicesContainer .diceWrap.dice3 {
    bottom: 42%;
    left: 57%;
  }

  .game_content .game_content_main .game .dicesContainer .diceWrap.dice4 {
    bottom: 28%;
    left: 76%;
  }

  .game_content .game_content_main .game .dicesContainer .diceWrap.dice5 {
    left: 36%;
    bottom: 17%;
  }

  .game_content .game_content_main .game .dicesContainer .diceWrap.dice6 {
    bottom: 17%;
    left: 57%;
  }
}