@import url('https://fonts.googleapis.com/css2?family=Bonheur+Royale&display=swap');
body {
background-color: #2F2F2F;
   background-image: url("runes.svg");
-ms-overflow-style: none; /* for Internet Explorer, Edge */
scrollbar-width: none; /* for Firefox */
overflow-y: scroll;
position: absolute;
}
element::-webkit-scrollbar {
display: none; /* for Chrome, Safari, and Opera */
}
/*cube*/
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box; }
#element {
position: absolute;
top: 70vh;
left: 12%;
width: 200px;
height: 200px;
cursor: url('dice.svg'), move;
}
.viewport {
position: absolute;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-ms-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
-webkit-perspective-origin: 50% 200px;
-moz-perspective-origin: 50% 200px;
-ms-perspective-origin: 50% 200px;
-o-perspective-origin: 50% 200px;
perspective-origin: 50% 200px;
-webkit-transform: scale(0.6, 0.6);
-moz-transform: scale(0.6, 0.6);
-ms-transform: scale(0.6, 0.6);
-o-transform: scale(0.6, 0.6);
transform: scale(0.6, 0.6);
}
.cube {
position: absolute;
/* bring your own prefixes */
height: 200px;
width: 200px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateX(136deg) rotateY(1122deg);
-moz-transform: rotateX(136deg) rotateY(1122deg);
-ms-transform: rotateX(136deg) rotateY(1122deg);
-o-transform: rotateX(136deg) rotateY(1122deg);
transform: rotateX(136deg) rotateY(1122deg);
}
.cube > div {
position: absolute;
overflow: hidden;
opacity: 1;
height: 200px;
width: 200px;
background-image: url(red.png);
background-size: cover;
-webkit-touch-callout: none;
-moz-touch-callout: none;
-ms-touch-callout: none;
-o-touch-callout: none;
touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none; }
.cube > div > div.cube-image {
width: 200px;
height: 200px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
line-height: 200px;
font-size: 80px;
text-align: center;
color: #333333;
-webkit-transition: color 600ms;
-moz-transition: color 600ms;
-ms-transition: color 600ms;
-o-transition: color 600ms;
transition: color 600ms; }
.cube > div > div.cube-image.active {
transition: 1.5s;
color: #ff4141;
}
.cube > div:hover {
cursor: url('dice.svg'), move; }
.cube > div:active {
cursor: url('dice.svg'), move; }
.cube > div:first-child {
-webkit-transform: rotateX(90deg) translateZ(100px);
-moz-transform: rotateX(90deg) translateZ(100px);
-ms-transform: rotateX(90deg) translateZ(100px);
-o-transform: rotateX(90deg) translateZ(100px);
transform: rotateX(90deg) translateZ(100px);
outline: 1px solid transparent; }
.cube > div:nth-child(2) {
-webkit-transform: translateZ(100px);
-moz-transform: translateZ(100px);
-ms-transform: translateZ(100px);
-o-transform: translateZ(100px);
transform: translateZ(100px);
outline: 1px solid transparent; }
.cube > div:nth-child(3) {
-webkit-transform: rotateY(90deg) translateZ(100px);
-moz-transform: rotateY(90deg) translateZ(100px);
-ms-transform: rotateY(90deg) translateZ(100px);
-o-transform: rotateY(90deg) translateZ(100px);
transform: rotateY(90deg) translateZ(100px);
outline: 1px solid transparent; }
.cube > div:nth-child(4) {
-webkit-transform: rotateY(180deg) translateZ(100px);
-moz-transform: rotateY(180deg) translateZ(100px);
-ms-transform: rotateY(180deg) translateZ(100px);
-o-transform: rotateY(180deg) translateZ(100px);
transform: rotateY(180deg) translateZ(100px);
outline: 1px solid transparent; }
.cube > div:nth-child(5) {
-webkit-transform: rotateY(-90deg) translateZ(100px);
-moz-transform: rotateY(-90deg) translateZ(100px);
-ms-transform: rotateY(-90deg) translateZ(100px);
-o-transform: rotateY(-90deg) translateZ(100px);
transform: rotateY(-90deg) translateZ(100px);
outline: 1px solid transparent; }
.cube > div:nth-child(6) {
-webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(100px);
-moz-transform: rotateX(-90deg) rotate(180deg) translateZ(100px);
-ms-transform: rotateX(-90deg) rotate(180deg) translateZ(100px);
-o-transform: rotateX(-90deg) rotate(180deg) translateZ(100px);
transform: rotateX(-90deg) rotate(180deg) translateZ(100px);
outline: 1px solid transparent; }
.viewport {
-webkit-transform: scale(0.6, 0.6);
-moz-transform: scale(0.6, 0.6);
-ms-transform: scale(0.6, 0.6);
-o-transform: scale(0.6, 0.6);
transform: scale(0.6, 0.6); }
.rulesbox {
  width: 32px;
  height: 32px;
  position: absolute;
  z-index: 1000;
  bottom: 32px;
  right: 24px;
}