*
{
    margin:     0;
    padding:    0;
    box-sizing: border-box;
    hyphens:    auto;
}

body
{
    background-color:   #C0C0C0;
    display: 			flex;
    justify-content: 	center;
	align-items: 		center;
    width:              100vw;
    height:             100vh;
}


svg
{
    background-color:   #C0C0C0;
    max-width:          99vh;
    width:              99vw;
    max-height:         99vw;
    height:             99vh;
}


#dice
{
/*    transform: rotate(20deg); */
    transform-origin: 50% 50%;
}

#dice rect
{
    x:      15%;
    y:      15%;
    width:  70%;
    height: 70%;
    fill:   #FFFFFF;
    stroke: #000000;
    stroke-width: 	0.8%;
    rx:             8.2%;
}

.dice-dot
{
    r:              6.2%;
    fill:           #ff724c;
    stroke:         #740000;
    stroke-width: 	0.8%;
	transition: 	opacity 0.28s;
	opacity: 0.0; /* init */
}

/* #dice-dot-center { opacity: 0.0; }  begin with a 6 ... all dots without the one in the middle */

#dice-dot-center        {   cx: 50%;    cy: 50%;    }
#dice-dot-top-left      {   cx: 30%;    cy: 30%;    }

#dice-dot-top-right     {   cx: 70%;    cy: 30%;    }
#dice-dot-bottom-left   {   cx: 30%;    cy: 70%;    }
#dice-dot-bottom-right  {   cx: 70%;    cy: 70%;    }
#dice-dot-middle-left   {   cx: 30%;    cy: 50%;    }
#dice-dot-middle-right  {   cx: 70%;    cy: 50%;    }