diff --git a/app/components/PlayFieldButton.vue b/app/components/PlayFieldButton.vue
index ae1f141..eab06e9 100644
--- a/app/components/PlayFieldButton.vue
+++ b/app/components/PlayFieldButton.vue
@@ -46,11 +46,11 @@ $button-size: 80px;
     padding: 0.4rem;
     justify-content: center;
     align-items: center;
-    border: 1px solid hsl(0 74% 10% / 50%);
-    border-bottom-color: hsl(0 74% 80% / 10%);
+    border: 1px solid hsl(0, 74%, 10%, 0.5);
+    border-bottom-color: hsl(0, 74%, 80%, 0.1);
     border-radius: 0.5rem;
-    background-image: linear-gradient(to bottom, hsl(0 74% 80%), hsl(0 74% 70%));
-    box-shadow: inset 3px 3px 0.5rem hsl(0 74% 20%);
+    background-image: linear-gradient(to bottom, hsl(0, 74%, 80%), hsl(0, 74%, 70%));
+    box-shadow: inset 3px 3px 0.5rem hsl(0, 74%, 20%);
     font-size: 0.2rem;
     overflow: hidden;
 
@@ -70,9 +70,9 @@ $button-size: 80px;
     }
 
     &.pressed {
-        background-image: linear-gradient(to bottom, hsl(0 74% 80%), hsl(0 74% 70%));
-        box-shadow: inset 3px 3px 0.5rem hsl(0 74% 20%);
-        border: 9px solid hsl(0 74% 10% / 50%);
+        background-image: linear-gradient(to bottom, hsl(0, 74%, 80%), hsl(0, 74%, 70%));
+        box-shadow: inset 3px 3px 0.5rem hsl(0, 74%, 20%);
+        border: 9px solid hsl(0, 74%, 10%, 0.5);
 
     }