*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

main {
  display: flex;
  align-items: center;
  justify-content: center;

  height: 100vh;
  padding: 12px;
  cursor: pointer;

  background: rgba(35, 44, 72, 0.5) url("assets/bg.avif") center / cover
    no-repeat fixed;

  background-blend-mode: overlay;
}

.dice {
  width: 100px;
  height: 100px;

  transform: skewY(-17deg) rotateX(35deg) skewX(17deg) rotateY(15deg)
    rotateZ(-45deg);

  transform-style: preserve-3d;
}

.animate-dice {
  animation: diceToss 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes diceToss {
  0% {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateY(0) scale(1);
  }

  30% {
    transform: rotateX(540deg) rotateY(360deg) rotateZ(180deg)
      translateY(-150px) scale(1.05);
  }

  60% {
    transform: rotateX(900deg) rotateY(720deg) rotateZ(360deg) translateY(-30px)
      scale(0.98);
  }

  80% {
    transform: rotateX(1080deg) rotateY(900deg) rotateZ(450deg) translateY(-5px)
      scale(1);
  }

  100% {
    transform: skewY(-17deg) rotateX(35deg) skewX(17deg) rotateY(15deg)
      rotateZ(-45deg);
  }
}