<h1 class="hdln hdln--primary">royal casino</h1>
    <label class="btn roll roll--three-d" for="andicator">
      <span aria-hidden="true" class="roll__three-d-box">
        <span class="roll__three-d-box--front">test your chance</span>
        <span class="roll__three-d-box--back a">click to roll</span>
      </span>
    </label>
    <div class="scene" id="scene">
      <input type="checkbox" id="andicator" />
      <div class="cube">
        <div class="cube__face cube__face--front"><i></i></div>
        <div class="cube__face cube__face--back"><i></i><i></i></div>
        <div class="cube__face cube__face--right">
          <i></i> <i></i> <i></i> <i></i> <i></i>
        </div>
        <div class="cube__face cube__face--left">
          <i></i> <i></i> <i></i> <i></i> <i></i> <i></i>
        </div>
        <div class="cube__face cube__face--top">
          <i></i> <i></i> <i></i>
        </div>
        <div class="cube__face cube__face--bottom">
          <i></i> <i></i> <i></i> <i></i>
        </div>
      </div>
    </div>

@import url('https://fonts.googleapis.com/css?family=Rancho&display=swap');
 * {
     box-sizing: border-box;
     direction: rtl;
}
 body {
     width: 100vw;
     height: 100vh;
     background: #efefef;
     padding: 50px;
     display: flex;
     justify-content: start;
     align-items: center;
     flex-direction: column;
     flex-wrap: nowrap;
     line-height: 1.5;
     font-size: 16px;
     overflow-x : hidden;
}
 .hdln {
     width: 100%;
     text-align: center;
     font-weight: normal;
     font-family: "Rancho";
     text-transform : uppercase;
}
 .hdln--primary {
     font-size: 5em;
     margin: 0;
     animation: redlight 0.3s infinite alternate linear;
}
 .btn {
     cursor: pointer;
     width: 200px;
     height: 30px;
     border: none;
     border-radius: 5px;
     font-family : "Rancho";
     cursor : pointer;
}
 .roll__three-d-box--front, .roll__three-d-box--back {
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: row;
     flex-wrap: nowrap;
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
     left: 0;
     background: black;
     padding: 15px 10px;
     color: white;
     pointer-events: none;
     box-sizing: border-box;
     text-transform: uppercase;
}
 .roll--three-d {
     perspective: 200px;
     transition: all 0.07s linear;
     position: relative;
     cursor: pointer;
}
 .scene .cube__face--left i:nth-child(1) {
     grid-area: 1 / 1 / 1 / 1;
}
 .scene .cube__face--left i:nth-child(2) {
     grid-area: 2 / 1 / 2 / 1;
}
 .scene .cube__face--left i:nth-child(3) {
     grid-area: 3 / 1 / 3 / 1;
}
 .scene .cube__face--left i:nth-child(4) {
     grid-area: 1 / 3 / 1 / 3;
}
 .scene .cube__face--left i:nth-child(5) {
     grid-area: 2 / 3 / 2 / 3;
}
 .scene .cube__face--left i:nth-child(6) {
     grid-area: 3 / 3 / 3 / 3;
}
 .scene .cube__face--right i:nth-child(1) {
     grid-area: 1 / 1 / 1 / 1;
}
 .scene .cube__face--right i:nth-child(2) {
     grid-area: 3 / 1 / 3 / 1;
}
 .scene .cube__face--right i:nth-child(3) {
     grid-area: 2 / 2 / 2 / 2;
}
 .scene .cube__face--right i:nth-child(4) {
     grid-area: 1 / 3 / 1 / 3;
}
 .scene .cube__face--right i:nth-child(5) {
     grid-area: 3 / 3 / 3 / 3;
}
 .scene .cube__face--bottom i:nth-child(1) {
     grid-area: 1 / 1 / 1 / 1;
}
 .scene .cube__face--bottom i:nth-child(2) {
     grid-area: 3 / 1 / 3 / 1;
}
 .scene .cube__face--bottom i:nth-child(3) {
     grid-area: 1 / 3 / 1 / 3;
}
 .scene .cube__face--bottom i:nth-child(4) {
     grid-area: 3 / 3 / 3 / 3;
}
 .scene .cube__face--top i:nth-child(1) {
     grid-area: 1 / 1 / 1 / 1;
}
 .scene .cube__face--top i:nth-child(2) {
     grid-area: 2 / 2 / 2 / 2;
}
 .scene .cube__face--top i:nth-child(3) {
     grid-area: 3 / 3 / 3 / 3;
}
 .scene .cube__face--back i:nth-child(1) {
     grid-area: 1 / 1 / 1 / 1;
}
 .scene .cube__face--back i:nth-child(2) {
     grid-area: 3 / 3 / 3 / 3;
}
 .scene .cube__face--front i:nth-child(1) {
     grid-area: 2 / 2 / 2 / 2;
}
 .scene:after, .scene .cube__face i:after {
     display: block;
     content: "";
     position: absolute;
}
 .roll {
     margin-bottom: 100px;
     min-height : 30px;
}
 .roll:hover .roll__three-d-box, .roll:focus .roll__three-d-box {
     transform: translateZ(-25px) rotateX(90deg);
}
 .roll__three-d-box {
     transition: all 0.3s ease-out;
     transform: translateZ(-25px);
     transform-style: preserve-3d;
     pointer-events: none;
     position: absolute;
     top: 0;
     left: 0;
     display: block;
     width: 100%;
     height: 100%;
}
 .roll__three-d-box--front {
     transform: rotatex(0deg) translatez(14px);
}
 .roll__three-d-box--back {
     transform: rotatex(-90deg) translatez(14px);
     background-color: #c0392b !important;
}
 .roll:hover ~ div {
     transform: scale(0.7);
}
 .roll:hover ~ div > div {
     animation-duration: 0.5s;
}
 .scene {
     width: 200px;
     height: 200px;
     perspective: 600px;
     transition: 1.5s;
}
 .scene:after {
     width: 250px;
     height: 30px;
     background: #999;
     border-radius: 50%;
     filter: blur(20px);
     position: relative;
     top: 112px;
     left: 35px;
     z-index: 50;
}
 .scene input {
     display: none;
}
 .scene input:checked + div {
     animation-play-state: paused;
     animation-duration: 0.5s;
}
 .scene .cube {
     width: 100%;
     height: 100%;
     position: relative;
     transform-style: preserve-3d;
     transform: translateZ(-100px);
     animation: roll 10s linear infinite alternate;
}
 .scene .cube__face {
     display: grid;
     grid-template: repeat(3, 45px)/repeat(3, 45px);
     border: 1px solid #34495e;
     background: #2c3e50;
     position: absolute;
     width: 200px;
     height: 200px;
     padding: 32.5px;
}
 .scene .cube__face--front i::after {
     background: #e74c3c;
}
 .scene .cube__face--back i::after {
     background: #1abc9c;
}
 .scene .cube__face--top i::after {
     background: #2980b9;
}
 .scene .cube__face--bottom i::after {
     background: #f1c40f;
}
 .scene .cube__face--right i::after {
     background: #27ae60;
}
 .scene .cube__face--left i::after {
     background: #9b59b6;
}
 .scene .cube__face--front {
     transform: rotateY(0deg) translateZ(100px);
}
 .scene .cube__face--back {
     transform: rotateY(90deg) translateZ(100px);
}
 .scene .cube__face--left {
     transform: rotateY(180deg) translateZ(100px);
}
 .scene .cube__face--right {
     transform: rotateY(-90deg) translateZ(100px);
}
 .scene .cube__face--top {
     transform: rotateX(90deg) translateZ(100px);
}
 .scene .cube__face--bottom {
     transform: rotateX(-90deg) translateZ(100px);
}
 .scene .cube__face i {
     width: 100%;
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: row;
     flex-wrap: nowrap;
}
 .scene .cube__face i:after {
     width: 25px;
     height: 25px;
     border-radius: 50%;
    
}
/*# sourceMappingURL=application.css.map */
 @keyframes redlight {
     from {
         color: red;
    }
     to {
         color: black;
    }
}
 @keyframes roll {
     from, to {
         transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
     16% {
         transform: rotateY(-90deg);
    }
     33% {
         transform: rotateY(-90deg) rotateZ(90deg);
    }
     50% {
         transform: rotateY(-180deg) rotateZ(90deg);
    }
     66% {
         transform: rotateY(-270deg) rotateX(90deg);
    }
     83% {
         transform: rotateX(90deg);
    }
}