CSS rem refactor

app/styles/basics.scss

@@ -8,7 +8,7 @@
 html {
   @include font-roboto;
   @include font-weight(normal);
-  font-size: 62.5%;
+  font-size: 16px;
   text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;

app/styles/fonts.scss

@@ -135,13 +135,13 @@
 // html and body declaration allows developer to pass px value as argument
 // Rendered css will default to "rem" and fall back to "px" for unsupported browsers
 @mixin font-size($size) {
-  $rem: ($size / 10);
+  $rem: ($size / 16);
   $px: $size;
   font-size: #{$px + "px"};
   font-size: #{$rem + "rem"};
 }
 @mixin line-height($size) {
-  $rem: ($size / 10);
+  $rem: ($size / 16);
   $px: $size;
   line-height: #{$px + "px"};
   line-height: #{$rem + "rem"};

app/styles/footer.scss

@@ -35,7 +35,7 @@
       font-weight: 700;
       margin-bottom: 8px;
       color: var(--primary-text-color--faint);
-      font-size: 1.6rem;
+      font-size: 1rem;
       line-height: 1.5;
 
       a {
@@ -48,7 +48,7 @@
       margin-right: auto;
 
       span {
-        font-size: 1.3rem;
+        font-size: 0.8125rem;
         font-weight: 500;
         line-height: 1.5;
       }
@@ -63,7 +63,7 @@
         a {
           text-decoration: none;
           color: #fff;
-          font-size: 1.3rem;
+          font-size: 0.8125rem;
           font-weight: 500;
           line-height: 1.5;
           padding: 10px 4px;

app/styles/ui.scss

@@ -712,7 +712,7 @@
     transform: translate(-50%, -50%);
     background: var(--brand-color--med);
     border-radius: 50%;
-    padding: 0.35rem;
+    padding: 0.21875rem;
   }
 }