diff --git a/_sass/isotope.scss b/_sass/isotope.scss
index 4eb8514..569f91a 100644
--- a/_sass/isotope.scss
+++ b/_sass/isotope.scss
@@ -9,7 +9,7 @@
   margin: 0 10px 10px 0;
   width: 50px;
   height: 50px;
-  background: rgba(65, 106, 0, 0.473);
+  background: $color3;
   border: none;
   border-radius: 300px;
 
@@ -20,13 +20,13 @@
 
 .button:hover {
 
-  text-shadow: 0 1px hsla(0, 0%, 100%, 0.5);
-  color: #222;
+  text-shadow: 0 1px $color4;
+  color: $color4;
 }
 
 .button:active,
 .button.is-checked {
-  background: linear-gradient(230deg, rgba(255, 0, 255, 0.902), rgba(66, 107, 0, 0.902));
+  background: linear-gradient(230deg, $color5, $color3);
   background-size: 1000% 1000%;
   
   -webkit-animation: AnimationName 30s ease infinite;
@@ -35,12 +35,12 @@
 }
 
 .button.is-checked {
-  color: white;
-  text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);
+  color: $color1;
+  text-shadow: $color4;
 }
 
 .button:active {
-  box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
+  box-shadow: inset 0 1px 10px $color4;
 }
 
 /* ---- button-group ---- */