diff --git a/.github/README-es.md b/.github/README-es.md
index 32e7065..78384ca 100644
--- a/.github/README-es.md
+++ b/.github/README-es.md
@@ -47,7 +47,7 @@ NES.css no contiene ninguna tipografía, pero recomendamos la siguiente lista de
 |-----------|--------------------------------------------------------------------|
 | (Default) | [Press Start 2P](https://fonts.google.com/specimen/Press+Start+2P) |
 | Inglés   | [Kongtext](https://www.dafont.com/kongtext.font)                   |
-| Japonés  | [美咲フォント](http://www.geocities.jp/littlimi/misaki.htm)          |
+| Japonés  | [美咲フォント](http://littlelimit.net/misaki.htm)          |
 | Japonés  | [Nu もち](http://kokagem.sakura.ne.jp/font/mochi/)                  |
 | Coreano  | [둥근모꼴](http://cactus.tistory.com/193)                            |
 
diff --git a/.github/README-jp.md b/.github/README-jp.md
index 6a7b98e..7dbed27 100644
--- a/.github/README-jp.md
+++ b/.github/README-jp.md
@@ -47,7 +47,7 @@ NES.cssはいかなるフォントも提供していませんが、ライブラ
 |-----------|--------------------------------------------------------------------|
 | (デフォルト) | [Press Start 2P](https://fonts.google.com/specimen/Press+Start+2P) |
 | 英語      | [Kongtext](https://www.dafont.com/kongtext.font)                   |
-| 日本語    | [美咲フォント](http://www.geocities.jp/littlimi/misaki.htm)          |
+| 日本語    | [美咲フォント](http://littlelimit.net/misaki.htm)          |
 | 日本語    | [Nu もち](http://kokagem.sakura.ne.jp/font/mochi/)                  |
 | 韓国語    | [둥근모꼴](http://cactus.tistory.com/193)                            |
 
diff --git a/.github/README-pt-BR.md b/.github/README-pt-BR.md
index c76bf3a..845bd11 100644
--- a/.github/README-pt-BR.md
+++ b/.github/README-pt-BR.md
@@ -47,7 +47,7 @@ NES.css não fornece nenhuma fonte, mas nós mantemos uma lista de fontes recome
 |-----------|--------------------------------------------------------------------|
 | (Padrão) | [Press Start 2P](https://fonts.google.com/specimen/Press+Start+2P) |
 | Inglês   | [Kongtext](https://www.dafont.com/kongtext.font)                   |
-| Japonês  | [美咲フォント](http://www.geocities.jp/littlimi/misaki.htm)          |
+| Japonês  | [美咲フォント](http://littlelimit.net/misaki.htm)          |
 | Japonês  | [Nu もち](http://kokagem.sakura.ne.jp/font/mochi/)                  |
 | Coreano  | [둥근모꼴](http://cactus.tistory.com/193)                            |
 
diff --git a/.github/README-zh-CN.md b/.github/README-zh-CN.md
index 5f44a33..aaf95bb 100644
--- a/.github/README-zh-CN.md
+++ b/.github/README-zh-CN.md
@@ -35,7 +35,7 @@ yarn add nes.css
 |----|----|
 |(Default)|[Press Start 2P](https://fonts.google.com/specimen/Press+Start+2P)|
 |English|[Kongtext](https://www.dafont.com/kongtext.font)|
-|Japanese|[美咲フォント](http://www.geocities.jp/littlimi/misaki.htm)|
+|Japanese|[美咲フォント](http://littlelimit.net/misaki.htm)|
 |Japanese|[Nu もち](http://kokagem.sakura.ne.jp/font/mochi/)|
 | Korean|[둥근모꼴](http://cactus.tistory.com/193)|
 
diff --git a/README.md b/README.md
index ee1d1cf..72ff32e 100644
--- a/README.md
+++ b/README.md
@@ -47,7 +47,7 @@ NES.css doesn't provide any fonts, but we do maintain the following list of font
 |-----------|--------------------------------------------------------------------|
 | (Default) | [Press Start 2P](https://fonts.google.com/specimen/Press+Start+2P) |
 | English   | [Kongtext](https://www.dafont.com/kongtext.font)                   |
-| Japanese  | [美咲フォント](http://www.geocities.jp/littlimi/misaki.htm)          |
+| Japanese  | [美咲フォント](http://littlelimit.net/misaki.htm)          |
 | Japanese  | [Nu もち](http://kokagem.sakura.ne.jp/font/mochi/)                  |
 | Korean    | [둥근모꼴](http://cactus.tistory.com/193)                            |
 
diff --git a/scss/base/variables.scss b/scss/base/variables.scss
index 28782cd..bcf8924 100644
--- a/scss/base/variables.scss
+++ b/scss/base/variables.scss
@@ -7,7 +7,7 @@ $background-color: $color-white;
 
 $cursor-url: url(https://unpkg.com/nes.css/assets/cursor.png);
 $cursor-click-url: url(https://unpkg.com/nes.css/assets/cursor-click.png);
-$border-size: 0.25em;
+$border-size: 4px;
 
 $default-colors: (
   normal: $background-color,
diff --git a/scss/elements/_index.scss b/scss/elements/_index.scss
index 39e369e..60183ef 100644
--- a/scss/elements/_index.scss
+++ b/scss/elements/_index.scss
@@ -4,11 +4,9 @@
 @import "badges.scss";
 @import "balloons.scss";
 @import "buttons.scss";
-@import "checkboxes.scss";
 @import "containers.scss";
 @import "dialogs.scss";
 @import "lists.scss";
 @import "progress.scss";
-@import "radios.scss";
 @import "tables.scss";
 @import "text.scss";
diff --git a/scss/elements/buttons.scss b/scss/elements/buttons.scss
index a9a0644..1411939 100644
--- a/scss/elements/buttons.scss
+++ b/scss/elements/buttons.scss
@@ -32,7 +32,7 @@
 
   position: relative;
   display: inline-block;
-  padding: 10px 12px;
+  padding: 6px 8px;
   margin: $border-size;
   text-align: center;
   vertical-align: middle;
diff --git a/scss/elements/containers.scss b/scss/elements/containers.scss
index 81d1d20..19d95a9 100644
--- a/scss/elements/containers.scss
+++ b/scss/elements/containers.scss
@@ -21,7 +21,7 @@
     > .title {
       display: table;
       padding: 0 0.5rem;
-      margin: -2rem 0 1rem;
+      margin: -1.8rem 0 1rem;
       font-size: 1rem;
       background-color: $background-color;
     }
@@ -40,10 +40,23 @@
   }
 
   &.is-dark {
+    position: relative;
+    margin: $border-size;
     color: $background-color;
     background-color: $base-color;
     border-color: white;
 
+    &::after {
+      position: absolute;
+      top: -$border-size * 1.8;
+      right: -$border-size * 1.8;
+      bottom: -$border-size * 1.8;
+      left: -$border-size * 1.8;
+      z-index: -1;
+      content: "";
+      background-color: $base-color;
+    }
+
     &.with-title {
       > .title {
         color: $background-color;
@@ -56,11 +69,7 @@
     @include rounded-corners();
 
     padding: 1rem 1.5rem;
-    margin: 14px 8px;
-
-    &.is-dark {
-      @include rounded-corners(true);
-    }
+    margin: $border-size;
 
     &.with-title {
       > .title {
@@ -79,5 +88,30 @@
         }
       }
     }
+
+    &.is-dark {
+      @include rounded-corners(true);
+      &::after {
+        content: none;
+      }
+
+      &.with-title {
+        > .title {
+          margin-top: -1.3rem;
+        }
+
+        &.is-centered {
+          > .title {
+            margin: -1.3rem auto 1rem;
+          }
+        }
+
+        &.is-right {
+          > .title {
+            margin: -1.3rem 0 1rem auto;
+          }
+        }
+      }
+    }
   }
 }
diff --git a/scss/elements/lists.scss b/scss/elements/lists.scss
index cd383b5..485b3f6 100644
--- a/scss/elements/lists.scss
+++ b/scss/elements/lists.scss
@@ -1,20 +1,22 @@
 .nes-list {
+  // prettier-ignore
   $disc: (
-    (0, 0, 0, 1, 1, 0, 0, 0),
-    (0, 0, 1, 1, 1, 1, 0, 0),
-    (0, 1, 1, 1, 1, 1, 1, 0),
-    (0, 1, 1, 1, 1, 1, 1, 0),
-    (0, 0, 1, 1, 1, 1, 0, 0),
-    (0, 0, 0, 1, 1, 0, 0, 0)
-  );
+    (0,0,0,1,1,0,0,0),
+    (0,0,1,1,1,1,0,0),
+    (0,1,1,1,1,1,1,0),
+    (0,1,1,1,1,1,1,0),
+    (0,0,1,1,1,1,0,0),
+    (0,0,0,1,1,0,0,0)
+    );
 
+  // prettier-ignore
   $circle: (
-    (0, 0, 0, 1, 1, 0, 0, 0),
-    (0, 0, 1, 1, 1, 1, 0, 0),
-    (0, 1, 1, 0, 0, 1, 1, 0),
-    (0, 1, 1, 0, 0, 1, 1, 0),
-    (0, 0, 1, 1, 1, 1, 0, 0),
-    (0, 0, 0, 1, 1, 0, 0, 0)
+    (0,0,0,1,1,0,0,0),
+    (0,0,1,1,1,1,0,0),
+    (0,1,1,0,0,1,1,0),
+    (0,1,1,0,0,1,1,0),
+    (0,0,1,1,1,1,0,0),
+    (0,0,0,1,1,0,0,0)
   );
   $colors: ($base-color, map-get($default-colors, "shadow"));
 
@@ -28,19 +30,17 @@
     position: absolute;
     top: calc(50% - 8px);
     left: -22px;
-    font-size: 2px;
     content: "";
 
-    @include pixelize($disc, $colors);
+    @include pixelize(2px, $disc, $colors);
   }
 
   &.is-circle li::before {
     position: absolute;
     top: calc(50% - 8px);
     left: -22px;
-    font-size: 2px;
     content: "";
 
-    @include pixelize($circle, $colors);
+    @include pixelize(2px, $circle, $colors);
   }
 }
diff --git a/scss/form/_index.scss b/scss/form/_index.scss
index 0d50df3..7ca43be 100644
--- a/scss/form/_index.scss
+++ b/scss/form/_index.scss
@@ -1,4 +1,6 @@
 @charset "utf-8";
 
 @import "inputs.scss";
+@import "radios.scss";
+@import "checkboxes.scss";
 @import "selects.scss";
diff --git a/scss/elements/checkboxes.scss b/scss/form/checkboxes.scss
similarity index 88%
rename from scss/elements/checkboxes.scss
rename to scss/form/checkboxes.scss
index a6f2fd0..14c75c9 100644
--- a/scss/elements/checkboxes.scss
+++ b/scss/form/checkboxes.scss
@@ -62,23 +62,22 @@
     position: absolute;
     top: -3px;
     left: -28px;
-    font-size: 2px;
     content: "";
   }
 
   // prettier-ignore
   & + span::before { /* stylelint-disable-line no-descending-specificity */
-    @include pixelize($checkbox, $colors);
+    @include pixelize(2px, $checkbox, $colors);
   }
   // prettier-ignore
   &:focus + span::before { /* stylelint-disable-line no-descending-specificity */
-    @include pixelize($checkbox-focus, $colors);
+    @include pixelize(2px, $checkbox-focus, $colors);
   }
 
   &:checked + span::before {
-    @include pixelize($checkbox-checked, $colors);
+    @include pixelize(2px, $checkbox-checked, $colors);
   }
   &:checked:focus + span::before {
-    @include pixelize($checkbox-checked-focus, $colors);
+    @include pixelize(2px, $checkbox-checked-focus, $colors);
   }
 }
diff --git a/scss/elements/radios.scss b/scss/form/radios.scss
similarity index 88%
rename from scss/elements/radios.scss
rename to scss/form/radios.scss
index 54b7724..ac13669 100644
--- a/scss/elements/radios.scss
+++ b/scss/form/radios.scss
@@ -35,10 +35,9 @@
     position: absolute;
     top: -2px;
     left: -20px;
-    font-size: 2px;
     content: "";
 
-    @include pixelize($radio, $colors);
+    @include pixelize(2px, $radio, $colors);
   }
 
   &:checked:hover,
@@ -49,6 +48,6 @@
   }
 
   &:checked:focus + span::before {
-    @include pixelize($radio-checked-focus, $colors);
+    @include pixelize(2px, $radio-checked-focus, $colors);
   }
 }
diff --git a/scss/form/selects.scss b/scss/form/selects.scss
index 2baa24d..639f336 100644
--- a/scss/form/selects.scss
+++ b/scss/form/selects.scss
@@ -31,12 +31,11 @@
   }
 
   &::after {
-    @include pixelize($dropdown, $colors);
+    @include pixelize(3px, $dropdown, $colors);
 
     position: absolute;
     top: calc(50% - 11px);
     right: 36px;
-    font-size: 3px;
     pointer-events: none;
     content: "";
   }
diff --git a/scss/icons/icons.scss b/scss/icons/icons.scss
index cb451bf..27bbbb5 100644
--- a/scss/icons/icons.scss
+++ b/scss/icons/icons.scss
@@ -21,115 +21,129 @@
 @import "trophy.scss";
 
 .nes-icon {
+  $default-size: 1px;
+  $icon-size: $default-size * 16;
+
   position: relative;
   display: inline-block;
-  width: calc(1em * 16);
-  height: calc(1em * 16);
+  width: $icon-size;
+  height: $icon-size;
+  margin-right: $icon-size;
+  margin-bottom: $icon-size;
 
-  // font size dictates pixel size, everything will adjust
-  // default
-  font-size: 2px;
+  // NOTE: Use `transform: scale()` because cannot use font-size less than 10px on Chrome
+  // default 2px
+  transform: scale(2);
+  transform-origin: top left;
 
   &.is-small {
-    font-size: 1px;
+    margin: 0;
+    // 1px
+    transform: scale(1);
   }
 
   &.is-medium {
-    font-size: 3px;
+    margin-right: $icon-size * 2;
+    margin-bottom: $icon-size * 2;
+    // 3px
+    transform: scale(3);
   }
 
   &.is-large {
-    font-size: 4px;
+    margin-right: $icon-size * 3;
+    margin-bottom: $icon-size * 3;
+    // 4px
+    transform: scale(4);
   }
 
   &::before {
     position: absolute;
-    top: -1em;
-    left: -1em;
+    top: $default-size * -1;
+    left: $default-size * -1;
     display: block;
     content: "";
     background: transparent;
   }
 
   &.heart::before {
-    @include pixelize($icon-heart, $icon-heart-colors);
+    @include pixelize($default-size, $icon-heart, $icon-heart-colors);
   }
   &.heart.is-empty::before {
-    @include pixelize($icon-heart-empty, $icon-heart-empty-colors);
+    @include pixelize($default-size, $icon-heart-empty, $icon-heart-empty-colors);
   }
 
   &.star::before {
-    @include pixelize($icon-star, $icon-star-colors);
+    @include pixelize($default-size, $icon-star, $icon-star-colors);
   }
   &.star.is-empty::before {
-    @include pixelize($icon-star-empty, $icon-star-empty-colors);
+    @include pixelize($default-size, $icon-star-empty, $icon-star-empty-colors);
   }
   &.star.is-half::before {
-    @include pixelize($icon-star-half, $icon-star-colors);
+    @include pixelize($default-size, $icon-star-half, $icon-star-colors);
   }
   &.star.is-transparent::before {
-    @include pixelize($icon-star-transparent, $icon-star-colors);
+    @include pixelize($default-size, $icon-star-transparent, $icon-star-colors);
   }
 
   &.trophy::before {
-    @include pixelize($icon-trophy, $icon-trophy-colors);
+    @include pixelize($default-size, $icon-trophy, $icon-trophy-colors);
   }
   &.trophy.is-empty::before {
-    @include pixelize($icon-trophy-empty, $icon-trophy-empty-colors);
+    @include pixelize($default-size, $icon-trophy-empty, $icon-trophy-empty-colors);
   }
 
   &.like::before {
-    @include pixelize($icon-like, $icon-like-colors);
+    @include pixelize($default-size, $icon-like, $icon-like-colors);
   }
   &.like.is-empty::before {
-    @include pixelize($icon-like-empty, $icon-like-empty-colors);
+    @include pixelize($default-size, $icon-like-empty, $icon-like-empty-colors);
   }
 
   &.twitter::before {
-    @include pixelize($icon-twitter, $icon-twitter-colors);
+    @include pixelize($default-size, $icon-twitter, $icon-twitter-colors);
   }
 
   &.facebook::before {
-    @include pixelize($icon-facebook, $icon-facebook-colors);
+    @include pixelize($default-size, $icon-facebook, $icon-facebook-colors);
   }
 
   &.github::before {
-    @include pixelize($icon-github, $icon-github-colors);
+    @include pixelize($default-size, $icon-github, $icon-github-colors);
   }
 
   &.youtube::before {
-    @include pixelize($icon-youtube, $icon-youtube-colors);
+    @include pixelize($default-size, $icon-youtube, $icon-youtube-colors);
   }
 
   &.close::before {
-    @include pixelize($icon-close, $icon-close-colors);
+    @include pixelize($default-size, $icon-close, $icon-close-colors);
   }
 
   &.google::before {
-    @include pixelize($icon-google, $icon-google-colors);
+    @include pixelize($default-size, $icon-google, $icon-google-colors);
   }
 
   &.medium::before {
-    @include pixelize($icon-medium, $icon-medium-colors);
+    @include pixelize($default-size, $icon-medium, $icon-medium-colors);
   }
 
   &.twitch::before {
-    @include pixelize($icon-twitch, $icon-twitch-colors);
+    @include pixelize($default-size, $icon-twitch, $icon-twitch-colors);
   }
 
   &.reddit::before {
-    @include pixelize($icon-reddit, $icon-reddit-colors);
+    @include pixelize($default-size, $icon-reddit, $icon-reddit-colors);
   }
 
   &.whatsapp::before {
-    @include pixelize($icon-whatsapp, $icon-whatsapp-colors);
+    @include pixelize($default-size, $icon-whatsapp, $icon-whatsapp-colors);
   }
 
   &.gmail::before {
-    @include pixelize($icon-gmail, $icon-gmail-colors);
+    @include pixelize($default-size, $icon-gmail, $icon-gmail-colors);
   }
 
   &.linkedin::before {
-    @include pixelize($icon-linkedin, $icon-linkedin-colors);
+    @include pixelize($default-size, $icon-linkedin, $icon-linkedin-colors);
   }
 }
diff --git a/scss/pixel-arts/ash.scss b/scss/pixel-arts/ash.scss
index 023dc9c..f41374f 100644
--- a/scss/pixel-arts/ash.scss
+++ b/scss/pixel-arts/ash.scss
@@ -1,7 +1,5 @@
 .nes-ash {
-  // prettier-ignore
-  $ash-colors: (#f8f8ff, #ff614e, #007f7f,
-  #181818, #ffe3c5, #426adb, #4169e1);
+  $ash-colors: (#f8f8ff, #ff614e, #007f7f, #181818, #ffe3c5, #426adb, #4169e1);
   // prettier-ignore
   $ash: (
     (0,0,0,0,4,4,4,4,4,4,0,0,0,0),
@@ -20,20 +18,20 @@
     (4,3,3,4,4,4,4,4,3,3,4,0,0,0),
     (0,4,4,0,0,0,0,0,4,4,0,0,0,0)
   );
+  $size: 6px;
 
   position: relative;
   display: inline-block;
-  width: calc(1em * 14);
-  height: calc(1em * 15);
-  font-size: 6px;
+  width: $size * length(nth($ash, 1));
+  height: $size * length($ash);
 
   &::before {
     position: absolute;
-    top: -1em;
-    left: -1em;
+    top: -$size;
+    left: -$size;
     content: "";
     background: transparent;
 
-    @include pixelize($ash, $ash-colors);
+    @include pixelize($size, $ash, $ash-colors);
   }
 }
diff --git a/scss/pixel-arts/bcrikko.scss b/scss/pixel-arts/bcrikko.scss
index 22810d0..9680231 100644
--- a/scss/pixel-arts/bcrikko.scss
+++ b/scss/pixel-arts/bcrikko.scss
@@ -20,20 +20,20 @@
     (2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2),
     (0,2,2,2,2,2,2,2,2,2,2,2,2,2,2,0),
   );
+  $size: 6px;
 
   position: relative;
   display: inline-block;
-  width: calc(1em * 16);
-  height: calc(1em * 16);
-  font-size: 4px;
+  width: $size * length(nth($bcrikko, 1));
+  height: $size * length($bcrikko);
 
   &::before {
     position: absolute;
-    top: -1em;
-    left: -1em;
+    top: -$size;
+    left: -$size;
     content: "";
     background: transparent;
 
-    @include pixelize($bcrikko, $bcrikko-colors);
+    @include pixelize($size, $bcrikko, $bcrikko-colors);
   }
 }
diff --git a/scss/pixel-arts/bulbasaur.scss b/scss/pixel-arts/bulbasaur.scss
index ed35b06..bbe7efe 100644
--- a/scss/pixel-arts/bulbasaur.scss
+++ b/scss/pixel-arts/bulbasaur.scss
@@ -1,41 +1,39 @@
 .nes-bulbasaur {
-  // prettier-ignore
-  $bulbasaur-colors: (#000, #8beb46, #2d8d22, #5ceee1,
-   #3fc3b5, #fdfdf5, #ca242a);
+  $bulbasaur-colors: (#000, #8beb46, #2d8d22, #5ceee1, #3fc3b5, #fdfdf5, #ca242a);
   // prettier-ignore
   $bulbasaur: (
-    (0,0,0,0,0,0,0,0,0,0,0,0,1,1,1),
-    (0,0,0,0,0,0,0,0,0,0,0,1,2,2,2,1),
-    (0,0,0,0,0,0,0,0,0,1,1,1,2,2,2,1),
-    (0,0,0,0,0,0,0,1,1,2,2,3,2,2,3,2,1,1),
-    (0,0,0,1,1,0,1,2,2,2,3,3,2,2,3,2,2,2,1),
+    (0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0),
+    (0,0,0,0,0,0,0,0,0,0,0,1,2,2,2,1,0,0,0,0),
+    (0,0,0,0,0,0,0,0,0,1,1,1,2,2,2,1,0,0,0,0),
+    (0,0,0,0,0,0,0,1,1,2,2,3,2,2,3,2,1,1,0,0),
+    (0,0,0,1,1,0,1,2,2,2,3,3,2,2,3,2,2,2,1,0),
     (0,0,1,4,4,1,1,2,2,3,2,3,2,2,2,3,2,2,2,1),
     (0,0,1,4,4,4,1,1,3,2,3,2,2,2,2,2,3,2,2,1),
     (0,0,1,4,4,4,4,5,1,2,3,2,2,2,2,2,3,2,2,1),
-    (0,1,4,4,5,4,5,5,4,1,1,1,2,2,2,2,3,2,1),
-    (1,1,5,4,4,4,4,4,4,4,4,1,2,2,2,1,1,1,1),
-    (1,1,5,4,4,4,5,4,4,4,1,5,1,1,1,5,5,5,1),
-    (1,4,4,4,4,5,4,1,1,4,5,5,5,5,5,1,5,6,1),
-    (1,5,4,4,4,4,1,7,6,6,5,5,1,5,5,1,1,1),
-    (0,1,5,4,4,4,1,7,6,4,5,1,5,5,1),
-    (0,0,1,1,5,5,5,5,5,5,1,5,5,5,1),
-    (0,0,0,0,1,1,1,1,1,1,1,6,5,6,1),
-    (0,0,0,0,0,0,0,0,0,0,0,1,1,1,0),
+    (0,1,4,4,5,4,5,5,4,1,1,1,2,2,2,2,3,2,1,0),
+    (1,1,5,4,4,4,4,4,4,4,4,1,2,2,2,1,1,1,1,0),
+    (1,1,5,4,4,4,5,4,4,4,1,5,1,1,1,5,5,5,1,0),
+    (1,4,4,4,4,5,4,1,1,4,5,5,5,5,5,1,5,6,1,0),
+    (1,5,4,4,4,4,1,7,6,6,5,5,1,5,5,1,1,1,0,0),
+    (0,1,5,4,4,4,1,7,6,4,5,1,5,5,1,0,0,0,0,0),
+    (0,0,1,1,5,5,5,5,5,5,1,5,5,5,1,0,0,0,0,0),
+    (0,0,0,0,1,1,1,1,1,1,1,6,5,6,1,0,0,0,0,0),
+    (0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0),
   );
+  $size: 6px;
 
   position: relative;
   display: inline-block;
-  width: calc(1em * 20);
-  height: calc(1em * 17);
-  font-size: 6px;
+  width: $size * length(nth($bulbasaur, 1));
+  height: $size * length($bulbasaur);
 
   &::before {
     position: absolute;
-    top: -1em;
-    left: -1em;
+    top: -$size;
+    left: -$size;
     content: "";
     background: transparent;
 
-    @include pixelize($bulbasaur, $bulbasaur-colors);
+    @include pixelize($size, $bulbasaur, $bulbasaur-colors);
   }
 }
diff --git a/scss/pixel-arts/charmander.scss b/scss/pixel-arts/charmander.scss
index d7e8443..a0c1b9c 100644
--- a/scss/pixel-arts/charmander.scss
+++ b/scss/pixel-arts/charmander.scss
@@ -1,42 +1,40 @@
 .nes-charmander {
-  // prettier-ignore
-  $charmander-colors: (#000202, #f77702, #eb2010,
-    #fdfcff, #e5d70a, #e7d70e);
+  $charmander-colors: (#000202, #f77702, #eb2010, #fdfcff, #e5d70a, #e7d70e);
   // prettier-ignore
   $charmander: (
-    (0,0,0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,1),
-    (0,0,0,1,2,2,2,2,1,0,0,0,0,0,0,0,1,3,1),
-    (0,0,1,2,2,2,2,2,2,1,0,0,0,0,0,0,1,3,3,1),
-    (0,0,1,2,2,2,2,2,2,1,0,0,0,0,0,0,1,3,3,1),
+    (0,0,0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,1,0,0,0),
+    (0,0,0,1,2,2,2,2,1,0,0,0,0,0,0,0,1,3,1,0,0),
+    (0,0,1,2,2,2,2,2,2,1,0,0,0,0,0,0,1,3,3,1,0),
+    (0,0,1,2,2,2,2,2,2,1,0,0,0,0,0,0,1,3,3,1,0),
     (0,1,2,2,2,2,2,2,2,2,1,0,0,0,0,1,3,3,2,3,1),
     (1,2,2,2,2,4,1,2,2,2,1,0,0,0,0,1,3,2,6,3,1),
     (1,2,2,2,2,1,1,2,2,2,2,1,0,0,0,1,3,5,5,3,1),
-    (1,2,2,2,2,1,1,2,2,2,2,1,0,0,0,0,1,5,1,1),
-    (0,1,2,2,2,2,2,2,2,2,2,2,1,0,0,0,1,2,1),
-    (0,0,1,1,2,2,2,2,2,2,2,2,2,1,0,1,2,2,1),
-    (0,0,0,0,1,1,1,2,2,1,2,2,2,1,1,2,2,1),
-    (0,0,0,0,0,1,6,5,1,2,2,2,2,2,1,2,2,1),
-    (0,0,0,0,0,1,5,5,5,1,1,2,2,2,1,2,1),
-    (0,0,0,0,1,4,1,6,5,5,2,2,2,2,1,1),
-    (0,0,0,0,0,1,1,1,5,5,2,2,2,1,1),
-    (0,0,0,0,0,0,0,0,1,1,1,0,1,1),
-    (0,0,0,0,0,0,0,0,0,1,4,0,4,1),
-    (0,0,0,0,0,0,0,0,0,0,1,1,1,0)
+    (1,2,2,2,2,1,1,2,2,2,2,1,0,0,0,0,1,5,1,1,0),
+    (0,1,2,2,2,2,2,2,2,2,2,2,1,0,0,0,1,2,1,0,0),
+    (0,0,1,1,2,2,2,2,2,2,2,2,2,1,0,1,2,2,1,0,0),
+    (0,0,0,0,1,1,1,2,2,1,2,2,2,1,1,2,2,1,0,0,0),
+    (0,0,0,0,0,1,6,5,1,2,2,2,2,2,1,2,2,1,0,0,0),
+    (0,0,0,0,0,1,5,5,5,1,1,2,2,2,1,2,1,0,0,0,0),
+    (0,0,0,0,1,4,1,6,5,5,2,2,2,2,1,1,0,0,0,0,0),
+    (0,0,0,0,0,1,1,1,5,5,2,2,2,1,1,0,0,0,0,0,0),
+    (0,0,0,0,0,0,0,0,1,1,1,0,1,1,0,0,0,0,0,0,0),
+    (0,0,0,0,0,0,0,0,0,1,4,0,4,1,0,0,0,0,0,0,0),
+    (0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0)
   );
+  $size: 6px;
 
   position: relative;
   display: inline-block;
-  width: calc(1em * 21);
-  height: calc(1em * 18);
-  font-size: 6px;
+  width: $size * length(nth($charmander, 1));
+  height: $size * length($charmander);
 
   &::before {
     position: absolute;
-    top: -1em;
-    left: -1em;
+    top: -$size;
+    left: -$size;
     content: "";
     background: transparent;
 
-    @include pixelize($charmander, $charmander-colors);
+    @include pixelize($size, $charmander, $charmander-colors);
   }
 }
diff --git a/scss/pixel-arts/kirby.scss b/scss/pixel-arts/kirby.scss
index 6b69236..03a8655 100644
--- a/scss/pixel-arts/kirby.scss
+++ b/scss/pixel-arts/kirby.scss
@@ -2,12 +2,12 @@
   $kirby-colors: (#000, #ffaccc, #ff5478);
   // prettier-ignore
   $kirby: (
-    (0,0,1,1,0,1,1,1,1,1,0,0,0,0),
-    (0,1,2,2,1,2,2,2,2,2,1,1,0,0),
-    (1,2,2,1,2,2,2,2,2,2,2,2,1,0),
-    (1,2,2,2,2,2,1,2,1,2,2,2,2,1),
-    (1,2,2,2,2,2,1,2,1,2,2,2,2,1,),
-    (1,2,2,2,2,2,1,2,1,2,2,2,2,2,1),
+    (0,0,1,1,0,1,1,1,1,1,0,0,0,0,0,0),
+    (0,1,2,2,1,2,2,2,2,2,1,1,0,0,0,0),
+    (1,2,2,1,2,2,2,2,2,2,2,2,1,0,0,0),
+    (1,2,2,2,2,2,1,2,1,2,2,2,2,1,0,0),
+    (1,2,2,2,2,2,1,2,1,2,2,2,2,1,0,0),
+    (1,2,2,2,2,2,1,2,1,2,2,2,2,2,1,0),
     (1,2,2,2,3,3,2,2,2,3,3,2,2,2,2,1),
     (1,2,2,2,2,2,2,1,2,2,2,2,2,2,2,1),
     (0,1,2,2,2,2,2,1,2,2,2,2,2,2,2,1),
@@ -15,24 +15,24 @@
     (0,1,2,2,2,2,2,2,2,2,2,1,3,3,3,1),
     (0,0,1,2,2,2,2,2,2,2,1,3,3,3,3,1),
     (0,0,1,1,2,2,2,2,2,2,1,3,3,3,3,1),
-    (0,1,3,3,1,1,2,2,2,1,3,3,3,3,1),
-    (1,3,3,3,3,3,1,1,1,1,1,3,3,1),
-    (0,1,1,1,1,1,1,0,0,0,1,1,1,0)
+    (0,1,3,3,1,1,2,2,2,1,3,3,3,3,1,0),
+    (1,3,3,3,3,3,1,1,1,1,1,3,3,1,0,0),
+    (0,1,1,1,1,1,1,0,0,0,1,1,1,0,0,0)
   );
+  $size: 6px;
 
   position: relative;
   display: inline-block;
-  width: calc(1em * 16);
-  height: calc(1em * 16);
-  font-size: 6px;
+  width: $size * length(nth($kirby, 1));
+  height: $size * length($kirby);
 
   &::before {
     position: absolute;
-    top: -1em;
-    left: -1em;
+    top: -$size;
+    left: -$size;
     content: "";
     background: transparent;
 
-    @include pixelize($kirby, $kirby-colors);
+    @include pixelize($size, $kirby, $kirby-colors);
   }
 }
diff --git a/scss/pixel-arts/mario.scss b/scss/pixel-arts/mario.scss
index 781a78b..6b5c778 100644
--- a/scss/pixel-arts/mario.scss
+++ b/scss/pixel-arts/mario.scss
@@ -1,7 +1,5 @@
 .nes-mario {
-  // prettier-ignore
-  $mario-colors: (#f81c2f, #65352b, #ffbb8e, #000,
-    #1560ad, #aeaeac, #fef102);
+  $mario-colors: (#f81c2f, #65352b, #ffbb8e, #000, #1560ad, #aeaeac, #fef102);
   // prettier-ignore
   $mario: (
     (0,0,0,0,1,1,1,1,1,0,0,0,0,0),
@@ -21,20 +19,20 @@
     (0,0,2,2,2,0,0,0,0,2,2,2,0,0),
     (0,2,2,2,2,0,0,0,0,2,2,2,2,0)
   );
+  $size: 6px;
 
   position: relative;
   display: inline-block;
-  width: calc(1em * 14);
-  height: calc(1em * 16);
-  font-size: 6px;
+  width: $size * length(nth($mario, 1));
+  height: $size * length($mario);
 
   &::before {
     position: absolute;
-    top: -1em;
-    left: -1em;
+    top: -$size;
+    left: -$size;
     content: "";
     background: transparent;
 
-    @include pixelize($mario, $mario-colors);
+    @include pixelize($size, $mario, $mario-colors);
   }
 }
diff --git a/scss/pixel-arts/nes-icon.scss b/scss/pixel-arts/nes-icon.scss
index 82903fe..032ce9a 100644
--- a/scss/pixel-arts/nes-icon.scss
+++ b/scss/pixel-arts/nes-icon.scss
@@ -14,20 +14,20 @@
     (2,1,1,1,1,1,1,1,1,1,1,1,1,1,2),
     (2,2,2,2,2,2,2,2,2,2,2,2,2,2,2)
   );
+  $size: 4px;
 
   position: relative;
   display: inline-block;
-  width: calc(1em * 16);
-  height: calc(1em * 11);
-  font-size: 3px;
+  width: $size * length(nth($logo, 1));
+  height: $size * length($logo);
 
   &::before {
     position: absolute;
-    top: -1em;
-    left: -1em;
+    top: -$size;
+    left: -$size;
     content: "";
     background: transparent;
 
-    @include pixelize($logo, $logo-colors);
+    @include pixelize($size, $logo, $logo-colors);
   }
 }
diff --git a/scss/pixel-arts/nes-jp-icon.scss b/scss/pixel-arts/nes-jp-icon.scss
index ca5329e..abfb4c0 100644
--- a/scss/pixel-arts/nes-jp-icon.scss
+++ b/scss/pixel-arts/nes-jp-icon.scss
@@ -14,20 +14,20 @@
     (2,3,3,3,3,3,3,3,3,3,3,3,3,3,2),
     (2,2,2,2,2,2,2,2,2,2,2,2,2,2,2)
   );
+  $size: 4px;
 
   position: relative;
   display: inline-block;
-  width: calc(1em * 16);
-  height: calc(1em * 11);
-  font-size: 3px;
+  width: $size * length(nth($logo, 1));
+  height: $size * length($logo);
 
   &::before {
     position: absolute;
-    top: -1em;
-    left: -1em;
+    top: -$size;
+    left: -$size;
     content: "";
     background: transparent;
 
-    @include pixelize($logo, $logo-colors);
+    @include pixelize($size, $logo, $logo-colors);
   }
 }
diff --git a/scss/pixel-arts/octocat.scss b/scss/pixel-arts/octocat.scss
index c8fdb08..341a229 100644
--- a/scss/pixel-arts/octocat.scss
+++ b/scss/pixel-arts/octocat.scss
@@ -36,21 +36,21 @@
     (0,0,0,0,0,1,0,1,1,0,1,0,0,0),
     (0,0,0,0,1,0,1,0,0,1,0,1,0,0)
   );
+  $size: 6px;
 
   position: relative;
   display: inline-block;
-  width: calc(1em * 14);
-  height: calc(1em * 15);
-  font-size: 6px;
+  width: $size * length(nth($octocat-1, 1));
+  height: $size * length($octocat-1);
 
   &::before {
     position: absolute;
-    top: -1em;
-    left: -1em;
+    top: -$size;
+    left: -$size;
     content: "";
     background: transparent;
 
-    @include pixelize($octocat-1, $octocat-colors);
+    @include pixelize($size, $octocat-1, $octocat-colors);
   }
 
   &.animate::before {
@@ -58,11 +58,8 @@
   }
 
   @keyframes wave {
-    0% {
-      @include pixelize($octocat-1, $octocat-colors);
-    }
     50% {
-      @include pixelize($octocat-2, $octocat-colors);
+      @include pixelize($size, $octocat-2, $octocat-colors);
     }
   }
 }
diff --git a/scss/pixel-arts/phone.scss b/scss/pixel-arts/phone.scss
index 86f0f66..f0f06ce 100644
--- a/scss/pixel-arts/phone.scss
+++ b/scss/pixel-arts/phone.scss
@@ -24,20 +24,20 @@
     (0,3,3,2,2,2,1,3),
     (0,0,3,3,3,3,3,3)
   );
+  $size: 6px;
 
   position: relative;
   display: inline-block;
-  width: calc(1em * 8);
-  height: calc(1em * 21);
-  font-size: 6px;
+  width: $size * length(nth($phone, 1));
+  height: $size * length($phone);
 
   &::before {
     position: absolute;
-    top: -1em;
-    left: -1em;
+    top: -$size;
+    left: -$size;
     content: "";
     background: transparent;
 
-    @include pixelize($phone, $phone-colors);
+    @include pixelize($size, $phone, $phone-colors);
   }
 }
diff --git a/scss/pixel-arts/pokeball.scss b/scss/pixel-arts/pokeball.scss
index dedd628..8e81a3e 100644
--- a/scss/pixel-arts/pokeball.scss
+++ b/scss/pixel-arts/pokeball.scss
@@ -19,20 +19,20 @@
     (0,0,0,0,0,0,0,0,0,0,0,0,0,0),
     (0,0,0,0,0,0,0,0,0,0,0,0,0,0),
   );
+  $size: 6px;
 
   position: relative;
   display: inline-block;
-  width: calc(1em * 14);
-  height: calc(1em * 14);
-  font-size: 6px;
+  width: $size * length(nth($pokeball, 1));
+  height: $size * length($pokeball);
 
   &::before {
     position: absolute;
-    top: -1em;
-    left: -1em;
+    top: -$size;
+    left: -$size;
     content: "";
     background: transparent;
 
-    @include pixelize($pokeball, $pokeball-colors);
+    @include pixelize($size, $pokeball, $pokeball-colors);
   }
 }
diff --git a/scss/pixel-arts/smartphone.scss b/scss/pixel-arts/smartphone.scss
index 240b241..782555d 100644
--- a/scss/pixel-arts/smartphone.scss
+++ b/scss/pixel-arts/smartphone.scss
@@ -2,7 +2,7 @@
   $smartphone-colors: (#fff, #060606);
   // prettier-ignore
   $smartphone: (
-    (0,2,2,2,2,2,2,2,2,2,2,2,2,2),
+    (0,2,2,2,2,2,2,2,2,2,2,2,2,2,0),
     (2,2,1,1,1,1,1,1,1,1,1,1,1,2,2),
     (2,1,1,1,2,2,2,2,2,2,2,1,1,1,2),
     (2,1,1,1,1,1,1,1,1,1,1,1,1,1,2),
@@ -28,22 +28,22 @@
     (2,1,1,1,1,1,1,2,2,1,1,1,1,1,2),
     (2,1,1,1,1,1,1,2,2,1,1,1,1,1,2),
     (2,2,1,1,1,1,1,1,1,1,1,1,1,2,2),
-    (0,2,2,2,2,2,2,2,2,2,2,2,2,2)
+    (0,2,2,2,2,2,2,2,2,2,2,2,2,2,0)
   );
+  $size: 6px;
 
   position: relative;
   display: inline-block;
-  width: calc(1em * 16);
-  height: calc(1em * 27);
-  font-size: 6px;
+  width: $size * length(nth($smartphone, 1));
+  height: $size * length($smartphone);
 
   &::before {
     position: absolute;
-    top: -1em;
-    left: -1em;
+    top: -$size;
+    left: -$size;
     content: "";
     background: transparent;
 
-    @include pixelize($smartphone, $smartphone-colors);
+    @include pixelize($size, $smartphone, $smartphone-colors);
   }
 }
diff --git a/scss/pixel-arts/snes-icon.scss b/scss/pixel-arts/snes-icon.scss
index 143cfcc..37f8d8e 100644
--- a/scss/pixel-arts/snes-icon.scss
+++ b/scss/pixel-arts/snes-icon.scss
@@ -14,20 +14,20 @@
     (0,1,2,2,2,2,2,2,2,2,2,2,2,1,0),
     (0,0,1,1,1,1,1,1,1,1,1,1,1,0,0)
   );
+  $size: 4px;
 
   position: relative;
   display: inline-block;
-  width: calc(1em * 16);
-  height: calc(1em * 11);
-  font-size: 3px;
+  width: $size * length(nth($logo, 1));
+  height: $size * length($logo);
 
   &::before {
     position: absolute;
-    top: -1em;
-    left: -1em;
+    top: -$size;
+    left: -$size;
     content: "";
     background: transparent;
 
-    @include pixelize($logo, $logo-colors);
+    @include pixelize($size, $logo, $logo-colors);
   }
 }
diff --git a/scss/pixel-arts/snes-jp-icon.scss b/scss/pixel-arts/snes-jp-icon.scss
index b91e0e6..42cadfa 100644
--- a/scss/pixel-arts/snes-jp-icon.scss
+++ b/scss/pixel-arts/snes-jp-icon.scss
@@ -15,20 +15,20 @@
     (0,1,2,2,2,2,2,2,2,2,2,2,2,1,0),
     (0,0,1,1,1,1,1,1,1,1,1,1,1,0,0)
   );
+  $size: 4px;
 
   position: relative;
   display: inline-block;
-  width: calc(1em * 16);
-  height: calc(1em * 11);
-  font-size: 3px;
+  width: $size * length(nth($logo, 1));
+  height: $size * length($logo);
 
   &::before {
     position: absolute;
-    top: -1em;
-    left: -1em;
+    top: -$size;
+    left: -$size;
     content: "";
     background: transparent;
 
-    @include pixelize($logo, $logo-colors);
+    @include pixelize($size, $logo, $logo-colors);
   }
 }
diff --git a/scss/pixel-arts/squirtle.scss b/scss/pixel-arts/squirtle.scss
index 7b968dc..a57db00 100644
--- a/scss/pixel-arts/squirtle.scss
+++ b/scss/pixel-arts/squirtle.scss
@@ -1,41 +1,39 @@
 .nes-squirtle {
-  // prettier-ignore
-  $squirtle-colors: (#000, #9cf, #cb6633,
-    #9fa1a1, #fff, #f89934, #ff3);
+  $squirtle-colors: (#000, #9cf, #cb6633, #9fa1a1, #fff, #f89934, #ff3);
   // prettier-ignore
   $squirtle: (
-    (0,0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,1,1,1),
-    (0,0,1,2,2,2,2,1,1,0,0,0,0,0,0,1,2,2,2,1),
+    (0,0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,1,1,1,0,0),
+    (0,0,1,2,2,2,2,1,1,0,0,0,0,0,0,1,2,2,2,1,0),
     (0,1,2,2,2,2,2,2,2,1,1,0,0,0,1,2,2,2,2,2,1),
     (0,1,2,2,2,2,2,2,2,1,6,1,1,0,1,2,2,2,1,2,1),
     (1,3,2,2,2,2,2,2,2,2,6,6,6,1,2,2,2,1,2,2,1),
-    (1,2,2,2,2,5,1,2,2,2,5,6,6,6,1,2,2,1,2,1),
-    (1,2,2,2,2,1,3,2,2,2,5,6,6,6,1,2,1,1,1),
-    (0,1,2,2,2,1,3,2,2,2,1,5,6,6,6,1,1),
-    (0,0,1,1,2,2,2,2,1,1,2,2,5,6,6,1),
-    (0,0,1,2,1,1,1,1,2,2,2,2,5,6,6,1),
-    (0,0,0,1,1,7,7,1,2,2,2,1,5,6,6,1),
-    (0,0,0,0,0,1,7,7,1,1,1,1,5,6,6,1),
-    (0,0,0,0,1,2,1,7,7,7,7,7,1,5,1,0),
-    (0,0,0,0,0,1,1,1,1,7,7,2,1,5,1,0),
-    (0,0,0,0,0,0,0,0,1,1,1,2,1,1),
-    (0,0,0,0,0,0,0,0,0,1,2,2,2,1),
-    (0,0,0,0,0,0,0,0,0,0,1,1,1,0),
+    (1,2,2,2,2,5,1,2,2,2,5,6,6,6,1,2,2,1,2,1,0),
+    (1,2,2,2,2,1,3,2,2,2,5,6,6,6,1,2,1,1,1,0,0),
+    (0,1,2,2,2,1,3,2,2,2,1,5,6,6,6,1,1,0,0,0,0),
+    (0,0,1,1,2,2,2,2,1,1,2,2,5,6,6,1,0,0,0,0,0),
+    (0,0,1,2,1,1,1,1,2,2,2,2,5,6,6,1,0,0,0,0,0),
+    (0,0,0,1,1,7,7,1,2,2,2,1,5,6,6,1,0,0,0,0,0),
+    (0,0,0,0,0,1,7,7,1,1,1,1,5,6,6,1,0,0,0,0,0),
+    (0,0,0,0,1,2,1,7,7,7,7,7,1,5,1,0,0,0,0,0,0),
+    (0,0,0,0,0,1,1,1,1,7,7,2,1,5,1,0,0,0,0,0,0),
+    (0,0,0,0,0,0,0,0,1,1,1,2,1,1,0,0,0,0,0,0,0),
+    (0,0,0,0,0,0,0,0,0,1,2,2,2,1,0,0,0,0,0,0,0),
+    (0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0),
   );
+  $size: 6px;
 
   position: relative;
   display: inline-block;
-  width: calc(1em * 21);
-  height: calc(1em * 17);
-  font-size: 6px;
+  width: $size * length(nth($squirtle, 1));
+  height: $size * length($squirtle);
 
   &::before {
     position: absolute;
-    top: -1em;
-    left: -1em;
+    top: -$size;
+    left: -$size;
     content: "";
     background: transparent;
 
-    @include pixelize($squirtle, $squirtle-colors);
+    @include pixelize($size, $squirtle, $squirtle-colors);
   }
 }
diff --git a/scss/utilities/icon-mixin.scss b/scss/utilities/icon-mixin.scss
index c973afd..1fd110a 100644
--- a/scss/utilities/icon-mixin.scss
+++ b/scss/utilities/icon-mixin.scss
@@ -1,4 +1,4 @@
-@mixin pixelize($matrix, $colors, $default-color: null) {
+@mixin pixelize($size, $matrix, $colors, $default-color: null) {
   $ret: "";
   $moz: "";
   @if ($default-color == null) {
@@ -37,18 +37,18 @@
 
         $color: nth($colors, $dot);
         @if $color == $default-color {
-          $ret: $ret + $j + "em " + $i + "em";
-          $moz: $moz + $j + "em " + $i + "em 0 0.020em";
+          $ret: $ret + ($j * $size) + " " + ($i * $size);
+          $moz: $moz + ($j * $size) + " " + ($i * $size) + "0 0.020px";
         } @else {
-          $ret: $ret + $j + "em " + $i + "em " + $color;
-          $moz: $moz + $j + "em " + $i + "em 0 0.020em " + $color;
+          $ret: $ret + ($j * $size) + " " + ($i * $size) + "" + $color;
+          $moz: $moz + ($j * $size) + " " + ($i * $size) + "0 0.020px " + $color;
         }
       }
     }
   }
 
-  width: 1em;
-  height: 1em;
+  width: $size;
+  height: $size;
   color: $default-color;
   box-shadow: unquote($ret);
   @-moz-document url-prefix() {
diff --git a/scss/utilities/rounded-corners-mixin.scss b/scss/utilities/rounded-corners-mixin.scss
index a96d94f..eec9ef1 100644
--- a/scss/utilities/rounded-corners-mixin.scss
+++ b/scss/utilities/rounded-corners-mixin.scss
@@ -4,11 +4,11 @@
 }
 
 @mixin border-image($color) {
-  border-image-source: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path class="svg-border" d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="#{$color}" /></svg>');
+  border-image-source: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="rgb(#{red($color)},#{green($color)},#{blue($color)})" /></svg>');
 }
 
 @mixin compact-border-image($color) {
-  border-image-source: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="5" height="5" xmlns="http://www.w3.org/2000/svg"><path class="svg-border" d="M2 1 h1 v1 h-1 z M1 2 h1 v1 h-1 z M3 2 h1 v1 h-1 z M2 3 h1 v1 h-1 z" fill="#{$color}" /></svg>');
+  border-image-source: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="5" height="5" xmlns="http://www.w3.org/2000/svg"><path d="M2 1 h1 v1 h-1 z M1 2 h1 v1 h-1 z M3 2 h1 v1 h-1 z M2 3 h1 v1 h-1 z" fill="rgb(#{red($color)},#{green($color)},#{blue($color)})" /></svg>');
 }
 
 @mixin rounded-corners($isDark: false) {