css/main.css

@@ -21,8 +21,6 @@ body {
     grid-template-rows: 1fr;
     width: 100vw;
     height: 100vh;
-
-    overflow: hidden;
 }
 
 main {
@@ -36,6 +34,9 @@ main {
     place-items: center;
 }
 
+.btn {
+    
+}
 .btn:focus {
     outline: none;
 }
@@ -47,6 +48,7 @@ main {
     position: relative;
     
     padding: 2.2rem;
+    margin: -.4rem;
 
     width: 0;
     height: 0;
@@ -58,44 +60,21 @@ 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: var(--btn-light);
+    background: #fff;
-    color: var(--btn-dark);
     filter: invert(1);
 
     width: 0;
@@ -107,7 +86,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: var(--padding);
+    padding: inherit;
 }
 
 @keyframes cbtn-click {
@@ -116,7 +95,7 @@ main {
         opacity: 1;
     }
     to {
-        padding: calc(var(--padding) * 1.3);
+        padding: inherit;
         opacity: 0;
     }
 }
@@ -143,7 +122,6 @@ main {
     text-decoration: none;
     font-family: Lato;
 }
-
 .btn.sbtn::after {
     
 }