diff --git a/src/config.less b/src/config.less
index 106ce53..958bf84 100644
--- a/src/config.less
+++ b/src/config.less
@@ -27,7 +27,7 @@
   -o-transform: skew(@x, @y);
   transform: skew(@x, @y);
 }
-.border-radius(@radius: 5px) {
+.border-radius(@radius: 0.3125em) {
   -webkit-border-radius: @radius;
   -moz-border-radius: @radius;
   -ms-border-radius: @radius;
diff --git a/src/css-sans.css b/src/css-sans.css
index 39f634e..79b5bad 100644
--- a/src/css-sans.css
+++ b/src/css-sans.css
@@ -2,4 +2,4 @@
  * css-sans.css v1.0.0
  * (c) 2015 Yusuke Sugomori
  * MIT License | http://yusugomori.com/license/mit
- */.A{position:relative;left:30px;width:60px;height:91px;border-bottom:solid 14px #231815;-webkit-transition:all linear 200ms;-moz-transition:all linear 200ms;-ms-transition:all linear 200ms;-o-transition:all linear 200ms;transition:all linear 200ms}.A:before,.A:after{-webkit-transition:all linear 200ms;-moz-transition:all linear 200ms;-ms-transition:all linear 200ms;-o-transition:all linear 200ms;transition:all linear 200ms;-webkit-transform:skew(-19deg,0);-moz-transform:skew(-19deg,0);-ms-transform:skew(-19deg,0);-o-transform:skew(-19deg,0);transform:skew(-19deg,0);position:absolute;content:'';top:12.5px;left:0;width:16px;height:125px;background-color:#231815}.A:after{-webkit-transform:skew(19deg,0);-moz-transform:skew(19deg,0);-ms-transform:skew(19deg,0);-o-transform:skew(19deg,0);transform:skew(19deg,0);left:45px}.B{position:relative;top:12.5px;left:10px;width:60px;height:125px;border-left:solid 16px #231815}.B:before,.B:after{position:absolute;content:'';width:52px;height:39px;border-width:15px 15px 10px 0;border-color:#231815;border-style:solid;-webkit-border-radius:0 240% 180% 0 / 0 180% 180% 0;-moz-border-radius:0 240% 180% 0 / 0 180% 180% 0;-ms-border-radius:0 240% 180% 0 / 0 180% 180% 0;-o-border-radius:0 240% 180% 0 / 0 180% 180% 0;border-radius:0 240% 180% 0 / 0 180% 180% 0}.B:after{bottom:0;width:58px;height:43px;border-width:10px 15px 15px 0;-webkit-border-radius:0 180% 220% 0 / 0 180% 180% 0;-moz-border-radius:0 180% 220% 0 / 0 180% 180% 0;-ms-border-radius:0 180% 220% 0 / 0 180% 180% 0;-o-border-radius:0 180% 220% 0 / 0 180% 180% 0;border-radius:0 180% 220% 0 / 0 180% 180% 0}.C{position:relative;top:12.5px;left:10px;width:84px;height:95px;border-width:15px 12px 15px 16px;border-color:#231815;border-style:solid;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;border-radius:50%}.C:before{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);position:absolute;content:'';top:2px;left:49px;background-color:#fff;width:90px;height:90px}.D{position:relative;top:12.5px;left:10px;border-left:solid 15px #231815;height:125px}.D:before{position:absolute;content:'';top:0;left:0;width:60px;height:95px;border-width:15px 15px 15px 0;border-color:#231815;border-style:solid;-webkit-border-radius:0 300% 300% 0 / 0 180% 180% 0;-moz-border-radius:0 300% 300% 0 / 0 180% 180% 0;-ms-border-radius:0 300% 300% 0 / 0 180% 180% 0;-o-border-radius:0 300% 300% 0 / 0 180% 180% 0;border-radius:0 300% 300% 0 / 0 180% 180% 0}.E{position:relative;top:12.5px;left:10px;width:63px;height:95px;border-width:15px 0 15px 16px;border-color:#231815;border-style:solid}.E:before{position:absolute;content:'';top:38px;left:0;width:53px;height:15px;background-color:#231815}.F{position:relative;top:12.5px;left:10px;width:63px;height:110px;border-width:15px 0 0 16px;border-color:#231815;border-style:solid}.F:before{position:absolute;content:'';top:38px;left:0;width:53px;height:15px;background-color:#231815}.G{position:relative;top:12.5px;left:10px;width:84px;height:95px;border-width:15px 12px 15px 16px;border-color:#231815;border-style:solid;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;border-radius:50%}.G:before{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);position:absolute;content:'';top:2px;left:48px;background-color:#fff;width:90px;height:90px}.G:after{position:absolute;content:'';bottom:.5px;right:7px;width:28px;height:36px;border-width:13px 14px 0 0;border-color:#231815;border-style:solid}.H{position:relative;top:12.5px;left:10px;width:60px;height:125px;border-width:0 16px 0 16px;border-color:#231815;border-style:solid}.H:before{position:absolute;content:'';top:53px;left:0;width:60px;height:14px;background-color:#231815}.I{z-index:1;position:relative;top:12.5px;left:20px;width:16px;height:125px;background-color:#231815}.J{position:relative;top:12.5px;left:-5px;width:75px;height:66px;border-right:solid 16px #231815}.J:before{position:absolute;content:'';bottom:-60px;right:-16px;width:50px;height:60px;border-width:0 16px 15px 14px;border-color:#231815;border-style:solid;-webkit-border-radius:0 0 75% 75%;-moz-border-radius:0 0 75% 75%;-ms-border-radius:0 0 75% 75%;-o-border-radius:0 0 75% 75%;border-radius:0 0 75% 75%}.J:after{-webkit-transform:rotate(-40deg);-moz-transform:rotate(-40deg);-ms-transform:rotate(-40deg);-o-transform:rotate(-40deg);transform:rotate(-40deg);position:absolute;content:'';top:40px;left:-20px;width:60px;height:60px;background-color:#fff}.K{position:relative;top:12.5px;left:10px;width:80px;height:125px;border-left:solid 16px #231815;overflow:hidden}.K:before{-webkit-transform:skew(-43deg,0);-moz-transform:skew(-43deg,0);-ms-transform:skew(-43deg,0);-o-transform:skew(-43deg,0);transform:skew(-43deg,0);position:absolute;content:'';top:0;left:16px;width:19px;height:84px;background-color:#231815}.K:after{-webkit-transform:skew(30deg,0);-moz-transform:skew(30deg,0);-ms-transform:skew(30deg,0);-o-transform:skew(30deg,0);transform:skew(30deg,0);position:absolute;content:'';bottom:0;right:25px;width:18px;height:80px;background-color:#231815}.L{position:relative;top:12.5px;left:10px;width:63px;height:110px;border-width:0 0 15px 16px;border-color:#231815;border-style:solid}.M{position:relative;top:12.5px;left:10px;width:80px;height:125px;border-width:0 15px 0 15px;border-color:#231815;border-style:solid}.M:before{-webkit-transform:skew(20deg,0);-moz-transform:skew(20deg,0);-ms-transform:skew(20deg,0);-o-transform:skew(20deg,0);transform:skew(20deg,0);position:absolute;content:'';top:0;left:14px;width:12px;height:110px;background-color:#231815}.M:after{-webkit-transform:skew(-20deg,0);-moz-transform:skew(-20deg,0);-ms-transform:skew(-20deg,0);-o-transform:skew(-20deg,0);transform:skew(-20deg,0);position:absolute;content:'';top:0;right:14px;width:12px;height:110px;background-color:#231815}.N{position:relative;top:12.5px;left:10px;width:63px;height:125px;border-width:0 15px 0 15px;border-color:#231815;border-style:solid}.N:before{-webkit-transform:skew(30deg,0);-moz-transform:skew(30deg,0);-ms-transform:skew(30deg,0);-o-transform:skew(30deg,0);transform:skew(30deg,0);position:absolute;content:'';top:0;left:24px;width:15px;height:125px;background-color:#231815}.O{position:relative;top:12.5px;left:10px;width:70px;height:97px;border-width:14px 16px 14px 16px;border-color:#231815;border-style:solid;-webkit-border-radius:55% / 52%;-moz-border-radius:55% / 52%;-ms-border-radius:55% / 52%;-o-border-radius:55% / 52%;border-radius:55% / 52%}.P{position:relative;top:12.5px;left:10px;width:60px;height:125px;border-left:solid 16px #231815}.P:before{position:absolute;content:'';width:56px;height:50px;border-width:13px 15px 13px 0;border-color:#231815;border-style:solid;-webkit-border-radius:0 220% 220% 0 / 0 180% 180% 0;-moz-border-radius:0 220% 220% 0 / 0 180% 180% 0;-ms-border-radius:0 220% 220% 0 / 0 180% 180% 0;-o-border-radius:0 220% 220% 0 / 0 180% 180% 0;border-radius:0 220% 220% 0 / 0 180% 180% 0}.Q{z-index:-1;position:relative;top:12.5px;left:10px;width:70px;height:97px;border-width:14px 16px 14px 16px;border-color:#231815;border-style:solid;-webkit-border-radius:55% / 52%;-moz-border-radius:55% / 52%;-ms-border-radius:55% / 52%;-o-border-radius:55% / 52%;border-radius:55% / 52%}.Q:before{-webkit-transform:rotate(-84deg);-moz-transform:rotate(-84deg);-ms-transform:rotate(-84deg);-o-transform:rotate(-84deg);transform:rotate(-84deg);position:absolute;content:'';top:82px;left:49px;width:16px;height:48px;border-width:16px 0 13px 13px;border-color:#231815;border-style:solid;-webkit-border-radius:200% 0 0 200% / 100% 0 0 100%;-moz-border-radius:200% 0 0 200% / 100% 0 0 100%;-ms-border-radius:200% 0 0 200% / 100% 0 0 100%;-o-border-radius:200% 0 0 200% / 100% 0 0 100%;border-radius:200% 0 0 200% / 100% 0 0 100%}.Q:after{-webkit-transform:rotate(-18deg);-moz-transform:rotate(-18deg);-ms-transform:rotate(-18deg);-o-transform:rotate(-18deg);transform:rotate(-18deg);position:absolute;content:'';bottom:-35px;right:-44px;width:30px;height:30px;background-color:#fff}.R{position:relative;top:12.5px;left:10px;width:60px;height:125px;border-left:solid 16px #231815}.R:before{position:absolute;content:'';width:52px;height:44px;border-width:13px 15px 13px 0;border-color:#231815;border-style:solid;-webkit-border-radius:0 220% 220% 0 / 0 180% 180% 0;-moz-border-radius:0 220% 220% 0 / 0 180% 180% 0;-ms-border-radius:0 220% 220% 0 / 0 180% 180% 0;-o-border-radius:0 220% 220% 0 / 0 180% 180% 0;border-radius:0 220% 220% 0 / 0 180% 180% 0}.R:after{-webkit-transform:skew(32deg,0);-moz-transform:skew(32deg,0);-ms-transform:skew(32deg,0);-o-transform:skew(32deg,0);transform:skew(32deg,0);position:absolute;content:'';bottom:0;left:38px;width:18px;height:58px;background-color:#231815}.S{-webkit-transform:rotate(14deg);-moz-transform:rotate(14deg);-ms-transform:rotate(14deg);-o-transform:rotate(14deg);transform:rotate(14deg);position:relative;width:105px;height:150px;top:10px;left:10px}.S:before{-webkit-transform:rotate(18deg);-moz-transform:rotate(18deg);-ms-transform:rotate(18deg);-o-transform:rotate(18deg);transform:rotate(18deg);position:absolute;content:'';width:44px;height:40px;border-width:14px 0 15px 15.5px;border-color:#231815;border-style:solid;-webkit-border-radius:220% 0 0 150% / 150% 0 0 100%;-moz-border-radius:220% 0 0 150% / 150% 0 0 100%;-ms-border-radius:220% 0 0 150% / 150% 0 0 100%;-o-border-radius:220% 0 0 150% / 150% 0 0 100%;border-radius:220% 0 0 150% / 150% 0 0 100%}.S:after{-webkit-transform:rotate(198deg);-moz-transform:rotate(198deg);-ms-transform:rotate(198deg);-o-transform:rotate(198deg);transform:rotate(198deg);position:absolute;content:'';top:65px;left:21px;width:52px;height:44px;border-width:14px 0 15px 15px;border-color:#231815;border-style:solid;-webkit-border-radius:240% 0 0 110% / 140% 0 0 100%;-moz-border-radius:240% 0 0 110% / 140% 0 0 100%;-ms-border-radius:240% 0 0 110% / 140% 0 0 100%;-o-border-radius:240% 0 0 110% / 140% 0 0 100%;border-radius:240% 0 0 110% / 140% 0 0 100%}.T{position:relative;top:12.5px;left:10px;width:100px;height:125px;border-top:solid 15px #231815}.T:before{position:absolute;content:'';top:0;left:42px;width:16px;height:110px;background-color:#231815}.U{position:relative;top:12.5px;left:10px;width:60px;height:80px;border-width:0 16px 0 16px;border-color:#231815;border-style:solid}.U:before{position:absolute;content:'';top:65px;left:-16px;width:60px;height:45px;border-width:0 16px 15px 16px;border-color:#231815;border-style:solid;-webkit-border-radius:0 0 200% 200% / 0 0 300% 300%;-moz-border-radius:0 0 200% 200% / 0 0 300% 300%;-ms-border-radius:0 0 200% 200% / 0 0 300% 300%;-o-border-radius:0 0 200% 200% / 0 0 300% 300%;border-radius:0 0 200% 200% / 0 0 300% 300%}.V{position:relative;top:12.5px;left:30px;width:59px}.V:before{-webkit-transform:skew(18deg,0);-moz-transform:skew(18deg,0);-ms-transform:skew(18deg,0);-o-transform:skew(18deg,0);transform:skew(18deg,0);position:absolute;content:'';top:0;left:0;height:125px;border-left:solid 16px #231815}.V:after{-webkit-transform:skew(-18deg,0);-moz-transform:skew(-18deg,0);-ms-transform:skew(-18deg,0);-o-transform:skew(-18deg,0);transform:skew(-18deg,0);position:absolute;content:'';top:0;right:0;height:125px;border-left:solid 16px #231815}.W{position:relative;top:12.5px;left:25px;width:100px}.W:before{-webkit-transform:skew(11deg,0);-moz-transform:skew(11deg,0);-ms-transform:skew(11deg,0);-o-transform:skew(11deg,0);transform:skew(11deg,0);position:absolute;content:'';top:0;left:0;width:42px;height:125px;border-width:0 13px 0 15px;border-color:#231815;border-style:solid}.W:after{-webkit-transform:skew(-11deg,0);-moz-transform:skew(-11deg,0);-ms-transform:skew(-11deg,0);-o-transform:skew(-11deg,0);transform:skew(-11deg,0);position:absolute;content:'';top:0;right:0;width:42px;height:125px;border-width:0 15px 0 13px;border-color:#231815;border-style:solid}.X{position:relative;top:12.5px;left:50px;width:16px;height:125px}.X:before{-webkit-transform:skew(32deg,0);-moz-transform:skew(32deg,0);-ms-transform:skew(32deg,0);-o-transform:skew(32deg,0);transform:skew(32deg,0);position:absolute;content:'';top:0;left:0;width:16px;height:125px;background-color:#231815}.X:after{-webkit-transform:skew(-32deg,0);-moz-transform:skew(-32deg,0);-ms-transform:skew(-32deg,0);-o-transform:skew(-32deg,0);transform:skew(-32deg,0);position:absolute;content:'';top:0;right:0;width:16px;height:125px;background-color:#231815}.Y{position:relative;top:92.5px;left:52px;width:16px;height:50px;background-color:#231815}.Y:before{-webkit-transform:skew(28deg,0);-moz-transform:skew(28deg,0);-ms-transform:skew(28deg,0);-o-transform:skew(28deg,0);transform:skew(28deg,0);position:absolute;content:'';top:-80px;left:-21px;width:16px;height:80px;background-color:#231815}.Y:after{-webkit-transform:skew(-28deg,0);-moz-transform:skew(-28deg,0);-ms-transform:skew(-28deg,0);-o-transform:skew(-28deg,0);transform:skew(-28deg,0);position:absolute;content:'';top:-80px;right:-21px;width:16px;height:80px;background-color:#231815}.Z{position:relative;top:12.5px;left:10px;width:90px;height:95px;border-width:15px 0 15px 0;border-color:#231815;border-style:solid}.Z:before{-webkit-transform:skew(-37deg,0);-moz-transform:skew(-37deg,0);-ms-transform:skew(-37deg,0);-o-transform:skew(-37deg,0);transform:skew(-37deg,0);position:absolute;content:'';top:0;left:36px;width:18px;height:95px;background-color:#231815}
\ No newline at end of file
+ */.A{position:relative;left:1.875em;width:3.75em;height:5.6875em;border-bottom:solid 0.875em #231815;-webkit-transition:all linear 200ms;-moz-transition:all linear 200ms;-ms-transition:all linear 200ms;-o-transition:all linear 200ms;transition:all linear 200ms}.A:before,.A:after{-webkit-transition:all linear 200ms;-moz-transition:all linear 200ms;-ms-transition:all linear 200ms;-o-transition:all linear 200ms;transition:all linear 200ms;-webkit-transform:skew(-19deg,0);-moz-transform:skew(-19deg,0);-ms-transform:skew(-19deg,0);-o-transform:skew(-19deg,0);transform:skew(-19deg,0);position:absolute;content:'';top:0.78125em;left:0;width:1.0em;height:7.8125em;background-color:#231815}.A:after{-webkit-transform:skew(19deg,0);-moz-transform:skew(19deg,0);-ms-transform:skew(19deg,0);-o-transform:skew(19deg,0);transform:skew(19deg,0);left:2.8125em}.B{position:relative;top:0.78125em;left:0.625em;width:3.75em;height:7.8125em;border-left:solid 1.0em #231815}.B:before,.B:after{position:absolute;content:'';width:3.25em;height:2.4375em;border-width:0.9375em 0.9375em 0.625em 0;border-color:#231815;border-style:solid;-webkit-border-radius:0 240% 180% 0 / 0 180% 180% 0;-moz-border-radius:0 240% 180% 0 / 0 180% 180% 0;-ms-border-radius:0 240% 180% 0 / 0 180% 180% 0;-o-border-radius:0 240% 180% 0 / 0 180% 180% 0;border-radius:0 240% 180% 0 / 0 180% 180% 0}.B:after{bottom:0;width:3.625em;height:2.6875em;border-width:0.625em 0.9375em 0.9375em 0;-webkit-border-radius:0 180% 220% 0 / 0 180% 180% 0;-moz-border-radius:0 180% 220% 0 / 0 180% 180% 0;-ms-border-radius:0 180% 220% 0 / 0 180% 180% 0;-o-border-radius:0 180% 220% 0 / 0 180% 180% 0;border-radius:0 180% 220% 0 / 0 180% 180% 0}.C{position:relative;top:0.78125em;left:0.625em;width:5.25em;height:5.9375em;border-width:0.9375em 0.75em 0.9375em 1.0em;border-color:#231815;border-style:solid;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;border-radius:50%}.C:before{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);position:absolute;content:'';top:0.125em;left:3.0625em;background-color:#fff;width:5.625em;height:5.625em}.D{position:relative;top:0.78125em;left:0.625em;border-left:solid 0.9375em #231815;height:7.8125em}.D:before{position:absolute;content:'';top:0;left:0;width:3.75em;height:5.9375em;border-width:0.9375em 0.9375em 0.9375em 0;border-color:#231815;border-style:solid;-webkit-border-radius:0 300% 300% 0 / 0 180% 180% 0;-moz-border-radius:0 300% 300% 0 / 0 180% 180% 0;-ms-border-radius:0 300% 300% 0 / 0 180% 180% 0;-o-border-radius:0 300% 300% 0 / 0 180% 180% 0;border-radius:0 300% 300% 0 / 0 180% 180% 0}.E{position:relative;top:0.78125em;left:0.625em;width:3.9375em;height:5.9375em;border-width:0.9375em 0 0.9375em 1.0em;border-color:#231815;border-style:solid}.E:before{position:absolute;content:'';top:2.375em;left:0;width:3.3125em;height:0.9375em;background-color:#231815}.F{position:relative;top:0.78125em;left:0.625em;width:3.9375em;height:6.875em;border-width:0.9375em 0 0 1.0em;border-color:#231815;border-style:solid}.F:before{position:absolute;content:'';top:2.375em;left:0;width:3.3125em;height:0.9375em;background-color:#231815}.G{position:relative;top:0.78125em;left:0.625em;width:5.25em;height:5.9375em;border-width:0.9375em 0.75em 0.9375em 1.0em;border-color:#231815;border-style:solid;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;border-radius:50%}.G:before{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);position:absolute;content:'';top:0.125em;left:3.0em;background-color:#fff;width:5.625em;height:5.625em}.G:after{position:absolute;content:'';bottom:0.03125em;right:0.4375em;width:1.75em;height:2.25em;border-width:0.8125em 0.875em 0 0;border-color:#231815;border-style:solid}.H{position:relative;top:0.78125em;left:0.625em;width:3.75em;height:7.8125em;border-width:0 1.0em 0 1.0em;border-color:#231815;border-style:solid}.H:before{position:absolute;content:'';top:3.3125em;left:0;width:3.75em;height:0.875em;background-color:#231815}.I{z-index:1;position:relative;top:0.78125em;left:1.25em;width:1.0em;height:7.8125em;background-color:#231815}.J{position:relative;top:0.78125em;left:-0.3125em;width:4.6875em;height:4.125em;border-right:solid 1.0em #231815}.J:before{position:absolute;content:'';bottom:-3.75em;right:-1.0em;width:3.125em;height:3.75em;border-width:0 1.0em 0.9375em 0.875em;border-color:#231815;border-style:solid;-webkit-border-radius:0 0 75% 75%;-moz-border-radius:0 0 75% 75%;-ms-border-radius:0 0 75% 75%;-o-border-radius:0 0 75% 75%;border-radius:0 0 75% 75%}.J:after{-webkit-transform:rotate(-40deg);-moz-transform:rotate(-40deg);-ms-transform:rotate(-40deg);-o-transform:rotate(-40deg);transform:rotate(-40deg);position:absolute;content:'';top:2.5em;left:-1.25em;width:3.75em;height:3.75em;background-color:#fff}.K{position:relative;top:0.78125em;left:0.625em;width:5.0em;height:7.8125em;border-left:solid 1.0em #231815;overflow:hidden}.K:before{-webkit-transform:skew(-43deg,0);-moz-transform:skew(-43deg,0);-ms-transform:skew(-43deg,0);-o-transform:skew(-43deg,0);transform:skew(-43deg,0);position:absolute;content:'';top:0;left:1.0em;width:1.1875em;height:5.25em;background-color:#231815}.K:after{-webkit-transform:skew(30deg,0);-moz-transform:skew(30deg,0);-ms-transform:skew(30deg,0);-o-transform:skew(30deg,0);transform:skew(30deg,0);position:absolute;content:'';bottom:0;right:1.5625em;width:1.125em;height:5.0em;background-color:#231815}.L{position:relative;top:0.78125em;left:0.625em;width:3.9375em;height:6.875em;border-width:0 0 0.9375em 1.0em;border-color:#231815;border-style:solid}.M{position:relative;top:0.78125em;left:0.625em;width:5.0em;height:7.8125em;border-width:0 0.9375em 0 0.9375em;border-color:#231815;border-style:solid}.M:before{-webkit-transform:skew(20deg,0);-moz-transform:skew(20deg,0);-ms-transform:skew(20deg,0);-o-transform:skew(20deg,0);transform:skew(20deg,0);position:absolute;content:'';top:0;left:0.875em;width:0.75em;height:6.875em;background-color:#231815}.M:after{-webkit-transform:skew(-20deg,0);-moz-transform:skew(-20deg,0);-ms-transform:skew(-20deg,0);-o-transform:skew(-20deg,0);transform:skew(-20deg,0);position:absolute;content:'';top:0;right:0.875em;width:0.75em;height:6.875em;background-color:#231815}.N{position:relative;top:0.78125em;left:0.625em;width:3.9375em;height:7.8125em;border-width:0 0.9375em 0 0.9375em;border-color:#231815;border-style:solid}.N:before{-webkit-transform:skew(30deg,0);-moz-transform:skew(30deg,0);-ms-transform:skew(30deg,0);-o-transform:skew(30deg,0);transform:skew(30deg,0);position:absolute;content:'';top:0;left:1.5em;width:0.9375em;height:7.8125em;background-color:#231815}.O{position:relative;top:0.78125em;left:0.625em;width:4.375em;height:6.0625em;border-width:0.875em 1.0em 0.875em 1.0em;border-color:#231815;border-style:solid;-webkit-border-radius:55% / 52%;-moz-border-radius:55% / 52%;-ms-border-radius:55% / 52%;-o-border-radius:55% / 52%;border-radius:55% / 52%}.P{position:relative;top:0.78125em;left:0.625em;width:3.75em;height:7.8125em;border-left:solid 1.0em #231815}.P:before{position:absolute;content:'';width:3.5em;height:3.125em;border-width:0.8125em 0.9375em 0.8125em 0;border-color:#231815;border-style:solid;-webkit-border-radius:0 220% 220% 0 / 0 180% 180% 0;-moz-border-radius:0 220% 220% 0 / 0 180% 180% 0;-ms-border-radius:0 220% 220% 0 / 0 180% 180% 0;-o-border-radius:0 220% 220% 0 / 0 180% 180% 0;border-radius:0 220% 220% 0 / 0 180% 180% 0}.Q{z-index:-1;position:relative;top:0.78125em;left:0.625em;width:4.375em;height:6.0625em;border-width:0.875em 1.0em 0.875em 1.0em;border-color:#231815;border-style:solid;-webkit-border-radius:55% / 52%;-moz-border-radius:55% / 52%;-ms-border-radius:55% / 52%;-o-border-radius:55% / 52%;border-radius:55% / 52%}.Q:before{-webkit-transform:rotate(-84deg);-moz-transform:rotate(-84deg);-ms-transform:rotate(-84deg);-o-transform:rotate(-84deg);transform:rotate(-84deg);position:absolute;content:'';top:5.125em;left:3.0625em;width:1.0em;height:3.0em;border-width:1.0em 0 0.8125em 0.8125em;border-color:#231815;border-style:solid;-webkit-border-radius:200% 0 0 200% / 100% 0 0 100%;-moz-border-radius:200% 0 0 200% / 100% 0 0 100%;-ms-border-radius:200% 0 0 200% / 100% 0 0 100%;-o-border-radius:200% 0 0 200% / 100% 0 0 100%;border-radius:200% 0 0 200% / 100% 0 0 100%}.Q:after{-webkit-transform:rotate(-18deg);-moz-transform:rotate(-18deg);-ms-transform:rotate(-18deg);-o-transform:rotate(-18deg);transform:rotate(-18deg);position:absolute;content:'';bottom:-2.1875em;right:-2.75em;width:1.875em;height:1.875em;background-color:#fff}.R{position:relative;top:0.78125em;left:0.625em;width:3.75em;height:7.8125em;border-left:solid 1.0em #231815}.R:before{position:absolute;content:'';width:3.25em;height:2.75em;border-width:0.8125em 0.9375em 0.8125em 0;border-color:#231815;border-style:solid;-webkit-border-radius:0 220% 220% 0 / 0 180% 180% 0;-moz-border-radius:0 220% 220% 0 / 0 180% 180% 0;-ms-border-radius:0 220% 220% 0 / 0 180% 180% 0;-o-border-radius:0 220% 220% 0 / 0 180% 180% 0;border-radius:0 220% 220% 0 / 0 180% 180% 0}.R:after{-webkit-transform:skew(32deg,0);-moz-transform:skew(32deg,0);-ms-transform:skew(32deg,0);-o-transform:skew(32deg,0);transform:skew(32deg,0);position:absolute;content:'';bottom:0;left:2.375em;width:1.125em;height:3.625em;background-color:#231815}.S{-webkit-transform:rotate(14deg);-moz-transform:rotate(14deg);-ms-transform:rotate(14deg);-o-transform:rotate(14deg);transform:rotate(14deg);position:relative;width:6.5625em;height:9.375em;top:0.625em;left:0.625em}.S:before{-webkit-transform:rotate(18deg);-moz-transform:rotate(18deg);-ms-transform:rotate(18deg);-o-transform:rotate(18deg);transform:rotate(18deg);position:absolute;content:'';width:2.75em;height:2.5em;border-width:0.875em 0 0.9375em 0.96875em;border-color:#231815;border-style:solid;-webkit-border-radius:220% 0 0 150% / 150% 0 0 100%;-moz-border-radius:220% 0 0 150% / 150% 0 0 100%;-ms-border-radius:220% 0 0 150% / 150% 0 0 100%;-o-border-radius:220% 0 0 150% / 150% 0 0 100%;border-radius:220% 0 0 150% / 150% 0 0 100%}.S:after{-webkit-transform:rotate(198deg);-moz-transform:rotate(198deg);-ms-transform:rotate(198deg);-o-transform:rotate(198deg);transform:rotate(198deg);position:absolute;content:'';top:4.0625em;left:1.3125em;width:3.25em;height:2.75em;border-width:0.875em 0 0.9375em 0.9375em;border-color:#231815;border-style:solid;-webkit-border-radius:240% 0 0 110% / 140% 0 0 100%;-moz-border-radius:240% 0 0 110% / 140% 0 0 100%;-ms-border-radius:240% 0 0 110% / 140% 0 0 100%;-o-border-radius:240% 0 0 110% / 140% 0 0 100%;border-radius:240% 0 0 110% / 140% 0 0 100%}.T{position:relative;top:0.78125em;left:0.625em;width:6.25em;height:7.8125em;border-top:solid 0.9375em #231815}.T:before{position:absolute;content:'';top:0;left:2.625em;width:1.0em;height:6.875em;background-color:#231815}.U{position:relative;top:0.78125em;left:0.625em;width:3.75em;height:5.0em;border-width:0 1.0em 0 1.0em;border-color:#231815;border-style:solid}.U:before{position:absolute;content:'';top:4.0625em;left:-1.0em;width:3.75em;height:2.8125em;border-width:0 1.0em 0.9375em 1.0em;border-color:#231815;border-style:solid;-webkit-border-radius:0 0 200% 200% / 0 0 300% 300%;-moz-border-radius:0 0 200% 200% / 0 0 300% 300%;-ms-border-radius:0 0 200% 200% / 0 0 300% 300%;-o-border-radius:0 0 200% 200% / 0 0 300% 300%;border-radius:0 0 200% 200% / 0 0 300% 300%}.V{position:relative;top:0.78125em;left:1.875em;width:3.6875em}.V:before{-webkit-transform:skew(18deg,0);-moz-transform:skew(18deg,0);-ms-transform:skew(18deg,0);-o-transform:skew(18deg,0);transform:skew(18deg,0);position:absolute;content:'';top:0;left:0;height:7.8125em;border-left:solid 1.0em #231815}.V:after{-webkit-transform:skew(-18deg,0);-moz-transform:skew(-18deg,0);-ms-transform:skew(-18deg,0);-o-transform:skew(-18deg,0);transform:skew(-18deg,0);position:absolute;content:'';top:0;right:0;height:7.8125em;border-left:solid 1.0em #231815}.W{position:relative;top:0.78125em;left:1.5625em;width:6.25em}.W:before{-webkit-transform:skew(11deg,0);-moz-transform:skew(11deg,0);-ms-transform:skew(11deg,0);-o-transform:skew(11deg,0);transform:skew(11deg,0);position:absolute;content:'';top:0;left:0;width:2.625em;height:7.8125em;border-width:0 0.8125em 0 0.9375em;border-color:#231815;border-style:solid}.W:after{-webkit-transform:skew(-11deg,0);-moz-transform:skew(-11deg,0);-ms-transform:skew(-11deg,0);-o-transform:skew(-11deg,0);transform:skew(-11deg,0);position:absolute;content:'';top:0;right:0;width:2.625em;height:7.8125em;border-width:0 0.9375em 0 0.8125em;border-color:#231815;border-style:solid}.X{position:relative;top:0.78125em;left:3.125em;width:1.0em;height:7.8125em}.X:before{-webkit-transform:skew(32deg,0);-moz-transform:skew(32deg,0);-ms-transform:skew(32deg,0);-o-transform:skew(32deg,0);transform:skew(32deg,0);position:absolute;content:'';top:0;left:0;width:1.0em;height:7.8125em;background-color:#231815}.X:after{-webkit-transform:skew(-32deg,0);-moz-transform:skew(-32deg,0);-ms-transform:skew(-32deg,0);-o-transform:skew(-32deg,0);transform:skew(-32deg,0);position:absolute;content:'';top:0;right:0;width:1.0em;height:7.8125em;background-color:#231815}.Y{position:relative;top:5.78125em;left:3.25em;width:1.0em;height:3.125em;background-color:#231815}.Y:before{-webkit-transform:skew(28deg,0);-moz-transform:skew(28deg,0);-ms-transform:skew(28deg,0);-o-transform:skew(28deg,0);transform:skew(28deg,0);position:absolute;content:'';top:-5.0em;left:-1.3125em;width:1.0em;height:5.0em;background-color:#231815}.Y:after{-webkit-transform:skew(-28deg,0);-moz-transform:skew(-28deg,0);-ms-transform:skew(-28deg,0);-o-transform:skew(-28deg,0);transform:skew(-28deg,0);position:absolute;content:'';top:-5.0em;right:-1.3125em;width:1.0em;height:5.0em;background-color:#231815}.Z{position:relative;top:0.78125em;left:0.625em;width:5.625em;height:5.9375em;border-width:0.9375em 0 0.9375em 0;border-color:#231815;border-style:solid}.Z:before{-webkit-transform:skew(-37deg,0);-moz-transform:skew(-37deg,0);-ms-transform:skew(-37deg,0);-o-transform:skew(-37deg,0);transform:skew(-37deg,0);position:absolute;content:'';top:0;left:2.25em;width:1.125em;height:5.9375em;background-color:#231815}
diff --git a/src/css-sans.less b/src/css-sans.less
index df56948..27974de 100644
--- a/src/css-sans.less
+++ b/src/css-sans.less
@@ -9,10 +9,10 @@
 
 .A {
   position: relative;
-  left: 30px;
-  width: 60px;
-  height: 91px;
-  border-bottom: solid 14px @black;
+  left: 1.875em;
+  width: 3.75em;
+  height: 5.6875em;
+  border-bottom: solid 0.875em @black;
   .transition(all linear 200ms);
   
   &:before, &:after {
@@ -20,33 +20,33 @@
               .skew(-19deg);
               position: absolute;
               content: '';
-              top: 12.5px;
+              top: 0.78125em;
               left: 0;
-              width: 16px;
-              height: 125px;
+              width: 1.0em;
+              height: 7.8125em;
               background-color: @black;
             }
   &:after {
     .skew(19deg);
-    left: 45px;
+    left: 2.8125em;
   }
 }
 
 .B {
   position: relative;
-  top: 12.5px;
-  left: 10px;
-  width: 60px;
-  height: 125px;
-  border-left: solid 16px @black;
+  top: 0.78125em;
+  left: 0.625em;
+  width: 3.75em;
+  height: 7.8125em;
+  border-left: solid 1.0em @black;
 
   &:before, &:after {
               position: absolute;
               content: '';
-              width: 52px;
-              height: 39px;
-              @w: 15px;
-              border-width: @w @w 10px 0;
+              width: 3.25em;
+              height: 2.4375em;
+              @w: 0.9375em;
+              border-width: @w @w 0.625em 0;
               border-color: @black;
               border-style: solid;
               .border-radius(e("0 240% 180% 0 / 0 180% 180% 0"));
@@ -54,22 +54,22 @@
 
   &:after {
     bottom: 0;
-    @w: 15px;
-    width: 58px;
-    height: 43px;
-    border-width: 10px @w @w 0;
+    @w: 0.9375em;
+    width: 3.625em;
+    height: 2.6875em;
+    border-width: 0.625em @w @w 0;
     .border-radius(e("0 180% 220% 0 / 0 180% 180% 0"));
   }
 }
 
 .C {
   position: relative;
-  top: 12.5px;
-  left: 10px;
-  width: 84px;
-  height: 95px;
-  @w: 15px;
-  border-width: @w 12px @w 16px;
+  top: 0.78125em;
+  left: 0.625em;
+  width: 5.25em;
+  height: 5.9375em;
+  @w: 0.9375em;
+  border-width: @w 0.75em @w 1.0em;
   border-color: @black;
   border-style: solid;
   .border-radius(e("50%"));
@@ -78,29 +78,29 @@
     .rotate(45deg);
     position: absolute;
     content: '';
-    top: 2px;
-    left: 49px;
+    top: 0.125em;
+    left: 3.0625em;
     background-color: @white;
-    width: 90px;
-    height: 90px;
+    width: 5.625em;
+    height: 5.625em;
   }
 }
 
 .D {
   position: relative;
-  top: 12.5px;
-  left: 10px;
-  border-left: solid 15px @black;
-  height: 125px;
+  top: 0.78125em;
+  left: 0.625em;
+  border-left: solid 0.9375em @black;
+  height: 7.8125em;
 
   &:before {
     position: absolute;
     content: '';
     top: 0;
     left: 0;
-    width: 60px;
-    height: 95px;
-    @w: 15px;
+    width: 3.75em;
+    height: 5.9375em;
+    @w: 0.9375em;
     border-width: @w @w @w 0;
     border-color: @black;
     border-style: solid;
@@ -110,22 +110,22 @@
 
 .E{
   position: relative;
-  top: 12.5px;
-  left: 10px;
-  width: 63px;
-  height: 95px;
-  @w: 15px;
-  border-width: @w 0 @w 16px;
+  top: 0.78125em;
+  left: 0.625em;
+  width: 3.9375em;
+  height: 5.9375em;
+  @w: 0.9375em;
+  border-width: @w 0 @w 1.0em;
   border-color: @black;
   border-style: solid;
 
   &:before {
     position: absolute;
     content: '';
-    top: 38px;
-    left: 0px;
-    width: 53px;
-    height: 15px;
+    top: 2.375em;
+    left: 0.0em;
+    width: 3.3125em;
+    height: 0.9375em;
     background-color: @black;
   }
 
@@ -133,22 +133,22 @@
 
 .F {
   position: relative;
-  top: 12.5px;
-  left: 10px;
-  width: 63px;
-  height: 110px;
-  @w: 15px;
-  border-width: @w 0 0 16px;
+  top: 0.78125em;
+  left: 0.625em;
+  width: 3.9375em;
+  height: 6.875em;
+  @w: 0.9375em;
+  border-width: @w 0 0 1.0em;
   border-color: @black;
   border-style: solid;
 
   &:before {
     position: absolute;
     content: '';
-    top: 38px;
-    left: 0px;
-    width: 53px;
-    height: 15px;
+    top: 2.375em;
+    left: 0.0em;
+    width: 3.3125em;
+    height: 0.9375em;
     background-color: @black;
   }
 
@@ -156,12 +156,12 @@
 
 .G {
   position: relative;
-  top: 12.5px;
-  left: 10px;
-  width: 84px;
-  height: 95px;
-  @w: 15px;
-  border-width: @w 12px @w 16px;
+  top: 0.78125em;
+  left: 0.625em;
+  width: 5.25em;
+  height: 5.9375em;
+  @w: 0.9375em;
+  border-width: @w 0.75em @w 1.0em;
   border-color: @black;
   border-style: solid;
   .border-radius(e("50%"));
@@ -170,21 +170,21 @@
     .rotate(45deg);
     position: absolute;
     content: '';
-    top: 2px;
-    left: 48px;
+    top: 0.125em;
+    left: 3.0em;
     background-color: @white;
-    width: 90px;
-    height: 90px;
+    width: 5.625em;
+    height: 5.625em;
   }
 
   &:after {
     position: absolute;
     content: '';
-    bottom: 0.5px;
-    right: 7px;
-    width: 28px;
-    height: 36px;
-    border-width: 13px 14px 0 0;
+    bottom: 0.03125em;
+    right: 0.4375em;
+    width: 1.75em;
+    height: 2.25em;
+    border-width: 0.8125em 0.875em 0 0;
     border-color: @black;
     border-style: solid;
   }
@@ -193,11 +193,11 @@
 
 .H {
   position: relative;
-  top: 12.5px;
-  left: 10px;
-  width: 60px;
-  height: 125px;
-  @w: 16px;
+  top: 0.78125em;
+  left: 0.625em;
+  width: 3.75em;
+  height: 7.8125em;
+  @w: 1.0em;
   border-width: 0 @w 0 @w;
   border-color: @black;
   border-style: solid;
@@ -205,10 +205,10 @@
   &:before {
     position: absolute;
     content: '';
-    top: 53px;
+    top: 3.3125em;
     left:0;
-    width: 60px;
-    height: 14px;
+    width: 3.75em;
+    height: 0.875em;
     background-color: @black;
   }
 
@@ -217,31 +217,31 @@
 .I {
   z-index: 1;
   position: relative;
-  top: 12.5px;
-  left: 20px;
-  width: 16px;
-  height: 125px;
+  top: 0.78125em;
+  left: 1.25em;
+  width: 1.0em;
+  height: 7.8125em;
   background-color: @black;
 
 }
 
 .J {
   position: relative;
-  top: 12.5px;
-  left: -5px;
-  width: 75px;
-  height: 66px;
-  @w: 16px;
+  top: 0.78125em;
+  left: -0.3125em;
+  width: 4.6875em;
+  height: 4.125em;
+  @w: 1.0em;
   border-right: solid @w @black;
   
   &:before {
     position: absolute;
     content: '';
-    bottom: -60px;
+    bottom: -3.75em;
     right: -@w;
-    width: 50px;
-    height: 60px;
-    border-width: 0 @w 15px 14px;
+    width: 3.125em;
+    height: 3.75em;
+    border-width: 0 @w 0.9375em 0.875em;
     border-color: @black;
     border-style: solid;
     .border-radius(0 0 75% 75%);
@@ -250,10 +250,10 @@
     .rotate(-40deg);
     position: absolute;
     content: '';
-    top: 40px;
-    left: -20px;
-    width: 60px;
-    height: 60px;
+    top: 2.5em;
+    left: -1.25em;
+    width: 3.75em;
+    height: 3.75em;
     background-color: @white;
   }
 
@@ -261,11 +261,11 @@
 
 .K {
   position: relative;
-  top: 12.5px;
-  left: 10px;
-  width: 80px;
-  height: 125px;
-  border-left: solid 16px @black;
+  top: 0.78125em;
+  left: 0.625em;
+  width: 5.0em;
+  height: 7.8125em;
+  border-left: solid 1.0em @black;
   overflow: hidden;
   
   &:before {
@@ -273,9 +273,9 @@
     position: absolute;
     content: '';
     top: 0;
-    left: 16px;
-    width: 19px;
-    height: 84px;
+    left: 1.0em;
+    width: 1.1875em;
+    height: 5.25em;
     background-color: @black;
   }
   &:after {
@@ -283,9 +283,9 @@
     position: absolute;
     content: '';
     bottom: 0;
-    right: 25px;
-    width: 18px;
-    height: 80px;
+    right: 1.5625em;
+    width: 1.125em;
+    height: 5.0em;
     background-color: @black;
   }
 
@@ -293,12 +293,12 @@
 
 .L {
   position: relative;
-  top: 12.5px;
-  left: 10px;
-  width: 63px;
-  height: 110px;
-  @w: 15px;
-  border-width: 0 0 @w 16px;
+  top: 0.78125em;
+  left: 0.625em;
+  width: 3.9375em;
+  height: 6.875em;
+  @w: 0.9375em;
+  border-width: 0 0 @w 1.0em;
   border-color: @black;
   border-style: solid;
 
@@ -306,11 +306,11 @@
 
 .M {
   position: relative;
-  top: 12.5px;
-  left: 10px;
-  width: 80px;
-  height: 125px;
-  @w: 15px;
+  top: 0.78125em;
+  left: 0.625em;
+  width: 5.0em;
+  height: 7.8125em;
+  @w: 0.9375em;
   border-width: 0 @w 0 @w;
   border-color: @black;
   border-style: solid;
@@ -320,9 +320,9 @@
     position: absolute;
     content: '';
     top: 0;
-    left: 14px;
-    width: 12px;
-    height: 110px;
+    left: 0.875em;
+    width: 0.75em;
+    height: 6.875em;
     background-color: @black;
   }
   &:after {
@@ -330,9 +330,9 @@
     position: absolute;
     content: '';
     top: 0;
-    right: 14px;
-    width: 12px;
-    height: 110px;
+    right: 0.875em;
+    width: 0.75em;
+    height: 6.875em;
     background-color: @black;
   }
 
@@ -340,11 +340,11 @@
 
 .N {
   position: relative;
-  top: 12.5px;
-  left: 10px;
-  width: 63px;
-  height: 125px;
-  @w: 15px;
+  top: 0.78125em;
+  left: 0.625em;
+  width: 3.9375em;
+  height: 7.8125em;
+  @w: 0.9375em;
   border-width: 0 @w 0 @w;
   border-color: @black;
   border-style: solid;
@@ -354,9 +354,9 @@
     position: absolute;
     content: '';
     top: 0;
-    left: 24px;
-    width: 15px;
-    height: 125px;
+    left: 1.5em;
+    width: 0.9375em;
+    height: 7.8125em;
     background-color: @black;
   }
 
@@ -364,12 +364,12 @@
 
 .O {
   position: relative;
-  top: 12.5px;
-  left: 10px;
-  width: 70px;
-  height: 97px;
-  @w: 16px;
-  border-width: 14px @w 14px @w;
+  top: 0.78125em;
+  left: 0.625em;
+  width: 4.375em;
+  height: 6.0625em;
+  @w: 1.0em;
+  border-width: 0.875em @w 0.875em @w;
   border-color: @black;
   border-style: solid;
   .border-radius(e("55% / 52%"));
@@ -378,19 +378,19 @@
 
 .P {
   position: relative;
-  top: 12.5px;
-  left: 10px;
-  width: 60px;
-  height: 125px;
-  border-left: solid 16px @black;
+  top: 0.78125em;
+  left: 0.625em;
+  width: 3.75em;
+  height: 7.8125em;
+  border-left: solid 1.0em @black;
 
   &:before {
     position: absolute;
     content: '';
-    width: 56px;
-    height: 50px;
-    @w: 15px;
-    border-width: 13px @w 13px 0;
+    width: 3.5em;
+    height: 3.125em;
+    @w: 0.9375em;
+    border-width: 0.8125em @w 0.8125em 0;
     border-color: @black;
     border-style: solid;
     .border-radius(e("0 220% 220% 0 / 0 180% 180% 0"));
@@ -401,12 +401,12 @@
 .Q {
   z-index: -1;
   position: relative;
-  top: 12.5px;
-  left: 10px;
-  width: 70px;
-  height: 97px;
-  @w: 16px;
-  border-width: 14px @w 14px @w;
+  top: 0.78125em;
+  left: 0.625em;
+  width: 4.375em;
+  height: 6.0625em;
+  @w: 1.0em;
+  border-width: 0.875em @w 0.875em @w;
   border-color: @black;
   border-style: solid;
   .border-radius(e("55% / 52%"));
@@ -415,12 +415,12 @@
     .rotate(-84deg);
     position: absolute;
     content: '';
-    top: 82px;
-    left: 49px;
-    width: 16px;
-    height: 48px;
-    @w: 13px;
-    border-width: 16px 0 @w @w;
+    top: 5.125em;
+    left: 3.0625em;
+    width: 1.0em;
+    height: 3.0em;
+    @w: 0.8125em;
+    border-width: 1.0em 0 @w @w;
     border-color: @black;
     border-style: solid;
     .border-radius(e("200% 0 0 200% / 100% 0 0 100%"));
@@ -429,10 +429,10 @@
     .rotate(-18deg);
     position: absolute;
     content: '';
-    bottom: -35px;
-    right: -44px;
-    width: 30px;
-    height: 30px;
+    bottom: -2.1875em;
+    right: -2.75em;
+    width: 1.875em;
+    height: 1.875em;
     background-color: @white;
   }
 
@@ -440,19 +440,19 @@
 
 .R {
   position: relative;
-  top: 12.5px;
-  left: 10px;
-  width: 60px;
-  height: 125px;
-  border-left: solid 16px @black;
+  top: 0.78125em;
+  left: 0.625em;
+  width: 3.75em;
+  height: 7.8125em;
+  border-left: solid 1.0em @black;
 
   &:before {
     position: absolute;
     content: '';
-    width: 52px;
-    height: 44px;
-    @w: 15px;
-    border-width: 13px @w 13px 0;
+    width: 3.25em;
+    height: 2.75em;
+    @w: 0.9375em;
+    border-width: 0.8125em @w 0.8125em 0;
     border-color: @black;
     border-style: solid;
     .border-radius(e("0 220% 220% 0 / 0 180% 180% 0"));
@@ -462,9 +462,9 @@
     position: absolute;
     content: '';
     bottom: 0;
-    left: 38px;
-    width: 18px;
-    height: 58px;
+    left: 2.375em;
+    width: 1.125em;
+    height: 3.625em;
     background-color: @black;
   }
 
@@ -473,19 +473,19 @@
 .S {
   .rotate(14deg);
   position: relative;
-  width: 105px;
-  height: 150px;
-  top: 10px;
-  left: 10px;
+  width: 6.5625em;
+  height: 9.375em;
+  top: 0.625em;
+  left: 0.625em;
   
   &:before {
     .rotate(18deg);
     position: absolute;
     content: '';
-    width: 44px;
-    height: 40px;
-    @w: 15px;
-    border-width: 14px 0 @w 15.5px;
+    width: 2.75em;
+    height: 2.5em;
+    @w: 0.9375em;
+    border-width: 0.875em 0 @w 0.96875em;
     border-color: @black;
     border-style: solid;
     .border-radius(e("220% 0 0 150% / 150% 0 0 100%"));
@@ -494,12 +494,12 @@
     .rotate(198deg);
     position: absolute;
     content: '';
-    top: 65px;
-    left: 21px;
-    width: 52px;
-    height: 44px;
-    @w: 15px;
-    border-width: 14px 0 @w @w;
+    top: 4.0625em;
+    left: 1.3125em;
+    width: 3.25em;
+    height: 2.75em;
+    @w: 0.9375em;
+    border-width: 0.875em 0 @w @w;
     border-color: @black;
     border-style: solid;
     .border-radius(e("240% 0 0 110% / 140% 0 0 100%"));
@@ -509,19 +509,19 @@
 
 .T {
   position: relative;
-  top: 12.5px;
-  left: 10px;
-  width: 100px;
-  height: 125px;
-  border-top: solid 15px @black;
+  top: 0.78125em;
+  left: 0.625em;
+  width: 6.25em;
+  height: 7.8125em;
+  border-top: solid 0.9375em @black;
 
   &:before {
     position: absolute;
     content: '';
     top: 0;
-    left: 42px;
-    width: 16px;
-    height: 110px;
+    left: 2.625em;
+    width: 1.0em;
+    height: 6.875em;
     background-color: @black;
   }
 
@@ -529,11 +529,11 @@
 
 .U {
   position: relative;
-  top: 12.5px;
-  left: 10px;
-  width: 60px;
-  height: 80px;
-  @w: 16px;
+  top: 0.78125em;
+  left: 0.625em;
+  width: 3.75em;
+  height: 5.0em;
+  @w: 1.0em;
   border-width: 0 @w 0 @w;
   border-color: @black;
   border-style: solid;
@@ -541,12 +541,12 @@
   &:before {
     position: absolute;
     content: '';
-    top: 65px;
-    left: -16px;
-    width: 60px;
-    height: 45px;
-    @w: 16px;
-    border-width: 0 @w 15px @w;
+    top: 4.0625em;
+    left: -1.0em;
+    width: 3.75em;
+    height: 2.8125em;
+    @w: 1.0em;
+    border-width: 0 @w 0.9375em @w;
     border-color: @black;
     border-style: solid;
     .border-radius(e("0 0 200% 200% / 0 0 300% 300%"));
@@ -556,9 +556,9 @@
 
 .V {
   position: relative;
-  top: 12.5px;
-  left: 30px;
-  width: 59px;
+  top: 0.78125em;
+  left: 1.875em;
+  width: 3.6875em;
   
   &:before {
     .skew(18deg);
@@ -566,8 +566,8 @@
     content: '';
     top: 0;
     left: 0;
-    height: 125px;
-    border-left: solid 16px @black;
+    height: 7.8125em;
+    border-left: solid 1.0em @black;
   }
 
   &:after {
@@ -576,17 +576,17 @@
     content: '';
     top: 0;
     right: 0;
-    height: 125px;
-    border-left: solid 16px @black;
+    height: 7.8125em;
+    border-left: solid 1.0em @black;
   }
 
 }
 
 .W {
   position: relative;
-  top: 12.5px;
-  left: 25px;
-  width: 100px;
+  top: 0.78125em;
+  left: 1.5625em;
+  width: 6.25em;
   
   &:before {
     .skew(11deg);
@@ -594,10 +594,10 @@
     content: '';
     top: 0;
     left: 0;
-    width: 42px;
-    height: 125px;
-    @w: 15px;
-    border-width: 0 13px 0 @w;
+    width: 2.625em;
+    height: 7.8125em;
+    @w: 0.9375em;
+    border-width: 0 0.8125em 0 @w;
     border-color: @black;
     border-style: solid;
   }
@@ -608,10 +608,10 @@
     content: '';
     top: 0;
     right: 0;
-    width: 42px;
-    height: 125px;
-    @w: 15px;
-    border-width: 0 @w 0 13px;
+    width: 2.625em;
+    height: 7.8125em;
+    @w: 0.9375em;
+    border-width: 0 @w 0 0.8125em;
     border-color: @black;
     border-style: solid;
   }
@@ -620,10 +620,10 @@
 
 .X {
   position: relative;
-  top: 12.5px;
-  left: 50px;
-  width: 16px;
-  height: 125px;
+  top: 0.78125em;
+  left: 3.125em;
+  width: 1.0em;
+  height: 7.8125em;
   
   &:before {
     .skew(32deg);
@@ -631,8 +631,8 @@
     content: '';
     top: 0;
     left: 0;
-    width: 16px;
-    height: 125px;
+    width: 1.0em;
+    height: 7.8125em;
     background-color: @black;
   }
 
@@ -642,8 +642,8 @@
     content: '';
     top: 0;
     right: 0;
-    width: 16px;
-    height: 125px;
+    width: 1.0em;
+    height: 7.8125em;
     background-color: @black;
 
   }
@@ -652,30 +652,30 @@
 
 .Y {
   position: relative;
-  top: 92.5px;
-  left: 52px;
-  width: 16px;
-  height: 50px;
+  top: 5.78125em;
+  left: 3.25em;
+  width: 1.0em;
+  height: 3.125em;
   background-color: @black;
 
   &:before {
     .skew(28deg);
     position: absolute;
     content: '';
-    top: -80px;
-    left: -21px;
-    width: 16px;
-    height: 80px;
+    top: -5.0em;
+    left: -1.3125em;
+    width: 1.0em;
+    height: 5.0em;
     background-color: @black;
   }
   &:after {
     .skew(-28deg);
     position: absolute;
     content: '';
-    top: -80px;
-    right: -21px;
-    width: 16px;
-    height: 80px;
+    top: -5.0em;
+    right: -1.3125em;
+    width: 1.0em;
+    height: 5.0em;
     background-color: @black;
   }
 
@@ -683,11 +683,11 @@
 
 .Z {
   position: relative;
-  top: 12.5px;
-  left: 10px;
-  width: 90px;
-  height: 95px;
-  @w: 15px;
+  top: 0.78125em;
+  left: 0.625em;
+  width: 5.625em;
+  height: 5.9375em;
+  @w: 0.9375em;
   border-width: @w 0 @w 0;
   border-color: @black;
   border-style: solid;
@@ -697,9 +697,9 @@
     position: absolute;
     content: '';
     top: 0;
-    left: 36px;
-    width: 18px;
-    height: 95px;
+    left: 2.25em;
+    width: 1.125em;
+    height: 5.9375em;
     background-color: @black;
   }
 
diff --git a/src/sass/_config.sass b/src/sass/_config.sass
index 12fcbce..1b89005 100644
--- a/src/sass/_config.sass
+++ b/src/sass/_config.sass
@@ -1,5 +1,5 @@
 //Variables
-$w: 15px
+$w: 0.9375em
 $black: #231815
 $white: white
 
diff --git a/src/sass/_css-sans.sass b/src/sass/_css-sans.sass
index b0c89c2..78bd44c 100644
--- a/src/sass/_css-sans.sass
+++ b/src/sass/_css-sans.sass
@@ -3,248 +3,248 @@
 .A
   +transition(all linear 200ms)
   position: relative
-  left: 30px
-  width: 60px
-  height: 91px
-  border-bottom: solid 14px $w
+  left: 1.875em
+  width: 3.75em
+  height: 5.6875em
+  border-bottom: solid 0.875em $w
   &:after, &:before
     +skew(-19deg, 0)
     position: absolute
     content: ''
-    top: 12.5px
+    top: 0.78125em
     left: 0
-    width: 16px
-    height: 125px
+    width: 1.0em
+    height: 7.8125em
     background-color: $black
   &:after
     +skew(19deg, 0)
-    left: 45px
+    left: 2.8125em
 
 .B
   position: relative
-  top: 12.5px
-  left: 10px
-  width: 60px
-  height: 125px
-  border-left: solid 16px $black
+  top: 0.78125em
+  left: 0.625em
+  width: 3.75em
+  height: 7.8125em
+  border-left: solid 1.0em $black
   &:before, &:after
     +border-radius(0 240% 180% 0, 0 180% 180% 0)
     position: absolute
     content: ''
-    width: 52px
-    height: 39px
-    border-width: $w $w 10px 0
+    width: 3.25em
+    height: 2.4375em
+    border-width: $w $w 0.625em 0
     border-color: $black
     border-style: solid
   &:after
     +border-radius(0 180% 220% 0, 0 180% 180% 0)
     bottom: 0
-    width: 58px
-    height: 43px
-    border-width: 10px $w $w 0
+    width: 3.625em
+    height: 2.6875em
+    border-width: 0.625em $w $w 0
 
 .C
   +border-radius(50%)
   position: relative
-  top: 12.5px
-  left: 10px
-  width: 84px
-  height: 95px
-  border-width: $w 12px $w 16px
+  top: 0.78125em
+  left: 0.625em
+  width: 5.25em
+  height: 5.9375em
+  border-width: $w 0.75em $w 1.0em
   border-color: $black
   border-style: solid
   &:before
     +rotate(45deg)
     position: absolute
     content: ''
-    top: 2px
-    left: 49px
+    top: 0.125em
+    left: 3.0625em
     background-color: $white
-    width: 90px
-    height: 90px
+    width: 5.625em
+    height: 5.625em
 
 .D
   position: relative
-  top: 12.5px
-  left: 10px
+  top: 0.78125em
+  left: 0.625em
   border-left: solid $w $black
-  height: 125px
+  height: 7.8125em
   &:before
     +border-radius(0 300% 300% 0, 0 180% 180% 0)
     position: absolute
     content: ''
     top: 0
     left: 0
-    width: 60px
-    height: 95px
+    width: 3.75em
+    height: 5.9375em
     border-width: $w $w $w 0
     border-color: $black
     border-style: solid
 
 .E
   position: relative
-  top: 12.5px
-  left: 10px
-  width: 63px
-  height: 95px
-  border-width: $w 0 $w 16px
+  top: 0.78125em
+  left: 0.625em
+  width: 3.9375em
+  height: 5.9375em
+  border-width: $w 0 $w 1.0em
   border-color: $black
   border-style: solid
   &:before
     position: absolute
     content: ''
-    top: 38px
-    left: 0px
-    width: 53px
-    height: 15px
+    top: 2.375em
+    left: 0.0em
+    width: 3.3125em
+    height: 0.9375em
     background-color: $black
 
 .F
   position: relative
-  top: 12.5px
-  left: 10px
-  width: 63px
-  height: 110px
-  border-width: $w 0 0 16px
+  top: 0.78125em
+  left: 0.625em
+  width: 3.9375em
+  height: 6.875em
+  border-width: $w 0 0 1.0em
   border-color: $black
   border-style: solid
   &:before
     position: absolute
     content: ''
-    top: 38px
-    left: 0px
-    width: 53px
-    height: 15px
+    top: 2.375em
+    left: 0.0em
+    width: 3.3125em
+    height: 0.9375em
     background-color: $black
 
 .G
   +border-radius(50%)
   position: relative
-  top: 12.5px
-  left: 10px
-  width: 84px
-  height: 95px
-  border-width: $w 12px $w 16px
+  top: 0.78125em
+  left: 0.625em
+  width: 5.25em
+  height: 5.9375em
+  border-width: $w 0.75em $w 1.0em
   border-color: $black
   border-style: solid
   &:before
     +rotate(45deg)
     position: absolute
     content: ''
-    top: 2px
-    left: 48px
+    top: 0.125em
+    left: 3.0em
     background-color: $white
-    width: 90px
-    height: 90px
+    width: 5.625em
+    height: 5.625em
   &:after
     position: absolute
     content: ''
-    bottom: 0.5px
-    right: 7px
-    width: 28px
-    height: 36px
-    border-width: 13px 14px 0 0
+    bottom: 0.03125em
+    right: 0.4375em
+    width: 1.75em
+    height: 2.25em
+    border-width: 0.8125em 0.875em 0 0
     border-color: $black
     border-style: solid
 
 .H
   position: relative
-  top: 12.5px
-  left: 10px
-  width: 60px
-  height: 125px
-  border-width: 0 $w + 1px 0 $w + 1px
+  top: 0.78125em
+  left: 0.625em
+  width: 3.75em
+  height: 7.8125em
+  border-width: 0 $w + 0.0625em 0 $w + 0.0625em
   border-color: $black
   border-style: solid
   &:before
     position: absolute
     content: ''
-    top: 53px
+    top: 3.3125em
     left: 0
-    width: 60px
-    height: 14px
+    width: 3.75em
+    height: 0.875em
     background-color: $black
 
 .I
   z-index: 1
   position: relative
-  top: 12.5px
-  left: 20px
-  width: 16px
-  height: 125px
+  top: 0.78125em
+  left: 1.25em
+  width: 1.0em
+  height: 7.8125em
   background-color: $black
 
 .J
   position: relative
-  top: 12.5px
-  left: -5px
-  width: 75px
-  height: 66px
-  border-right: solid $w + 1px $black
+  top: 0.78125em
+  left: -0.3125em
+  width: 4.6875em
+  height: 4.125em
+  border-right: solid $w + 0.0625em $black
   &:before
     +border-radius(0 0 75% 75%)
     position: absolute
     content: ''
-    bottom: -60px
-    right: -15px
-    width: 50px
-    height: 60px
-    border-width: 0 $w + 1px $w 14px
+    bottom: -3.75em
+    right: -0.9375em
+    width: 3.125em
+    height: 3.75em
+    border-width: 0 $w + 0.0625em $w 0.875em
     border-color: $black
     border-style: solid
   &:after
     +rotate(-40deg)
     position: absolute
     content: ''
-    top: 40px
-    left: -20px
-    width: 60px
-    height: 60px
+    top: 2.5em
+    left: -1.25em
+    width: 3.75em
+    height: 3.75em
     background-color: $white
 
 .K
   position: relative
-  top: 12.5px
-  left: 10px
-  width: 80px
-  height: 125px
-  border-left: solid 16px $black
+  top: 0.78125em
+  left: 0.625em
+  width: 5.0em
+  height: 7.8125em
+  border-left: solid 1.0em $black
   overflow: hidden
   &:before
     +skew(-43deg)
     position: absolute
     content: ''
     top: 0
-    left: 16px
-    width: 19px
-    height: 84px
+    left: 1.0em
+    width: 1.1875em
+    height: 5.25em
     background-color: $black
   &:after
     +skew(30deg)
     position: absolute
     content: ''
     bottom: 0
-    right: 25px
-    width: 18px
-    height: 80px
+    right: 1.5625em
+    width: 1.125em
+    height: 5.0em
     background-color: $black
 
 .L
   position: relative
-  top: 12.5px
-  left: 10px
-  width: 63px
-  height: 110px
-  border-width: 0 0 $w 16px
+  top: 0.78125em
+  left: 0.625em
+  width: 3.9375em
+  height: 6.875em
+  border-width: 0 0 $w 1.0em
   border-color: $black
   border-style: solid
 
 .M
   position: relative
-  top: 12.5px
-  left: 10px
-  width: 80px
-  height: 125px
+  top: 0.78125em
+  left: 0.625em
+  width: 5.0em
+  height: 7.8125em
   border-width: 0 $w 0 $w
   border-color: $black
   border-style: solid
@@ -253,26 +253,26 @@
     position: absolute
     content: ''
     top: 0
-    left: 14px
-    width: 12px
-    height: 110px
+    left: 0.875em
+    width: 0.75em
+    height: 6.875em
     background-color: $black
   &:after
     +skew(-20deg)
     position: absolute
     content: ''
     top: 0
-    right: 14px
-    width: 12px
-    height: 110px
+    right: 0.875em
+    width: 0.75em
+    height: 6.875em
     background-color: $black
 
 .N
   position: relative
-  top: 12.5px
-  left: 10px
-  width: 63px
-  height: 125px
+  top: 0.78125em
+  left: 0.625em
+  width: 3.9375em
+  height: 7.8125em
   border-width: 0 $w 0 $w
   border-color: $black
   border-style: solid
@@ -281,36 +281,36 @@
     position: absolute
     content: ''
     top: 0
-    left: 24px
-    width: 15px
-    height: 125px
+    left: 1.5em
+    width: 0.9375em
+    height: 7.8125em
     background-color: $black
 
 .O
   +border-radius(55% 55%, 52% 52%)
   position: relative
-  top: 12.5px
-  left: 10px
-  width: 70px
-  height: 97px
-  border-width: 14px $w + 1px 14px $w + 1px
+  top: 0.78125em
+  left: 0.625em
+  width: 4.375em
+  height: 6.0625em
+  border-width: 0.875em $w + 0.0625em 0.875em $w + 0.0625em
   border-color: $black
   border-style: solid
 
 .P
   position: relative
-  top: 12.5px
-  left: 10px
-  width: 60px
-  height: 125px
-  border-left: solid 16px $black
+  top: 0.78125em
+  left: 0.625em
+  width: 3.75em
+  height: 7.8125em
+  border-left: solid 1.0em $black
   &:before
     +border-radius(0 220% 220% 0, 0 180% 180% 0)
     position: absolute
     content: ''
-    width: 56px
-    height: 50px
-    border-width: 13px $w 13px 0
+    width: 3.5em
+    height: 3.125em
+    border-width: 0.8125em $w 0.8125em 0
     border-color: $black
     border-style: solid
 
@@ -318,11 +318,11 @@
   +border-radius(55% 55%, 52% 52%)
   z-index: -1
   position: relative
-  top: 12.5px
-  left: 10px
-  width: 70px
-  height: 97px
-  border-width: 14px $w + 1px 14px $w + 1px
+  top: 0.78125em
+  left: 0.625em
+  width: 4.375em
+  height: 6.0625em
+  border-width: 0.875em $w + 0.0625em 0.875em $w + 0.0625em
   border-color: $black
   border-style: solid
   &:before
@@ -330,37 +330,37 @@
     +border-radius(200% 0 0 200%, 100% 0 0 100%)
     position: absolute
     content: ''
-    top: 82px
-    left: 49px
-    width: 16px
-    height: 48px
-    border-width: 16px 0 $w - 2px $w - 2px
+    top: 5.125em
+    left: 3.0625em
+    width: 1.0em
+    height: 3.0em
+    border-width: 1.0em 0 $w - 0.125em $w - 0.125em
     border-color: $black
     border-style: solid
   &:after
     +rotate(-18deg)
     position: absolute
     content: ''
-    bottom: -35px
-    right: -44px
-    width: 30px
-    height: 30px
+    bottom: -2.1875em
+    right: -2.75em
+    width: 1.875em
+    height: 1.875em
     background-color: $white
 
 .R
   position: relative
-  top: 12.5px
-  left: 10px
-  width: 60px
-  height: 125px
-  border-left: solid 16px $black
+  top: 0.78125em
+  left: 0.625em
+  width: 3.75em
+  height: 7.8125em
+  border-left: solid 1.0em $black
   &:before
     +border-radius(0 220% 220% 0, 0 180% 180% 0)
     position: absolute
     content: ''
-    width: 52px
-    height: 44px
-    border-width: 13px $w 13px 0
+    width: 3.25em
+    height: 2.75em
+    border-width: 0.8125em $w 0.8125em 0
     border-color: $black
     border-style: solid
   &:after
@@ -368,26 +368,26 @@
     position: absolute
     content: ''
     bottom: 0
-    left: 38px
-    width: 18px
-    height: 58px
+    left: 2.375em
+    width: 1.125em
+    height: 3.625em
     background-color: $black
 
 .S
   +rotate(14deg)
   position: relative
-  width: 105px
-  height: 150px
-  top: 10px
-  left: 10px
+  width: 6.5625em
+  height: 9.375em
+  top: 0.625em
+  left: 0.625em
   &:before
     +rotate(18deg)
     +border-radius(220% 0 0 150%, 150% 0 0 100%)
     position: absolute
     content: ''
-    width: 44px
-    height: 40px
-    border-width: 14px 0 $w 15.5px
+    width: 2.75em
+    height: 2.5em
+    border-width: 0.875em 0 $w 0.96875em
     border-color: $black
     border-style: solid
   &:after
@@ -395,87 +395,87 @@
     +border-radius(240% 0 0 110%, 140% 0 0 100%)
     position: absolute
     content: ''
-    top: 65px
-    left: 21px
-    width: 52px
-    height: 44px
-    border-width: 14px 0 $w $w
+    top: 4.0625em
+    left: 1.3125em
+    width: 3.25em
+    height: 2.75em
+    border-width: 0.875em 0 $w $w
     border-color: $black
     border-style: solid
 
 .T
   position: relative
-  top: 12.5px
-  left: 10px
-  width: 100px
-  height: 125px
+  top: 0.78125em
+  left: 0.625em
+  width: 6.25em
+  height: 7.8125em
   border-top: solid $w $black
   &:before
     position: absolute
     content: ''
     top: 0
-    left: 42px
-    width: 16px
-    height: 110px
+    left: 2.625em
+    width: 1.0em
+    height: 6.875em
     background-color: $black
 
 .U
   position: relative
-  top: 12.5px
-  left: 10px
-  width: 60px
-  height: 80px
-  border-width: 0 $w + 1px 0 $w + 1px
+  top: 0.78125em
+  left: 0.625em
+  width: 3.75em
+  height: 5.0em
+  border-width: 0 $w + 0.0625em 0 $w + 0.0625em
   border-color: $black
   border-style: solid
   &:before
     +border-radius(0 0 200% 200%, 0 0 300% 300%)
     position: absolute
     content: ''
-    top: 65px
-    left: -16px
-    width: 60px
-    height: 45px
-    border-width: 0 $w + 1px $w $w + 1px
+    top: 4.0625em
+    left: -1.0em
+    width: 3.75em
+    height: 2.8125em
+    border-width: 0 $w + 0.0625em $w $w + 0.0625em
     border-color: $black
     border-style: solid
 
 .V
   position: relative
-  top: 12.5px
-  left: 30px
-  width: 59px
+  top: 0.78125em
+  left: 1.875em
+  width: 3.6875em
   &:before
     +skew(18deg)
     position: absolute
     content: ''
     top: 0
     left: 0
-    height: 125px
-    border-left: solid 16px $black
+    height: 7.8125em
+    border-left: solid 1.0em $black
   &:after
     +skew(-18deg)
     position: absolute
     content: ''
     top: 0
     right: 0
-    height: 125px
-    border-left: solid 16px $black
+    height: 7.8125em
+    border-left: solid 1.0em $black
 
 .W
   position: relative
-  top: 12.5px
-  left: 25px
-  width: 100px
+  top: 0.78125em
+  left: 1.5625em
+  width: 6.25em
   &:before
     +skew(11deg)
     position: absolute
     content: ''
     top: 0
     left: 0
-    width: 42px
-    height: 125px
-    border-width: 0 13px 0 $w
+    width: 2.625em
+    height: 7.8125em
+    border-width: 0 0.8125em 0 $w
     border-color: $black
     border-style: solid
   &:after
@@ -484,26 +484,26 @@
     content: ''
     top: 0
     right: 0
-    width: 42px
-    height: 125px
-    border-width: 0 $w 0 13px
+    width: 2.625em
+    height: 7.8125em
+    border-width: 0 $w 0 0.8125em
     border-color: $black
     border-style: solid
 
 .X
   position: relative
-  top: 12.5px
-  left: 50px
-  width: 16px
-  height: 125px
+  top: 0.78125em
+  left: 3.125em
+  width: 1.0em
+  height: 7.8125em
   &:before
     +skew(32deg)
     position: absolute
     content: ''
     top: 0
     left: 0
-    width: 16px
-    height: 125px
+    width: 1.0em
+    height: 7.8125em
     background-color: $black
   &:after
     +skew(-32deg)
@@ -511,42 +511,42 @@
     content: ''
     top: 0
     right: 0
-    width: 16px
-    height: 125px
+    width: 1.0em
+    height: 7.8125em
     background-color: $black
 
 .Y
   position: relative
-  top: 92.5px
-  left: 52px
-  width: 16px
-  height: 50px
+  top: 5.78125em
+  left: 3.25em
+  width: 1.0em
+  height: 3.125em
   background-color: $black
   &:before
     +skew(28deg)
     position: absolute
     content: ''
-    top: -80px
-    left: -21px
-    width: 16px
-    height: 80px
+    top: -5.0em
+    left: -1.3125em
+    width: 1.0em
+    height: 5.0em
     background-color: $black
   &:after
     +skew(-28deg)
     position: absolute
     content: ''
-    top: -80px
-    right: -21px
-    width: 16px
-    height: 80px
+    top: -5.0em
+    right: -1.3125em
+    width: 1.0em
+    height: 5.0em
     background-color: $black
 
 .Z
   position: relative
-  top: 12.5px
-  left: 10px
-  width: 90px
-  height: 95px
+  top: 0.78125em
+  left: 0.625em
+  width: 5.625em
+  height: 5.9375em
   border-width: $w 0 $w 0
   border-color: $black
   border-style: solid
@@ -555,7 +555,7 @@
     position: absolute
     content: ''
     top: 0
-    left: 36px
-    width: 18px
-    height: 95px
+    left: 2.25em
+    width: 1.125em
+    height: 5.9375em
     background-color: $black
diff --git a/src/scss/_config.scss b/src/scss/_config.scss
index a42163d..108e915 100644
--- a/src/scss/_config.scss
+++ b/src/scss/_config.scss
@@ -1,5 +1,5 @@
 //Variables
-$w: 15px;
+$w: 0.9375em;
 $black: #231815;
 $white: #fff;
 
diff --git a/src/scss/_css-sans.scss b/src/scss/_css-sans.scss
index daa8f09..ad2ddbc 100644
--- a/src/scss/_css-sans.scss
+++ b/src/scss/_css-sans.scss
@@ -3,43 +3,43 @@
 .A {
 	@include transition(all linear 200ms);
  	position: relative;
-  	left: 30px;
-  	width: 60px;
-  	height: 91px;
-  	border-bottom: solid 14px $w;
+  	left: 1.875em;
+  	width: 3.75em;
+  	height: 5.6875em;
+  	border-bottom: solid 0.875em $w;
 
   	&:after, &:before{
 		@include skew(-19deg, 0);
 		position: absolute;
   		content: '';
-  		top: 12.5px;
+  		top: 0.78125em;
   		left: 0;
-  		width: 16px;
-		height: 125px;
+  		width: 1.0em;
+		height: 7.8125em;
   		background-color: $black;
   	}
 
   	&:after{
 		@include skew(19deg, 0);
-		left: 45px;
+		left: 2.8125em;
   	}
 }
 .B {
   position: relative;
-  top: 12.5px;
-  left: 10px;
-  width: 60px;
-  height: 125px;
-  border-left: solid 16px $black;
+  top: 0.78125em;
+  left: 0.625em;
+  width: 3.75em;
+  height: 7.8125em;
+  border-left: solid 1.0em $black;
 
   &:before, &:after {
   		@include border-radius(0 240% 180% 0, 0 180% 180% 0);
 		position: absolute;
 		content: '';
-		width: 52px;
-		height: 39px;
+		width: 3.25em;
+		height: 2.4375em;
 
-		border-width: $w $w 10px 0;
+		border-width: $w $w 0.625em 0;
 		border-color: $black;
 		border-style: solid;
 	}
@@ -47,19 +47,19 @@
   	&:after {
 		@include border-radius(0 180% 220% 0, 0 180% 180% 0);
 	    bottom: 0;
-	    width: 58px;
-	    height: 43px;
-	    border-width: 10px $w $w 0;
+	    width: 3.625em;
+	    height: 2.6875em;
+	    border-width: 0.625em $w $w 0;
   	}
 }
 .C {
 	@include border-radius(50%);
   	position: relative;
-  	top: 12.5px;
-  	left: 10px;
-  	width: 84px;
-  	height: 95px;
-  	border-width: $w 12px $w 16px;
+  	top: 0.78125em;
+  	left: 0.625em;
+  	width: 5.25em;
+  	height: 5.9375em;
+  	border-width: $w 0.75em $w 1.0em;
   	border-color: $black;
   	border-style: solid;
 
@@ -67,19 +67,19 @@
 	  	@include rotate(45deg);
 	    position: absolute;
 	    content: '';
-	    top: 2px;
-	    left: 49px;
+	    top: 0.125em;
+	    left: 3.0625em;
 	    background-color: $white;
-	    width: 90px;
-	    height: 90px;
+	    width: 5.625em;
+	    height: 5.625em;
   	}
 }
 .D {
 	position: relative;
-	top: 12.5px;
-	left: 10px;
+	top: 0.78125em;
+	left: 0.625em;
 	border-left: solid $w $black;
-	height: 125px;
+	height: 7.8125em;
 
 	&:before {
 		@include border-radius(0 300% 300% 0, 0 180% 180% 0);
@@ -87,8 +87,8 @@
 		content: '';
 		top: 0;
 		left: 0;
-		width: 60px;
-		height: 95px;
+		width: 3.75em;
+		height: 5.9375em;
 		border-width: $w $w $w 0;
 		border-color: $black;
 		border-style: solid;
@@ -96,52 +96,52 @@
 }
 .E{
 	position: relative;
-	top: 12.5px;
-	left: 10px;
-	width: 63px;
-	height: 95px;
-	border-width: $w 0 $w 16px;
+	top: 0.78125em;
+	left: 0.625em;
+	width: 3.9375em;
+	height: 5.9375em;
+	border-width: $w 0 $w 1.0em;
 	border-color: $black;
 	border-style: solid;
 
 	&:before {
 		position: absolute;
 		content: '';
-		top: 38px;
-		left: 0px;
-		width: 53px;
-		height: 15px;
+		top: 2.375em;
+		left: 0.0em;
+		width: 3.3125em;
+		height: 0.9375em;
 		background-color: $black;
 	}
 }
 .F {
 	position: relative;
-	top: 12.5px;
-	left: 10px;
-	width: 63px;
-	height: 110px;
-	border-width: $w 0 0 16px;
+	top: 0.78125em;
+	left: 0.625em;
+	width: 3.9375em;
+	height: 6.875em;
+	border-width: $w 0 0 1.0em;
 	border-color: $black;
 	border-style: solid;
 
 	&:before {
 		position: absolute;
 		content: '';
-		top: 38px;
-		left: 0px;
-		width: 53px;
-		height: 15px;
+		top: 2.375em;
+		left: 0.0em;
+		width: 3.3125em;
+		height: 0.9375em;
 		background-color: $black;
   	}
 }
 .G {
 	@include border-radius(50%);
 	position: relative;
-	top: 12.5px;
-	left: 10px;
-	width: 84px;
-	height: 95px;
-	border-width: $w 12px $w 16px;
+	top: 0.78125em;
+	left: 0.625em;
+	width: 5.25em;
+	height: 5.9375em;
+	border-width: $w 0.75em $w 1.0em;
 	border-color: $black;
 	border-style: solid;
 
@@ -149,71 +149,71 @@
 		@include rotate(45deg);
 		position: absolute;
 		content: '';
-		top: 2px;
-		left: 48px;
+		top: 0.125em;
+		left: 3.0em;
 		background-color: $white;
-		width: 90px;
-		height: 90px;
+		width: 5.625em;
+		height: 5.625em;
 	}
 
 	&:after {
 		position: absolute;
 		content: '';
-		bottom: 0.5px;
-		right: 7px;
-		width: 28px;
-		height: 36px;
-		border-width: 13px 14px 0 0;
+		bottom: 0.03125em;
+		right: 0.4375em;
+		width: 1.75em;
+		height: 2.25em;
+		border-width: 0.8125em 0.875em 0 0;
 		border-color: $black;
 		border-style: solid;
 	}
 }
 .H {
   	position: relative;
-	  	top: 12.5px;
-	  	left: 10px;
-	  	width: 60px;
-	  	height: 125px;
-	  	border-width: 0 $w + 1px 0 $w + 1px;
+	  	top: 0.78125em;
+	  	left: 0.625em;
+	  	width: 3.75em;
+	  	height: 7.8125em;
+	  	border-width: 0 $w + 0.0625em 0 $w + 0.0625em;
 	  	border-color: $black;
 	  	border-style: solid;
 
   	&:before {
   	  position: absolute;
   	  content: '';
-  	  top: 53px;
+  	  top: 3.3125em;
   	  left: 0;
-  	  width: 60px;
-  	  height: 14px;
+  	  width: 3.75em;
+  	  height: 0.875em;
   	  background-color: $black;
   	}
 }
 .I {
   	z-index: 1;
   	position: relative;
-  	top: 12.5px;
-  	left: 20px;
-  	width: 16px;
-  	height: 125px;
+  	top: 0.78125em;
+  	left: 1.25em;
+  	width: 1.0em;
+  	height: 7.8125em;
   	background-color: $black;
 }
 .J {
   	position: relative;
-  	top: 12.5px;
-  	left: -5px;
-  	width: 75px;
-  	height: 66px;
-  	border-right: solid $w + 1px $black;
+  	top: 0.78125em;
+  	left: -0.3125em;
+  	width: 4.6875em;
+  	height: 4.125em;
+  	border-right: solid $w + 0.0625em $black;
 
   	&:before {
 		@include border-radius(0 0 75% 75%);
 		position: absolute;
 		content: '';
-		bottom: -60px;
-		right: -15px;
-		width: 50px;
-		height: 60px;
-		border-width: 0 $w + 1px $w 14px;
+		bottom: -3.75em;
+		right: -0.9375em;
+		width: 3.125em;
+		height: 3.75em;
+		border-width: 0 $w + 0.0625em $w 0.875em;
 		border-color: $black;
 		border-style: solid;
 	}
@@ -221,20 +221,20 @@
 		@include rotate(-40deg);
 		position: absolute;
 		content: '';
-		top: 40px;
-		left: -20px;
-		width: 60px;
-		height: 60px;
+		top: 2.5em;
+		left: -1.25em;
+		width: 3.75em;
+		height: 3.75em;
 		background-color:$white;
 	}
 }
 .K {
 	position: relative;
-	top: 12.5px;
-	left: 10px;
-	width: 80px;
-	height: 125px;
-	border-left: solid 16px $black;
+	top: 0.78125em;
+	left: 0.625em;
+	width: 5.0em;
+	height: 7.8125em;
+	border-left: solid 1.0em $black;
 	overflow: hidden;
 
 	&:before {
@@ -242,9 +242,9 @@
 		position: absolute;
 		content: '';
 		top: 0;
-		left: 16px;
-		width: 19px;
-		height: 84px;
+		left: 1.0em;
+		width: 1.1875em;
+		height: 5.25em;
 		background-color: $black;
 	}
 
@@ -253,28 +253,28 @@
 		position: absolute;
 		content: '';
 		bottom: 0;
-		right: 25px;
-		width: 18px;
-		height: 80px;
+		right: 1.5625em;
+		width: 1.125em;
+		height: 5.0em;
 		background-color: $black;
 	}
 }
 .L {
   position: relative;
-  top: 12.5px;
-  left: 10px;
-  width: 63px;
-  height: 110px;
-  border-width: 0 0 $w 16px;
+  top: 0.78125em;
+  left: 0.625em;
+  width: 3.9375em;
+  height: 6.875em;
+  border-width: 0 0 $w 1.0em;
   border-color: $black;
   border-style: solid;
 }
 .M {
 	position: relative;
-	top: 12.5px;
-	left: 10px;
-	width: 80px;
-	height: 125px;
+	top: 0.78125em;
+	left: 0.625em;
+	width: 5.0em;
+	height: 7.8125em;
 	border-width: 0 $w 0 $w;
 	border-color: $black;
 	border-style: solid;
@@ -284,9 +284,9 @@
 		position: absolute;
 		content: '';
 		top: 0;
-		left: 14px;
-		width: 12px;
-		height: 110px;
+		left: 0.875em;
+		width: 0.75em;
+		height: 6.875em;
 		background-color: $black;
 	}
   	&:after {
@@ -294,18 +294,18 @@
 		position: absolute;
 		content: '';
 		top: 0;
-		right: 14px;
-		width: 12px;
-		height: 110px;
+		right: 0.875em;
+		width: 0.75em;
+		height: 6.875em;
 		background-color: $black;
 	}
 }
 .N {
 	position: relative;
-	top: 12.5px;
-	left: 10px;
-	width: 63px;
-	height: 125px;
+	top: 0.78125em;
+	left: 0.625em;
+	width: 3.9375em;
+	height: 7.8125em;
 	border-width: 0 $w 0 $w;
 	border-color: $black;
 	border-style: solid;
@@ -315,38 +315,38 @@
 		position: absolute;
 		content: '';
 		top: 0;
-		left: 24px;
-		width: 15px;
-		height: 125px;
+		left: 1.5em;
+		width: 0.9375em;
+		height: 7.8125em;
 		background-color: $black;
 	}
 }
 .O {
 	@include border-radius(55% 55%, 52% 52%);
 	position: relative;
-	top: 12.5px;
-	left: 10px;
-	width: 70px;
-	height: 97px;
-	border-width: 14px $w + 1px 14px $w + 1px;
+	top: 0.78125em;
+	left: 0.625em;
+	width: 4.375em;
+	height: 6.0625em;
+	border-width: 0.875em $w + 0.0625em 0.875em $w + 0.0625em;
 	border-color: $black;
 	border-style: solid;
 }
 .P {
 	position: relative;
-	top: 12.5px;
-	left: 10px;
-	width: 60px;
-	height: 125px;
-	border-left: solid 16px $black;
+	top: 0.78125em;
+	left: 0.625em;
+	width: 3.75em;
+	height: 7.8125em;
+	border-left: solid 1.0em $black;
 
 	&:before {
 		@include border-radius(0 220% 220% 0, 0 180% 180% 0);
 		position: absolute;
 		content: '';
-		width: 56px;
-		height: 50px;
-		border-width: 13px $w 13px 0;
+		width: 3.5em;
+		height: 3.125em;
+		border-width: 0.8125em $w 0.8125em 0;
 		border-color: $black;
 		border-style: solid;
 	}
@@ -355,11 +355,11 @@
 	@include border-radius(55% 55%, 52% 52%);
 	z-index: -1;
 	position: relative;
-	top: 12.5px;
-	left: 10px;
-	width: 70px;
-	height: 97px;
-	border-width: 14px $w + 1px 14px $w + 1px;
+	top: 0.78125em;
+	left: 0.625em;
+	width: 4.375em;
+	height: 6.0625em;
+	border-width: 0.875em $w + 0.0625em 0.875em $w + 0.0625em;
 	border-color: $black;
 	border-style: solid;
 
@@ -368,11 +368,11 @@
 		@include border-radius(200% 0 0 200%, 100% 0 0 100%);
 		position: absolute;
 		content: '';
-		top: 82px;
-		left: 49px;
-		width: 16px;
-		height: 48px;
-		border-width: 16px 0  $w - 2px $w - 2px;
+		top: 5.125em;
+		left: 3.0625em;
+		width: 1.0em;
+		height: 3.0em;
+		border-width: 1.0em 0  $w - 0.125em $w - 0.125em;
 		border-color: $black;
 		border-style: solid;
 	}
@@ -380,28 +380,28 @@
   		@include rotate(-18deg);
 		position: absolute;
 		content: '';
-		bottom: -35px;
-		right: -44px;
-		width: 30px;
-		height: 30px;
+		bottom: -2.1875em;
+		right: -2.75em;
+		width: 1.875em;
+		height: 1.875em;
 		background-color: $white;
 	}
 }
 .R {
 	position: relative;
-	top: 12.5px;
-	left: 10px;
-	width: 60px;
-	height: 125px;
-	border-left: solid 16px $black;
+	top: 0.78125em;
+	left: 0.625em;
+	width: 3.75em;
+	height: 7.8125em;
+	border-left: solid 1.0em $black;
 
 	&:before {
 		@include border-radius(0 220% 220% 0, 0 180% 180% 0);
 		position: absolute;
 		content: '';
-		width: 52px;
-		height: 44px;
-		border-width: 13px $w 13px 0;
+		width: 3.25em;
+		height: 2.75em;
+		border-width: 0.8125em $w 0.8125em 0;
 		border-color: $black;
 		border-style: solid;
 	}
@@ -410,28 +410,28 @@
 		position: absolute;
 		content: '';
 		bottom: 0;
-		left: 38px;
-		width: 18px;
-		height: 58px;
+		left: 2.375em;
+		width: 1.125em;
+		height: 3.625em;
 		background-color: $black;
 	}
 }
 .S {
 	@include rotate(14deg);
 	position: relative;
-	width: 105px;
-	height: 150px;
-	top: 10px;
-	left: 10px;
+	width: 6.5625em;
+	height: 9.375em;
+	top: 0.625em;
+	left: 0.625em;
 
 	&:before {
   		@include rotate(18deg);
     	@include border-radius(220% 0 0 150%, 150% 0 0 100%);
     	position: absolute;
     	content: '';
-    	width: 44px;
-    	height: 40px;
-    	border-width: 14px 0 $w 15.5px;
+    	width: 2.75em;
+    	height: 2.5em;
+    	border-width: 0.875em 0 $w 0.96875em;
     	border-color: $black;
     	border-style: solid;
   	}
@@ -440,40 +440,40 @@
 		@include border-radius(240% 0 0 110%, 140% 0 0 100%);
 		position: absolute;
 		content: '';
-		top: 65px;
-		left: 21px;
-		width: 52px;
-		height: 44px;
-		border-width: 14px 0 $w $w;
+		top: 4.0625em;
+		left: 1.3125em;
+		width: 3.25em;
+		height: 2.75em;
+		border-width: 0.875em 0 $w $w;
 		border-color: $black;
 		border-style: solid;
 	}
 }
 .T {
 	position: relative;
-	top: 12.5px;
-	left: 10px;
-	width: 100px;
-	height: 125px;
+	top: 0.78125em;
+	left: 0.625em;
+	width: 6.25em;
+	height: 7.8125em;
 	border-top: solid $w $black;
 
 	&:before {
 		position: absolute;
 		content: '';
 		top: 0;
-		left: 42px;
-		width: 16px;
-		height: 110px;
+		left: 2.625em;
+		width: 1.0em;
+		height: 6.875em;
 		background-color: $black;
 	}
 }
 .U {
 	position: relative;
-	top: 12.5px;
-	left: 10px;
-	width: 60px;
-	height: 80px;
-	border-width: 0 $w + 1px 0 $w + 1px;
+	top: 0.78125em;
+	left: 0.625em;
+	width: 3.75em;
+	height: 5.0em;
+	border-width: 0 $w + 0.0625em 0 $w + 0.0625em;
 	border-color: $black;
 	border-style: solid;
 
@@ -481,20 +481,20 @@
 		@include border-radius(0 0 200% 200%, 0 0 300% 300%);
 		position: absolute;
 		content: '';
-		top: 65px;
-		left: -16px;
-		width: 60px;
-		height: 45px;
-		border-width: 0 $w + 1px $w $w + 1px;
+		top: 4.0625em;
+		left: -1.0em;
+		width: 3.75em;
+		height: 2.8125em;
+		border-width: 0 $w + 0.0625em $w $w + 0.0625em;
 		border-color: $black;
 		border-style: solid;
 	}
 }
 .V {
   	position: relative;
-	top: 12.5px;
-	left: 30px;
-	width: 59px;
+	top: 0.78125em;
+	left: 1.875em;
+	width: 3.6875em;
 
 	&:before {
 		@include skew(18deg);
@@ -502,8 +502,8 @@
 		content: '';
 		top: 0;
 		left: 0;
-		height: 125px;
-		border-left: solid 16px $black;
+		height: 7.8125em;
+		border-left: solid 1.0em $black;
 	}
 
   	&:after {
@@ -512,15 +512,15 @@
 		content: '';
 		top: 0;
 		right: 0;
-		height: 125px;
-		border-left: solid 16px $black;
+		height: 7.8125em;
+		border-left: solid 1.0em $black;
   	}
 }
 .W {
 	position: relative;
-	top: 12.5px;
-	left: 25px;
-	width: 100px;
+	top: 0.78125em;
+	left: 1.5625em;
+	width: 6.25em;
 
 	&:before {
 		@include skew(11deg);
@@ -528,9 +528,9 @@
 		content: '';
 		top: 0;
 		left: 0;
-		width: 42px;
-		height: 125px;
-		border-width: 0 13px 0 $w;
+		width: 2.625em;
+		height: 7.8125em;
+		border-width: 0 0.8125em 0 $w;
 		border-color: $black;
 		border-style: solid;
 	}
@@ -541,19 +541,19 @@
 		content: '';
 		top: 0;
 		right: 0;
-		width: 42px;
-		height: 125px;
-		border-width: 0 $w 0 13px;
+		width: 2.625em;
+		height: 7.8125em;
+		border-width: 0 $w 0 0.8125em;
 		border-color: $black;
 		border-style: solid;
 	}
 }
 .X {
   position: relative;
-  top: 12.5px;
-  left: 50px;
-  width: 16px;
-  height: 125px;
+  top: 0.78125em;
+  left: 3.125em;
+  width: 1.0em;
+  height: 7.8125em;
 
   &:before {
   	@include skew(32deg);
@@ -561,8 +561,8 @@
     content: '';
     top: 0;
     left: 0;
-    width: 16px;
-    height: 125px;
+    width: 1.0em;
+    height: 7.8125em;
     background-color: $black;
   }
 
@@ -572,46 +572,46 @@
     content: '';
     top: 0;
     right: 0;
-    width: 16px;
-    height: 125px;
+    width: 1.0em;
+    height: 7.8125em;
     background-color: $black;
   }
 }
 .Y {
 	position: relative;
-	top: 92.5px;
-	left: 52px;
-	width: 16px;
-	height: 50px;
+	top: 5.78125em;
+	left: 3.25em;
+	width: 1.0em;
+	height: 3.125em;
 	background-color: $black;
 
 	&:before {
 		@include skew(28deg);
 		position: absolute;
 		content: '';
-		top: -80px;
-		left: -21px;
-		width: 16px;
-		height: 80px;
+		top: -5.0em;
+		left: -1.3125em;
+		width: 1.0em;
+		height: 5.0em;
 		background-color: $black;
 	}
 	&:after {
 		@include skew(-28deg);
 		position: absolute;
 		content: '';
-		top: -80px;
-		right: -21px;
-		width: 16px;
-		height: 80px;
+		top: -5.0em;
+		right: -1.3125em;
+		width: 1.0em;
+		height: 5.0em;
 		background-color: $black;
 	}
 }
 .Z {
   position: relative;
-  top: 12.5px;
-  left: 10px;
-  width: 90px;
-  height: 95px;
+  top: 0.78125em;
+  left: 0.625em;
+  width: 5.625em;
+  height: 5.9375em;
   border-width: $w 0 $w 0;
   border-color: $black;
   border-style: solid;
@@ -621,9 +621,9 @@
     position: absolute;
     content: '';
     top: 0;
-    left: 36px;
-    width: 18px;
-    height: 95px;
+    left: 2.25em;
+    width: 1.125em;
+    height: 5.9375em;
     background-color: $black;
   }
 }