diff --git a/_sass/_vars.scss b/_sass/_vars.scss
new file mode 100644
index 0000000..fa98dfb
--- /dev/null
+++ b/_sass/_vars.scss
@@ -0,0 +1,5 @@
+$font_stack: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
+$title_font_stack: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", "sans serif", HelveticaNeue-CondensedBlack;
+
+$horizontal_breakpoint: 700px;
+$vertical_breakpoint: 500px;
\ No newline at end of file
diff --git a/_sass/header.scss b/_sass/header.scss
index 915dabd..a30e1cb 100644
--- a/_sass/header.scss
+++ b/_sass/header.scss
@@ -1,3 +1,4 @@
+@import "vars";
 
 // The header with info about me
 // gets displayed on the left in a wide layout and on the top in a narrow layout
@@ -5,7 +6,7 @@ header {
     border-right: 2px solid #eee; //make a nice dividing line
     position: fixed;
     width: 240px;
-    height: 100vw;
+    height: 100vh;
     padding-right: 30px;
     padding-left: 30px;
     
@@ -41,7 +42,7 @@ header h1 {
 }
 
 header h1, header h2 {
-    font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", "sans serif", HelveticaNeue-CondensedBlack;
+    font-family: $title_font_stack;
 }
 
 header img.icon {
@@ -63,7 +64,10 @@ header p.professional-links a {
     justify-content: space-between;
 }
 
-@media only screen and (max-width: 700px) {
+@media 
+    only screen and (max-width: $horizontal_breakpoint),
+    only screen and (max-height: $vertical_breakpoint)
+    {  
     header {
       position: relative;
       width: 100%;
diff --git a/_sass/main.scss b/_sass/main.scss
index 88ff465..789aff9 100644
--- a/_sass/main.scss
+++ b/_sass/main.scss
@@ -1,3 +1,5 @@
+@import "vars";
+
 @import "nav";
 @import "header";
 @import "article";
@@ -5,7 +7,7 @@
 
 * {
     box-sizing: border-box;
-    font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
+    font-family: $font_stack;
     text-rendering: geometricPrecision;
 }
 
@@ -36,10 +38,10 @@ main {
     display: flex;
     flex-direction: column;
     justify-content: center;
-}
 
-main h1 {
-    font-size: 2em;
+    h1 {
+        font-size: 2em;
+    }
 }
 
 a {
@@ -55,13 +57,17 @@ img {
     width: 100%;
 }
 
-@media only screen and (max-width: 700px) {  
-    main {
-      padding-top: 10px; 
-      padding-left: 20px;
-      padding-right: 20px;
-      margin: 0px;
-    }
-  
-    article {
-      margin-left: 0px; } }
\ No newline at end of file
+@media 
+    only screen and (max-width: $horizontal_breakpoint),
+    only screen and (max-height: $vertical_breakpoint)
+    {  
+        main {
+        padding-top: 10px; 
+        padding-left: 20px;
+        padding-right: 20px;
+        margin: 0px;
+        }
+    
+        article {
+        margin-left: 0px; } 
+}
\ No newline at end of file