#dice{display:flex;flex:auto;flex-wrap:wrap;justify-content:center}.dice{width:104px;height:104px;padding:4px;margin:16px;display:flex;border-radius:10%;object-fit:contain;box-shadow:inset 0 5px white,inset 0 -5px #bbb,inset 5px 0 #d7d7d7,inset -5px 0 #d7d7d7;background-color:#e7e7e7}.pip{display:block;width:24px;height:24px;border-radius:50%;margin:4px;background-color:#333;box-shadow:inset 0 3px #111,inset 0 -3px #555}.dice.red{box-shadow:inset 0 5px rgba(255,255,255,1),inset 0 -5px rgba(0,0,0,0.2),inset 5px 0 rgba(0,0,0,0.3),inset -5px 0 rgba(0,0,0,0.3);background:#e02525}.dice.red .pip{background-color:rgba(255,255,255,0.9);box-shadow:inset 0 3px rgba(157,27,27,1),inset 0 -3px rgba(255,255,255,1)}.dice .col{display:flex;flex:auto;flex-direction:column}.dice .col ~ .col:last-of-type{align-items:flex-end;justify-content:flex-end}.dice[data-pips="1"],.dice[data-pips="3"] .col:first-of-type + .col{align-items:center;justify-content:center}.dice[data-pips="1"] .col{align-items:center}.dice[data-pips="1"] .pip ~ .pip,.dice[data-pips="1"] .col:first-child ~ .col,.dice[data-pips="2"] .col:first-child + .col,.dice[data-pips="4"] .col:first-child + .col,.dice[data-pips="5"] .col:first-child + .col .pip:last-child,.dice[data-pips="1"] .pip ~ .pip,.dice[data-pips="2"] .pip ~ .pip,.dice[data-pips="3"] .pip ~ .pip{display:none}.dice[data-pips="4"] .col,.dice[data-pips="5"] .col:first-child,.dice[data-pips="5"] .col:last-child,.dice[data-pips="6"] .col{justify-content:space-between !important}.dice[data-pips="5"] .col:first-child + .col{justify-content:center}