diff --git a/src/lessc/page/custom-iphone.less b/src/lessc/page/custom-iphone.less
index f933d4d..d915be1 100644
--- a/src/lessc/page/custom-iphone.less
+++ b/src/lessc/page/custom-iphone.less
@@ -32,7 +32,7 @@
 
   .label {
     color: white;
-    font-size: small;
+    font-size: 0.8rem;
     position: absolute;
     top: 25%;
     left: 50%;
@@ -41,7 +41,7 @@
 
   .time {
     color: white;
-    font-size: xxx-large;
+    font-size: 3rem;
     position: absolute;
     top: 18%;
     left: 50%;
diff --git a/src/lessc/page/font.less b/src/lessc/page/font.less
index cd7e57c..4a8e174 100644
--- a/src/lessc/page/font.less
+++ b/src/lessc/page/font.less
@@ -7,8 +7,8 @@
 
 @font-publishing-date: @font-code;
 
-@font-height: 1.7em;
-@font-code-height: 1.1em;
+@font-size: 1rem;
+@font-size-code: 1rem;
 
 @font-sidebar: ~"'Abel', sans-serif";
 
diff --git a/src/lessc/page/main-hack-code.less b/src/lessc/page/main-hack-code.less
index 43430be..ed926ba 100644
--- a/src/lessc/page/main-hack-code.less
+++ b/src/lessc/page/main-hack-code.less
@@ -37,12 +37,12 @@
 
    font-weight: normal;
    font-family: @font-code;
-   line-height: @font-code-height;
+   line-height: @font-size-code;
 
    code {
      font-weight: normal;
      font-family: @font-code;
-     line-height: @font-code-height;
+     line-height: @font-size-code;
    }
  }
 
diff --git a/src/lessc/page/main-hack.less b/src/lessc/page/main-hack.less
index c91e488..5e76cc2 100644
--- a/src/lessc/page/main-hack.less
+++ b/src/lessc/page/main-hack.less
@@ -4,7 +4,7 @@
 @import "main-hack-code.less";
 @import "main-hack-flex.less";
 
-@standard-margin: 20px;
+@standard-margin: 1rem;
 
 // block size
 blockquote, h1, h2, h3, h4, h5, h6, p, pre {
@@ -14,7 +14,11 @@ blockquote, h1, h2, h3, h4, h5, h6, p, pre {
 
 // Header
 h1, h2, h3, h4, h5, h6 {
-  // underscore
+  //display: block;
+  //margin-bottom: 2rem;
+  //margin-top: 2rem;
+
+  // underscore (not working)
   display: inline-block;
   padding-right: 2px; // overlap of the underscore
   padding-left: 0px; // overlap of the underscore
@@ -113,18 +117,21 @@ a:hover {
   .card-header {
     text-align: center;
     border-bottom: 1px solid @color-card-border;
-    margin-top: 7px;
-    margin-bottom: 7px;
+    margin-top: @standard-margin;
+    //margin-bottom: @standard-margin;
+    padding-bottom: @standard-margin;
     padding-left: 4px;
     padding-right: 4px;
   }
 
   .card-body{
     text-align: center;
-    margin-top: 4px;
-    margin-bottom: 4px;
+    //margin-top: 4px;
+    //margin-bottom: 4px;
     padding-left: 4px;
     padding-right: 4px;
+    padding-top: @standard-margin;
+    padding-bottom: @standard-margin;
   }
 }
 
diff --git a/src/lessc/page/main.less b/src/lessc/page/main.less
index 3384828..cfdd6c7 100644
--- a/src/lessc/page/main.less
+++ b/src/lessc/page/main.less
@@ -12,13 +12,14 @@
 
 @import "custom-iphone.less";
 
-// left and right for notes and warning and and code blocks
-@special-info-padding-side: 0.5em;
 
-body {
-  background-color: @color-body-background;
+html {
   font-family: @font-normal;
+  font-size: @font-size;
+  background-color: @color-body-background;
   color: @color-body-font;
+}
+body {
   margin: 0px;
 
   header{
@@ -40,7 +41,7 @@ body {
 
 h1,h2,h3,h4 {
   font-family: @font-header;
-  font-size: 1.1rem;
+  font-size: 1.5rem;
 }
 
 .publishing_date {
@@ -49,6 +50,9 @@ h1,h2,h3,h4 {
   color: @color-publishing-date;
 }
 
+// left and right for notes and warning and and code blocks
+@special-info-padding-side: 0.5em;
+
 .note {
   background: @color-note-background;
   border-left: .4em solid @color-note-border;
@@ -60,9 +64,8 @@ h1,h2,h3,h4 {
 
   p {
     margin-left: @special-info-padding-side;
-
-    padding-top: .0em;
-    padding-bottom: 0.0em;
+    padding-top: 0px;
+    padding-bottom: 0px;
   }
 
   pre {