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

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

svg
{
    background-color:   #feffdb;
    max-width:          90vh;
    width:              90vw;
    max-height:         90vw;
    height:             90vh;
}

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

#dice rect
{
    x:      46%;
    y:      46%;
    width:  8%;
    height: 8%;
    fill:   #000000;
/*
    stroke: #ffffff;
    stroke-width: 	0.6%;
*/
    rx:     1.5%;
}

.dice-dot
{
    r:              1.0%;
    fill:           #FFFFFF;
/*    
    stroke:         #999999;
    stroke-width: 	0.1%;
*/
	transition: 	opacity 0.28s;
}

#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: 48%;    cy: 48%;    }
#dice-dot-top-right     {   cx: 52%;    cy: 48%;    }
#dice-dot-bottom-left   {   cx: 48%;    cy: 52%;    }
#dice-dot-bottom-right  {   cx: 52%;    cy: 52%;    }
#dice-dot-middle-left   {   cx: 48%;    cy: 50%;    }
#dice-dot-middle-right  {   cx: 52%;    cy: 50%;    }



circle
{
	r: 				3.5%;
	stroke-width: 	0.3%;
	transition: 	stroke-width 0.1s;
	stroke: 		black;
}

circle[class^="p"]
{
    stroke-width: 0.8%;
    stroke: #aaaaaa;
    r: 3%;
}

circle[class^="p"]:active:hover
{
    stroke-width: 1.5%
}


circle.field { fill: white; }


circle.f0 { fill: #FF9999;      }
circle.p0 { fill: #880000; stroke: #FF0000;  }

circle.f1 { fill: #99FF99;    }
circle.p1 { fill: #009900;  stroke: #00FF00; }

circle.f2 { fill: #99bbFF;     }
circle.p2 { fill: #000099;  stroke: #0028FF;  }

circle.f3 { fill: #FFFF99;   }
circle.p3 { fill: #c6c60d;   stroke: #FFFF00;  }