diff --git a/public/css/main.css b/public/css/main.css
index 53e679e..c38143f 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -1,12 +1,11 @@
 @import url(normalize.css);
 @import url(flaticon.css);
 @import url(tables.css);
-@import url(https://fonts.googleapis.com/css?family=Open+Sans|Roboto|Playfair+Display|Bree+Serif|Lato|Source+Sans+Pro|Montserrat|Inconsolata);
-@import url(https://fonts.googleapis.com/css?family=Karla|Raleway|Bitter|Quicksand|Patua+One|Rubik|Cantarell);
+@import url(https://fonts.googleapis.com/css?family=Karla|Montserrat|Inconsolata|Rubik);
 ul.topnav {
   list-style-type: none;
   margin: 0;
-  padding: 0;
+  padding: 20px;
   overflow: hidden; }
 
 ul.topnav li {
@@ -29,29 +28,6 @@ ul.topnav li a:hover {
 ul.topnav li.icon {
   display: none; }
 
-@media screen and (max-width: 680px) {
-  ul.topnav li:not(:first-child) {
-    display: none; }
-
-  ul.topnav li.icon {
-    float: right;
-    display: inline-block; } }
-@media screen and (max-width: 680px) {
-  ul.topnav.responsive {
-    position: relative; }
-
-  ul.topnav.responsive li.icon {
-    position: absolute;
-    right: 0;
-    top: 0; }
-
-  ul.topnav.responsive li {
-    float: none;
-    display: inline; }
-
-  ul.topnav.responsive li a {
-    display: block;
-    text-align: left; } }
 input {
   padding: 10px;
   box-sizing: border-box;
@@ -76,51 +52,63 @@ button {
 
 body {
   background-color: #7aa2cb;
-  font-family: 'Karla'; }
+  font-family: 'Karla', sans-serif;
+  font-size: 100%; }
 
 .flexcontainer {
   display: flex;
   flex-direction: column; }
 
-.intro-page {
-  background: linear-gradient(#070a15, #252b46);
-  /* Standard syntax */
+.flexpage, .intro-page, .info-page, .footer-page, .login-page, .panel-page {
   display: flex;
   justify-content: center;
-  /* align horizontal */
-  align-items: center;
-  /* align vertical */
+  align-items: center; }
+
+.intro-page {
+  background: linear-gradient(#070a15, #252b46);
   height: 100vh;
   flex-direction: column; }
+  @media (max-width: 1200px) {
+    .intro-page {
+      height: 100%; } }
 
 .intro-page-logo {
   font-family: 'Montserrat', serif;
-  font-size: 15em;
-  line-height: 0.8em;
+  font-size: 12em;
   text-transform: uppercase;
   color: #E08E79;
   text-shadow: 0px 0px 0px #e9bd84, 1px 1px 0px #e9bd84, 2px 2px 0px #e9bd84, 3px 3px 0px #e9bd84, 4px 4px 0px #e9bd84, 5px 5px 0px #e9bd84, 6px 6px 0px #e9bd84, 7px 7px 0px #e9bd84, 8px 8px 0px #e9bd84, 9px 9px 0px #e9bd84, 10px 10px 0px #e9bd84, 11px 11px 0px #e9bd84, 12px 12px 0px #e9bd84, 13px 13px 0px #e9bd84, 14px 14px 0px #e9bd84, 15px 15px 0px #e9bd84, 16px 16px 0px #e9bd84, 17px 17px 0px #e9bd84, 18px 18px 0px #e9bd84, 19px 19px 0px #e9bd84, 20px 20px 0px #e9bd84, 21px 21px 0px #e9bd84, 22px 22px 0px #e9bd84, 23px 23px 0px #e9bd84, 24px 24px 0px #e9bd84, 25px 25px 0px #e9bd84, 26px 26px 0px #e9bd84, 27px 27px 0px #e9bd84, 28px 28px 0px #e9bd84, 29px 29px 0px #e9bd84, 30px 30px 0px #e9bd84; }
-
-.fa-angle-double-down {
-  color: #424769;
-  margin-top: 50px; }
+  @media (max-width: 1200px) {
+    .intro-page-logo {
+      font-size: 3.5em;
+      padding: 20px;
+      text-shadow: 0px 0px 0px #e9bd84, 1px 1px 0px #e9bd84, 2px 2px 0px #e9bd84, 3px 3px 0px #e9bd84, 4px 4px 0px #e9bd84, 5px 5px 0px #e9bd84, 6px 6px 0px #e9bd84, 7px 7px 0px #e9bd84, 8px 8px 0px #e9bd84, 9px 9px 0px #e9bd84, 10px 10px 0px #e9bd84, 11px 11px 0px #e9bd84, 12px 12px 0px #e9bd84, 13px 13px 0px #e9bd84, 14px 14px 0px #e9bd84, 15px 15px 0px #e9bd84, 16px 16px 0px #e9bd84, 17px 17px 0px #e9bd84, 18px 18px 0px #e9bd84, 19px 19px 0px #e9bd84, 20px 20px 0px #e9bd84; } }
 
 .intro-page-welcome-text {
   font-family: 'Inconsolata', serif;
-  padding: 50px;
   font-size: 2em;
-  line-height: 0.8em;
   text-transform: uppercase;
   color: #fff; }
+  @media (max-width: 1200px) {
+    .intro-page-welcome-text {
+      font-size: 1em;
+      padding-top: 10px; } }
+
+.fa-angle-double-down {
+  color: #424769;
+  margin-top: 50px; }
+  @media (max-width: 1200px) {
+    .fa-angle-double-down {
+      margin: 0px; } }
 
 .info-page {
   background: linear-gradient(#F1D4AF, #eee9d9);
-  /* Standard syntax */
-  display: flex;
   flex-direction: row;
-  justify-content: center;
-  align-items: center;
   height: 80vh; }
+  @media (max-width: 1200px) {
+    .info-page {
+      flex-direction: column;
+      height: 100%; } }
 
 .info-page h1 {
   font-family: 'Rubik';
@@ -130,28 +118,27 @@ body {
   text-transform: lowercase; }
 
 .info-page-item {
-  padding: 50px;
-  font-family: "Karla"; }
-
-.info-page-item p {
   font-size: 0.9em;
   line-height: 1.6em;
   color: #8b6d5c;
-  text-align: center; }
+  margin: 50px; }
 
 [class^="flaticon-"]:before, [class*=" flaticon-"]:before,
 [class^="flaticon-"]:after, [class*=" flaticon-"]:after {
-  font-size: 10em; }
-
-.info-page-item span {
+  font-size: 10em;
   color: #fff; }
+  @media (max-width: 1200px) {
+    [class^="flaticon-"]:before, [class*=" flaticon-"]:before,
+    [class^="flaticon-"]:after, [class*=" flaticon-"]:after {
+      font-size: 5em; } }
 
 .footer-page {
   background-color: #e2f2f0;
-  display: flex;
   flex-direction: column;
-  justify-content: center;
-  align-items: center; }
+  height: 20vh; }
+  @media (max-width: 1200px) {
+    .footer-page {
+      height: 100%; } }
 
 .footer-page a {
   color: black; }
@@ -166,24 +153,20 @@ body {
   font-size: 1.5em; }
 
 .footer-page h2 {
-  font-size: 1.2em;
-  font-weight: bold; }
+  font-size: 1.2em; }
+  @media (max-width: 1200px) {
+    .footer-page h2 {
+      font-size: 1em;
+      margin: 20px; } }
 
 .login-page {
   background: linear-gradient(#070a15, #252b46);
-  /* Standard syntax */
-  display: flex;
-  justify-content: center;
-  /* align horizontal */
-  align-items: center;
-  /* align vertical */
   flex-direction: column;
   padding: 40px; }
 
 .login-page-logo {
   font-family: 'Montserrat', serif;
   font-size: 6em;
-  line-height: 0.9em;
   text-transform: uppercase;
   color: #E08E79;
   text-shadow: 0px 0px 0px #e9bd84, 1px 1px 0px #e9bd84, 2px 2px 0px #e9bd84, 3px 3px 0px #e9bd84, 4px 4px 0px #e9bd84, 5px 5px 0px #e9bd84, 6px 6px 0px #e9bd84, 7px 7px 0px #e9bd84, 8px 8px 0px #e9bd84, 9px 9px 0px #e9bd84, 10px 10px 0px #e9bd84; }
@@ -200,10 +183,6 @@ body {
 
 .panel-page {
   background: linear-gradient(#F1D4AF, #eee9d9);
-  /* Standard syntax */
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center; }
+  flex-direction: column; }
 
 /*# sourceMappingURL=main.css.map */
diff --git a/public/css/main.css.map b/public/css/main.css.map
index 3687ef1..1965d92 100644
--- a/public/css/main.css.map
+++ b/public/css/main.css.map
@@ -1,6 +1,6 @@
 {
 "version": 3,
-"mappings": "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",
+"mappings": "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",
 "sources": ["main.scss","navigation.sass","forms.sass"],
 "names": [],
 "file": "main.css"
diff --git a/public/css/main.scss b/public/css/main.scss
index dd48591..cc653e9 100644
--- a/public/css/main.scss
+++ b/public/css/main.scss
@@ -1,12 +1,28 @@
+// imports
 @import "normalize.css";
 @import "flaticon.css";
 @import "navigation.sass";
 @import "forms.sass";
 @import "tables.css";
+@import url(https://fonts.googleapis.com/css?family=Karla|Montserrat|Inconsolata|Rubik);
 
+// base, mixins, extensions
+body {
+  background-color: #7aa2cb;
+  font-family: 'Karla', sans-serif;
+  font-size:100%;
+}
 
-@import url(https://fonts.googleapis.com/css?family=Open+Sans|Roboto|Playfair+Display|Bree+Serif|Lato|Source+Sans+Pro|Montserrat|Inconsolata);
-@import url(https://fonts.googleapis.com/css?family=Karla|Raleway|Bitter|Quicksand|Patua+One|Rubik|Cantarell);
+.flexcontainer {
+  display: flex;
+  flex-direction: column;
+}
+
+.flexpage {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 
 @mixin long-shadow-text ($distance, $blur, $color) {
   $shadows: null;
@@ -19,57 +35,67 @@
   text-shadow: $shadows;
 }
 
-body {
-  background-color: #7aa2cb;
-  font-family: 'Karla';
-}
+$break-small: 1200px;
 
-.flexcontainer {
-  display: flex;
-  flex-direction: column;
+@mixin break-small {
+  @media (max-width: #{$break-small}) {
+    @content;
+  }
 }
 
 // first section with logo and navigation
 .intro-page {
-  background: linear-gradient(#070a15, #252b46); /* Standard syntax */
-  display: flex;
-  justify-content: center; /* align horizontal */
-  align-items: center; /* align vertical */
+  @extend .flexpage;
+  background: linear-gradient(#070a15, #252b46);
   height: 100vh;
   flex-direction: column;
+  @include break-small {
+   height: 100%; // remove the 100 VH on mobile devices to prevent unneccessary scrolling
+ }
 }
 
 .intro-page-logo {
   font-family: 'Montserrat', serif;
-  font-size: 15em;
-  line-height: 0.8em;
+  font-size: 12em;
   text-transform: uppercase;
   color: #E08E79;
   @include long-shadow-text(30, 0, #F1D4AF);
-}
-
-.fa-angle-double-down {
-  color: #424769;
-  margin-top: 50px;
+  @include break-small {
+   font-size: 3.5em;
+   padding: 20px;
+   @include long-shadow-text(20, 0, #F1D4AF);
+ }
 }
 
 .intro-page-welcome-text {
   font-family: 'Inconsolata', serif;
-  padding: 50px;
   font-size: 2em;
-  line-height: 0.8em;
   text-transform: uppercase;
   color: #fff;
+  @include break-small {
+   font-size: 1em;
+   padding-top: 10px;
+ }
 }
 
-// second section containing the information
+.fa-angle-double-down {
+  color: #424769;
+  margin-top: 50px;
+  @include break-small {
+   margin: 0px;
+ }
+}
+
+// second section containing information columns
 .info-page {
-  background: linear-gradient(#F1D4AF, #eee9d9); /* Standard syntax */
-  display: flex;
+  @extend .flexpage;
+  background: linear-gradient(#F1D4AF, #eee9d9);
   flex-direction: row;
-  justify-content: center;
-  align-items: center;
   height: 80vh;
+  @include break-small {
+   flex-direction: column;
+   height: 100%;
+ }
 }
 
 .info-page h1 {
@@ -81,34 +107,30 @@ body {
 }
 
 .info-page-item {
-  padding: 50px;
-  font-family: 'Karla'
-}
-
-.info-page-item p {
   font-size: 0.9em;
   line-height: 1.6em;
   color: #8b6d5c;
-  text-align: center;
-
+  margin: 50px;
 }
 
 [class^="flaticon-"]:before, [class*=" flaticon-"]:before,
 [class^="flaticon-"]:after, [class*=" flaticon-"]:after {
   font-size: 10em;
-}
-
-.info-page-item span {
   color: #fff;
+  @include break-small {
+    font-size: 5em;
+  }
 }
 
 // third section containing the footer
 .footer-page {
+  @extend .flexpage;
   background-color: #e2f2f0;
-  display: flex;
   flex-direction: column;
-  justify-content: center;
-  align-items: center;
+  height: 20vh;
+  @include break-small {
+   height: 100%;
+ }
 }
 
 .footer-page a {
@@ -130,17 +152,16 @@ body {
 .footer-page h2 {
   @extend .footer-page-title;
   font-size: 1.2em;
-  font-weight: bold;
+  @include break-small {
+    font-size: 1em;
+    margin: 20px;
+ }
 }
 
-
-
-// login page
+// login and register pages. forms make-up can be found in forms.sass.
 .login-page {
-  background: linear-gradient(#070a15, #252b46); /* Standard syntax */
-  display: flex;
-  justify-content: center; /* align horizontal */
-  align-items: center; /* align vertical */
+  @extend .flexpage;
+  background: linear-gradient(#070a15, #252b46);
   flex-direction: column;
   padding: 40px;
   }
@@ -148,7 +169,6 @@ body {
 .login-page-logo {
   font-family: 'Montserrat', serif;
   font-size: 6em;
-  line-height: 0.9em;
   text-transform: uppercase;
   color: #E08E79;
   @include long-shadow-text(10, 0, #F1D4AF);}
@@ -164,10 +184,9 @@ body {
   border-left: 0;
 }
 
+// panel page
 .panel-page {
-  background: linear-gradient(#F1D4AF, #eee9d9); /* Standard syntax */
-  display: flex;
+  @extend .flexpage;
+  background: linear-gradient(#F1D4AF, #eee9d9);
   flex-direction: column;
-  justify-content: center;
-  align-items: center;
 }
diff --git a/public/css/navigation.css b/public/css/navigation.css
index 2e7b70b..a043f60 100644
--- a/public/css/navigation.css
+++ b/public/css/navigation.css
@@ -1,7 +1,7 @@
 ul.topnav {
   list-style-type: none;
   margin: 0;
-  padding: 0;
+  padding: 20px;
   overflow: hidden; }
 
 ul.topnav li {
@@ -24,28 +24,4 @@ ul.topnav li a:hover {
 ul.topnav li.icon {
   display: none; }
 
-@media screen and (max-width: 680px) {
-  ul.topnav li:not(:first-child) {
-    display: none; }
-
-  ul.topnav li.icon {
-    float: right;
-    display: inline-block; } }
-@media screen and (max-width: 680px) {
-  ul.topnav.responsive {
-    position: relative; }
-
-  ul.topnav.responsive li.icon {
-    position: absolute;
-    right: 0;
-    top: 0; }
-
-  ul.topnav.responsive li {
-    float: none;
-    display: inline; }
-
-  ul.topnav.responsive li a {
-    display: block;
-    text-align: left; } }
-
 /*# sourceMappingURL=navigation.css.map */
diff --git a/public/css/navigation.css.map b/public/css/navigation.css.map
index 690080a..15b14c4 100644
--- a/public/css/navigation.css.map
+++ b/public/css/navigation.css.map
@@ -1,6 +1,6 @@
 {
 "version": 3,
-"mappings": "AAAA,SAAS;EACP,eAAe,EAAE,IAAI;EACrB,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;EACV,QAAQ,EAAE,MAAM;;AAElB,YAAY;EACV,KAAK,EAAE,IAAI;;AAEb,cAAc;EACZ,OAAO,EAAE,YAAY;EACrB,OAAO,EAAE,SAAS;EAClB,eAAe,EAAE,IAAI;EACrB,SAAS,EAAE,IAAI;EACf,gBAAgB,EAAE,IAAI;EACtB,MAAM,EAAE,eAAe;EACvB,aAAa,EAAE,GAAG;EAClB,KAAK,EAAE,OAAO;;AAEhB,oBAAoB;EAClB,gBAAgB,EAAE,OAAO;EACzB,eAAe,EAAE,IAAI;;AAEvB,iBAAiB;EACf,OAAO,EAAE,IAAI;;AAEf,oCAAmC;EACjC,8BAA8B;IAC5B,OAAO,EAAE,IAAI;;EACf,iBAAiB;IACf,KAAK,EAAE,KAAK;IACZ,OAAO,EAAE,YAAY;AAEzB,oCAAmC;EACjC,oBAAoB;IAClB,QAAQ,EAAE,QAAQ;;EAEpB,4BAA4B;IAC1B,QAAQ,EAAE,QAAQ;IAClB,KAAK,EAAE,CAAC;IACR,GAAG,EAAE,CAAC;;EAER,uBAAuB;IACrB,KAAK,EAAE,IAAI;IACX,OAAO,EAAE,MAAM;;EAEjB,yBAAyB;IACvB,OAAO,EAAE,KAAK;IACd,UAAU,EAAE,IAAI",
+"mappings": "AAAA,SAAS;EACP,eAAe,EAAE,IAAI;EACrB,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,IAAI;EACb,QAAQ,EAAE,MAAM;;AAElB,YAAY;EACV,KAAK,EAAE,IAAI;;AAEb,cAAc;EACZ,OAAO,EAAE,YAAY;EACrB,OAAO,EAAE,SAAS;EAClB,eAAe,EAAE,IAAI;EACrB,SAAS,EAAE,IAAI;EACf,gBAAgB,EAAE,IAAI;EACtB,MAAM,EAAE,eAAe;EACvB,aAAa,EAAE,GAAG;EAClB,KAAK,EAAE,OAAO;;AAEhB,oBAAoB;EAClB,gBAAgB,EAAE,OAAO;EACzB,eAAe,EAAE,IAAI;;AAEvB,iBAAiB;EACf,OAAO,EAAE,IAAI",
 "sources": ["navigation.sass"],
 "names": [],
 "file": "navigation.css"
diff --git a/public/css/navigation.sass b/public/css/navigation.sass
index 616d1ab..0940067 100644
--- a/public/css/navigation.sass
+++ b/public/css/navigation.sass
@@ -1,7 +1,7 @@
 ul.topnav
   list-style-type: none
   margin: 0
-  padding: 0
+  padding: 20px
   overflow: hidden
 
 ul.topnav li
@@ -23,27 +23,3 @@ ul.topnav li a:hover
 
 ul.topnav li.icon
   display: none
-
-@media screen and (max-width:680px)
-  ul.topnav li:not(:first-child)
-    display: none
-  ul.topnav li.icon
-    float: right
-    display: inline-block
-
-@media screen and (max-width:680px)
-  ul.topnav.responsive
-    position: relative
-
-  ul.topnav.responsive li.icon
-    position: absolute
-    right: 0
-    top: 0
-
-  ul.topnav.responsive li
-    float: none
-    display: inline
-
-  ul.topnav.responsive li a
-    display: block
-    text-align: left