Firefox support

css/main.css

@@ -34,9 +34,6 @@ main {
     place-items: center;
 }
 
-.btn {
-    
-}
 .btn:focus {
     outline: none;
 }
@@ -48,7 +45,6 @@ main {
     position: relative;
     
     padding: 2.2rem;
-    margin: -.4rem;
 
     width: 0;
     height: 0;
@@ -60,21 +56,44 @@ main {
 
     border-radius: 100vw;
 }
+.btn.cbtn {
+    --padding: 5vmin;
+    padding: var(--padding);
+    font-size: 3vmin;
+}
+
+.btn.cbtn.medium {
+    --padding: 5vmin;
+    padding: var(--padding);
+    font-size: 3vmin;
+}
+
+.btn.cbtn.big {
+    --padding: 30vmin;
+    padding: var(--padding);
+    font-size: 20vmin;
+}
+
+.btn.cbtn.overlap {
+    margin: -1vmin;
+}
 .btn.cbtn > i {
     display: grid;
-
+    place-items: center;
-    padding: inherit;
 }
 .btn.cbtn > i::after {
     display: grid;
     place-content: center;
     position: absolute;
 
+    z-index: 1000;
+
     overflow: hidden;
 
     padding: 0rem;
 
-    background: #fff;
+    background: var(--btn-light);
+    color: var(--btn-dark);
     filter: invert(1);
 
     width: 0;
@@ -86,7 +105,7 @@ main {
 /* When deployed on a platform, choose one or the other, not both */
 .btn.cbtn:focus > i::after, /* TV */
 .btn.cbtn:hover > i::after  /* PC */ {
-    padding: inherit;
+    padding: var(--padding);
 }
 
 @keyframes cbtn-click {
@@ -122,6 +141,7 @@ main {
     text-decoration: none;
     font-family: Lato;
 }
+
 .btn.sbtn::after {
     
 }