:root {

    /* ARBITRARY, choose whatever you want */
    --dice-size: 15vmin;

    --dice-color-h: 162;
    --dice-color-s: 100%;
    --dice-color-l: 50%;

    --dice-shadow-intensity: 20%;

    /* CALCULATED, do not touch*/
    --dice-perspective: calc( var(--dice-size) * 2);
    --dice-half: calc( var(--dice-size) / 2);
    --dice-half-small: calc( var(--dice-half) - 2px);
    --dice-border-radius: calc( var(--dice-size) * 0.12);
    --dice-color: hsl( var(--dice-color-h), var(--dice-color-s), var(--dice-color-l));
    --dice-shadow-l: calc( var(--dice-color-l) - var(--dice-shadow-intensity) );
    --dice-shadow-color: hsl( var(--dice-color-h), var(--dice-color-s), var(--dice-shadow-l));
    --dice-inner-l: calc( var(--dice-color-l) - (var(--dice-shadow-intensity) / 1.5 ) );
    --dice-inner-color: hsl( var(--dice-color-h), var(--dice-color-s), var(--dice-inner-l));

    --dice-disable-color: hsl( var(--dice-color-h), calc( var(--dice-color-s) - 10%), calc( var(--dice-color-l) - 15%));
    --dice-disable-shadow-color: hsl( var(--dice-color-h), calc( var(--dice-color-s) - 10%),  calc( var(--dice-shadow-l) - 15%));
    --dice-disable-inner-color: hsl( var(--dice-color-h), calc( var(--dice-color-s) - 10%), calc( var(--dice-color-l) - 15%));

    --dice-hover-color: hsl( var(--dice-color-h), calc( var(--dice-color-s) + 10%), calc( var(--dice-color-l) + 15%));
    --dice-hover-shadow-color: hsl( var(--dice-color-h), calc( var(--dice-color-s) + 10%),  calc( var(--dice-shadow-l) + 15%));
    --dice-hover-inner-color: hsl( var(--dice-color-h), calc( var(--dice-color-s) + 10%), calc( var(--dice-color-l) + 15%));
}

.dice-wrapper {
    width: var(--dice-size);
    height: var(--dice-size);
    perspective: var(--dice-perspective);
    margin: calc(var(--dice-half)/1.75);
    display: inline-block;
}
    #dice-result {
        font-family: sans-serif;
        margin: 20px;
        padding: 12px;
    }
    .dice-btn {
        display: block;
        margin:20px auto;
        padding:12px;
        border-radius: 2em;
        cursor: pointer;
    }
    
    .dice-btn:hover {}

    .dice-score {
        margin: 2em auto 0.5em auto;
    }

    .dice-score-total {}

    .dice {
        cursor: pointer;
        width: 100%;
        height: 100%;
        position: relative;
        transform: translateZ( calc(var(--dice-half) * -1));
        transform-style: preserve-3d;
        transition:  transform 1000ms;
    }

    .dice.disable .face {
        background: var(--dice-disable-color);
        box-shadow:inset 0 0 var(--dice-border-radius) var(--dice-disable-shadow-color);
    }
    .dice.disable .face.face-inner,.dice.disable .face-fill {
        background-color: var(--dice-disable-inner-color);
        box-shadow: none;
    }

    .dice.disable:hover .face, .dice:hover .face{
        background: var(--dice-hover-color);
        box-shadow:inset 0 0 var(--dice-border-radius) var(--dice-hover-shadow-color);
    }
    .dice.disable:hover .face.face-inner,.dice.disable:hover .face-fill, .dice:hover .face.face-inner,.dice:hover .face-fill {
        background-color: var(--dice-hover-inner-color);
        box-shadow: none;
    }

        .dice.show-front { transform: translateZ(calc(var(--dice-half) * -1)) rotateY(0deg); }
        .dice.show-back { transform: translateZ(calc(var(--dice-half) * -1)) rotateY(-180deg); }
        .dice.show-right { transform: translateZ(calc(var(--dice-half) * -1)) rotateY(-90deg); }
        .dice.show-left { transform: translateZ(calc(var(--dice-half) * -1)) rotateY(90deg); }
        .dice.show-top { transform: translateZ(calc(var(--dice-half) * -1)) rotateX(-90deg); }
        .dice.show-bottom { transform: translateZ(calc(var(--dice-half) * -1)) rotateX(90deg); }
        
            .face {
                position: absolute;
                width: var(--dice-size);
                height: var(--dice-size);
                background: var(--dice-color);
                box-shadow:inset 0 0 var(--dice-border-radius) var(--dice-shadow-color);
                border-radius: var(--dice-border-radius);
                text-align: center;
                vertical-align: middle;
                opacity: 1;
                color: #000;
                font-size: var(--dice-half);
                font-family: sans-serif;
                font-weight: 300;
            }
                .face.face-inner, .face-fill {
                    background-color: var(--dice-inner-color);
                    box-shadow: none;
                }
                .face-fill {
                    border-radius: 0;
                    transform: translateZ(0px);
                }
                    .face-fill-x { transform: rotateY(90deg); }
                    .face-fill-z { transform: rotateX(90deg); }
                .face-content {
                    position: absolute;
                    left:50%;
                    top:50%;
                    transform: translate(-50%, -50%);
                }
                    
                    .face-1 { transform: rotateX(-90deg) translateZ(var(--dice-half)); }
                    .face-2 { transform: rotateY(90deg) translateZ(var(--dice-half)); }
                    .face-3 { transform: rotateY(0deg) translateZ(var(--dice-half)); }
                    .face-4 { transform: rotateY(180deg) translateZ(var(--dice-half)); }
                    .face-5 { transform: rotateY(-90deg) translateZ(var(--dice-half)); }
                    .face-6 { transform: rotateX(90deg) translateZ(var(--dice-half)); }

                    .face-inner-1 { transform: rotateX(-90deg) translateZ(var(--dice-half-small)); }
                    .face-inner-2 { transform: rotateY(90deg) translateZ(var(--dice-half-small)); }
                    .face-inner-3 { transform: rotateY(0deg) translateZ(var(--dice-half-small)); }
                    .face-inner-4 { transform: rotateY(180deg) translateZ(var(--dice-half-small)); }
                    .face-inner-5 { transform: rotateY(-90deg) translateZ(var(--dice-half-small)); }
                    .face-inner-6 { transform: rotateX(90deg) translateZ(var(--dice-half-small)); }