.dice_box {
  position: absolute;
  bottom: 0;
  max-width: 605px;
  height: 100px;
  border-radius: 10px;
  background-color: rgba(240, 248, 255, 0.424);
  display: flex;
  justify-content: space-between;
  flex: 1;
}

.dice_info {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

#grid {
  width: 100%;
  height: 100%;
  /* gap: 0.5px; */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
}

.dice {
  transform: scale(0.3);
  align-items: center;
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  grid-template-rows: auto;
  justify-items: center;
  perspective: 900px;
}

.dice:hover {
  cursor: pointer;
}

.die-list {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  list-style-type: none;
  transform-style: preserve-3d;
  width: 120px;
  height: 120px;
  transition: transform 0.5s ease-out;
  padding: 10px;
}

.die-item {
  background-color: white;
  display: grid;
  grid-column: 1;
  grid-row: 1;
  grid-template-areas:
    "one two three"
    "four five six"
    "seven eight nine";
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  height: 130px;
  width: 130px;
  border-radius: 5px;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.14);
}

.dot {
  align-self: center;
  background-color: black;
  border-radius: 50%;
  box-shadow: inset -0.15rem 0.15rem 0.25rem rgb(155, 151, 185);
  display: block;
  height: 1rem;
  justify-self: center;
  width: 1rem;
}

.die-list[data-roll="1"] {
  transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg);
}

.die-list[data-roll="2"] {
  transform: rotateX(450deg) rotateY(720deg) rotateZ(360deg);
}

.die-list[data-roll="3"] {
  transform: rotateX(360deg) rotateY(630deg) rotateZ(360deg);
}

.die-list[data-roll="4"] {
  transform: rotateX(360deg) rotateY(810deg) rotateZ(360deg);
}

.die-list[data-roll="5"] {
  transform: rotateX(270deg) rotateY(720deg) rotateZ(360deg);
}

.die-list[data-roll="6"] {
  transform: rotateX(360deg) rotateY(900deg) rotateZ(360deg);
}

[data-side="1"] {
  transform: rotate3d(0, 0, 0, 90deg) translateZ(4rem);
}

[data-side="2"] {
  transform: rotate3d(-1, 0, 0, 90deg) translateZ(4rem);
}

[data-side="3"] {
  transform: rotate3d(0, 1, 0, 90deg) translateZ(4rem);
}

[data-side="4"] {
  transform: rotate3d(0, -1, 0, 90deg) translateZ(4rem);
}

[data-side="5"] {
  transform: rotate3d(1, 0, 0, 90deg) translateZ(4rem);
}

[data-side="6"] {
  transform: rotate3d(1, 0, 0, 180deg) translateZ(4rem);
}

[data-side="1"] .dot:nth-of-type(1) {
  grid-area: five;
}

[data-side="2"] .dot:nth-of-type(1) {
  grid-area: one;
}

[data-side="2"] .dot:nth-of-type(2) {
  grid-area: nine;
}

[data-side="3"] .dot:nth-of-type(1) {
  grid-area: one;
}

[data-side="3"] .dot:nth-of-type(2) {
  grid-area: five;
}

[data-side="3"] .dot:nth-of-type(3) {
  grid-area: nine;
}

[data-side="4"] .dot:nth-of-type(1) {
  grid-area: one;
}

[data-side="4"] .dot:nth-of-type(2) {
  grid-area: three;
}

[data-side="4"] .dot:nth-of-type(3) {
  grid-area: seven;
}

[data-side="4"] .dot:nth-of-type(4) {
  grid-area: nine;
}

[data-side="5"] .dot:nth-of-type(1) {
  grid-area: one;
}

[data-side="5"] .dot:nth-of-type(2) {
  grid-area: three;
}

[data-side="5"] .dot:nth-of-type(3) {
  grid-area: five;
}

[data-side="5"] .dot:nth-of-type(4) {
  grid-area: seven;
}

[data-side="5"] .dot:nth-of-type(5) {
  grid-area: nine;
}

[data-side="6"] .dot:nth-of-type(1) {
  grid-area: one;
}

[data-side="6"] .dot:nth-of-type(2) {
  grid-area: three;
}

[data-side="6"] .dot:nth-of-type(3) {
  grid-area: four;
}

[data-side="6"] .dot:nth-of-type(4) {
  grid-area: six;
}

[data-side="6"] .dot:nth-of-type(5) {
  grid-area: seven;
}

[data-side="6"] .dot:nth-of-type(6) {
  grid-area: nine;
}

/* @media (max-width: 761px) {
  .dice {
    transform: scale(0.3);
  }
} */