fix(scss): fix styles, some hardcodes with 'important'

Author: leomp12

scss/_variables.scss

@@ -1,4 +1,5 @@
 $dark: #212529;
+$white: #ffffff;
 $light: #f8f9fa;
 $gray: #ebebeb;
 $primary: #007bff;

scss/styles.scss

@@ -5,40 +5,41 @@ body {
   padding: 20px;
   margin: 0;
   background: $gray;
+  color: $dark;
 }
 
-body,
-p,
-div {
-  font-family: -apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,NotoSans,sans-serif;
+body, p, div {
+  font-family: -apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,NotoSans,sans-serif !important;
   font-size: 14px;
 }
 
-body {
-  color: $dark;
+h1, h2, h3, h4, h5, h6, span, p {
+  margin: 0;
+  padding: 0;
+  color: $dark !important;
 }
 
 body a {
-  color: $primary;
-  text-decoration: none;
+  color: $primary !important;
+  text-decoration: none !important;
 }
 
-.btn {
-  background: $theme-color;
-  color: color-yiq($theme-color);
-  border: none;
-  border-radius: 3px;
-  display: inline-block;
-  font-size: 16px;
-  line-height: 16px;
-  padding: 12px 70px 12px 70px;
-  text-align: center;
-  text-decoration: none;
+.main {
+  background: $white !important;
+  padding-top: 20px !important;
 }
 
-p {
-  margin: 0;
-  padding: 0;
+.btn {
+  background: $theme-color !important;
+  color: color-yiq($theme-color) !important;
+  border: none !important;
+  border-radius: 3px !important;
+  display: inline-block !important;
+  font-size: 16px !important;
+  line-height: 16px !important;
+  padding: 12px 70px 12px 70px !important;
+  text-align: center !important;
+  text-decoration: none !important;
 }
 
 table.wrapper {
@@ -115,8 +116,4 @@ img.max-width {
     margin-left: 0 !important;
     margin-right: 0 !important;
   }
-
-  .total_spacer {
-    padding:0px 0px 0px 0px;
-  }
 }