change d20 display

src/main.css

@@ -24,6 +24,10 @@
     align-content: center;
 }
 
+.none {
+    display: none;
+}
+
 
 
 .editable-input {
@@ -50,30 +54,33 @@
 
 
 .sheet .die {
-    width:  48px;
-    height: 48px;
-    line-height: 48px;
+    display: inline-grid;
 
-    background-color: #000;
-    mask-image: url("../src/Assets/d20.svg");
-    mask-size: contain;
-    
     text-align: center;
     color: #fff;
 }
 
-.sheet .die-courage      { background-color: #b22319; }
-.sheet .die-cleverness   { background-color: #8158a3; }
-.sheet .die-intuition    { background-color: #388834; }
-.sheet .die-charisma     { background-color: #0c0c0c; }
-.sheet .die-dexterity    { background-color: #d4b366; }
-.sheet .die-agility      { background-color: #678ec3; }
-.sheet .die-constitution { background-color: #a3a3a3; }
-.sheet .die-strength     { background-color: #d5a877; }
+.sheet .die > * {
+    grid-row:    1;
+    grid-column: 1;
 
-.sheet .die-attacke       { background-color: #b22319; }
-.sheet .die-parade        { background-color: #388834; }
-.sheet .die-trefferpunkte { background-color: #0c0c0c; }
+    width:  48px;
+    height: 48px;
+    line-height: 48px;
+}
+
+.sheet .die-courage      { fill: #b22319; }
+.sheet .die-cleverness   { fill: #8158a3; }
+.sheet .die-intuition    { fill: #388834; }
+.sheet .die-charisma     { fill: #0c0c0c; }
+.sheet .die-dexterity    { fill: #d4b366; }
+.sheet .die-agility      { fill: #678ec3; }
+.sheet .die-constitution { fill: #a3a3a3; }
+.sheet .die-strength     { fill: #d5a877; }
+
+.sheet .die-attacke       { fill: #b22319; }
+.sheet .die-parade        { fill: #388834; }
+.sheet .die-trefferpunkte { fill: #0c0c0c; }
 
 .sheet .item-open,
 .sheet .item-delete,