.dice{width:100px;height:100px;transform-style:preserve-3d;transition:all .5s cubic-bezier(.42,1.57,.62,.86);position:absolute;top:calc(50% - 50px);left:calc(50% - 50px);transform:rotate3d(0,.9,.9,90deg)}.dice.rolling{animation:3s cubic-bezier(.42,1.57,.62,.86) infinite rotatePerFace}.dice.throw{animation:.35s ease-in reverse rotateDice,.5s linear throwDice}.dice .diceFace{box-sizing:border-box;width:100px;height:100px;transform-style:preserve-3d;background-color:#f6ba00;background-color:lab(79.2935% 13.5666 82.2486);border:2px solid #ffd16a;border:2px solid lab(86.3174% 9.5892 60.9829);border-radius:20px;transition:all .5s;position:absolute}.dice .diceFace:before{content:"";background-color:#ffd16a;background-color:lab(86.3174% 9.5892 60.9829);border-radius:20px;width:100%;height:100%;position:absolute;transform:translateZ(-1px)}.dice .diceFace:after{content:"";background-color:#131210;border-radius:100%;width:20px;height:20px;margin:-10px 0 0 -10px;position:absolute;top:50%;left:50%;transform:translateZ(1px)}.dice .front{transform:translateZ(50px)}.dice .front:after{background-color:#131210;width:40px;height:40px;margin:-20px 0 0 -20px}.dice .up{transform:rotateX(90deg)translateZ(50px)}.dice .up:after{margin:-30px 0 0 -30px;box-shadow:40px 40px #131210}.dice .left{transform:rotateY(-90deg)translateZ(50px)}.dice .left:after{margin:-40px 0 0 -40px;box-shadow:30px 30px #131210,60px 60px #131210}.dice .right{transform:rotateY(90deg)translateZ(50px)}.dice .right:after{background-color:#131210;margin:-30px 0 0 -30px;box-shadow:40px 0 #131210,0 40px #131210,40px 40px #131210}.dice .bottom{transform:rotateX(-90deg)translateZ(50px)}.dice .bottom:after{margin:-36px 0 0 -36px;box-shadow:26px 26px #131210,52px 52px #131210,52px 0 #131210,0 52px #131210}.dice .back{transform:rotateX(180deg)translateZ(50px)}.dice .back:after{margin:-40px 0 0 -30px;box-shadow:40px 0 #131210,0 30px #131210,40px 30px #131210,0 60px #131210,40px 60px #131210}.diceWrap{width:200px;height:200px;margin:auto;position:relative}.diceWrap:before{content:"";filter:blur(10px);background:#0003;border-radius:100%;width:70%;height:10%;position:absolute;top:90%;left:15%}@keyframes rotateDice{30%{transform:rotate3d(1,1,1,0)}to{transform:rotate3d(1,1,1,720deg)}}@keyframes rotatePerFace{16%{transform:rotate3d(-.1,.6,-.4,180deg)}32%{transform:rotate3d(-.85,-.42,.73,180deg)}48%{transform:rotate3d(-.8,.3,-.75,180deg)}64%{transform:rotate3d(.3,.45,.9,180deg)}80%{transform:rotate3d(-.16,.6,.18,180deg)}to{transform:rotate3d(-.1,.3,-1,180deg)}}@keyframes throwDice{20%{margin-top:-100px}40%{margin-top:0}60%{margin-top:-30px}80%{margin-top:0}85%{margin-top:-10px}90%{margin-top:0}95%{margin-top:-3px}to{margin-top:0}}