html {background: #DDD;}
body {padding: 2em; margin: 0;
	box-sizing: border-box; background: white;}

ul.grid {padding: 0; margin: 0;}
.grid.boxed {border: 1px solid black;}
.grid.boxed.lines {padding: 1px 0 0 1px;}

.grid.small *[class^="box"] {font-size: 1em; font-weight: normal; padding: 0.25em; border-width: 0.167em;}
*[class^="box"] {border: 0.33em solid; font: bold 2em Arvo, sans-serif;
	display: flex; align-items: center; justify-content: center;}
*[class^="box"][class*="01"] {color: rgb(255,0,0);   background: rgba(255,0,0,0.1);}
*[class^="box"][class*="02"] {color: rgb(255,128,0); background: rgba(255,128,0,0.15);}
*[class^="box"][class*="03"] {color: rgb(216,168,0); background: rgba(216,168,0,0.2);}
*[class^="box"][class*="04"] {color: rgb(0,128,0);   background: rgba(0,128,0,0.1);}
*[class^="box"][class*="05"] {color: rgb(0,0,255);   background: rgba(0,0,255,0.1);}
*[class^="box"][class*="06"] {color: rgb(128,0,128); background: rgba(128,0,128,0.1);}

span[class*="gridline"] {border: 1px dashed; margin: -1px 0 0 -1px;}

/* for print preview/production
body:hover {filter: saturate(0%);}
 */