diff --git a/assets/css/_board.scss b/assets/css/_board.scss
index 2de3281..2aef1aa 100644
--- a/assets/css/_board.scss
+++ b/assets/css/_board.scss
@@ -109,12 +109,12 @@
 
   &.selected {
     background-color: mix($black-square-color, $selected-square-color, 60%);
-    box-shadow: inset 0 0 0 (var(--board-size) / 400) $selected-outline-color;
+    box-shadow: inset 0 0 0 calc(var(--board-size) / 400) $selected-outline-color;
   }
 
   &.available {
     background-color: mix($black-square-color, $available-square-color, 80%);
-    box-shadow: inset 0 0 0 (var(--board-size) / 400) $available-outline-color;
+    box-shadow: inset 0 0 0 calc(var(--board-size) / 400) $available-outline-color;
   }
 }
 
@@ -123,12 +123,12 @@
 
   &.selected {
     background-color: mix($white-square-color, $selected-square-color, 60%);
-    box-shadow: inset 0 0 0 (var(--board-size) / 400) $selected-outline-color;
+    box-shadow: inset 0 0 0 calc(var(--board-size) / 400) $selected-outline-color;
   }
 
   &.available {
     background-color: mix($white-square-color, $available-square-color, 80%);
-    box-shadow: inset 0 0 0 (var(--board-size) / 400) $available-outline-color;
+    box-shadow: inset 0 0 0 calc(var(--board-size) / 400) $available-outline-color;
   }
 }
 
diff --git a/assets/css/_variables.scss b/assets/css/_variables.scss
index 62f5f1d..5ca89b3 100644
--- a/assets/css/_variables.scss
+++ b/assets/css/_variables.scss
@@ -20,7 +20,7 @@ $available-square-color: #6f0;
 
 $square-outline-color: darken($black-square-color, 20%);
 $selected-outline-color: lighten($selected-square-color, 20%);
-$available-outline-color: rgba(lighten($available-square-color, 20%), 0.7);
+$available-outline-color: rgba(lighten($available-square-color, 20%), 0.5);
 
 $colours: "black" "white";
 $pieces: king queen bishop knight rook pawn;