.Dice{max-height:var(--dice-size);max-width:var(--dice-size);min-height:var(--dice-size);min-width:var(--dice-size);position:relative;transform-style:preserve-3d;transition:1s ease}@keyframes rolling{50%{transform:rotateX(450deg) rotateY(450deg) scale(.8) scaleZ(.8)}}.Dice--rolling{animation:rolling 2s infinite}.Dice .Face{align-items:center;background:#000;box-shadow:0 0 20px -10px #0000004d;display:flex;height:100%;justify-content:center;overflow:hidden;position:absolute;transform-style:preserve-3d;width:100%}.Dice .Face .Face-dot{background:linear-gradient(#ffffffe6,#fff)}.Dice .Face-1{transform:translateZ(calc(var(--dice-size)/2))}.Dice .Face-2{transform:rotateX(90deg) translateZ(calc(var(--dice-size)/2))}.Dice .Face-3{transform:rotateY(-90deg) translateZ(calc(var(--dice-size)/2))}.Dice .Face-4{transform:rotateY(90deg) translateZ(calc(var(--dice-size)/2))}.Dice .Face-5{transform:rotateX(-90deg) translateZ(calc(var(--dice-size)/2))}.Dice .Face-6{transform:rotateX(180deg) translateZ(calc(var(--dice-size)/2))}