diff --git a/css/style.scss b/css/style.scss
index 7318b43..65a2615 100644
--- a/css/style.scss
+++ b/css/style.scss
@@ -3,6 +3,8 @@ $background-colour: #202124;
 $ui-colour: #131313;
 $text-colour: white;
 
+$pad-px: 20px;
+
 * {
 	box-sizing: border-box;
 }
@@ -34,13 +36,16 @@ p {
 	display: inline-block;
 	margin: 4px auto;
 	cursor: pointer;
-	text-align: center;
 	padding: 15px;
-	text-decoration: none;
 	box-shadow: 2px 2px 4px  black;
 	/*-webkit-transition-duration: 0.4s;
   	transition-duration: 0.4s;*/
-
+	
+	text: {
+		align: center;
+		decoration: none;
+	}
+	
 	&:hover {
 		box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
 	}
@@ -60,7 +65,7 @@ p {
 	img {
 		height: auto;
 		border: 10px solid #313439;
-		margin: 10px;
+		margin: $pad-px / 2;
 		box-shadow: 4px 4px 7px #070707;
 	}
 }
@@ -111,7 +116,7 @@ h1.title {
 	background-color: $ui-colour;
 	box-shadow: 4px 4px 8px black;
 	padding: 10px;
-	margin: 10px;
+	margin: $pad-px / 2;
 	/*border-radius: 3px;*/
 
 	h1 {
@@ -148,44 +153,49 @@ ul.navbar {
 	padding: 0;
 	overflow: hidden;
 	background-color: $ui-colour;
+
+
+	li {
+		float: left;
+		position: -webkit-sticky;
+		position: sticky;
+		top: 0;
+		
+
+		a {
+			display: block;
+			color: white;
+			text-align: center;
+			padding: 14px 16px;
+			text-decoration: none;
+			text-shadow: 1px 1px 2px black;
+			-webkit-transition: background-color 0.4s;
+  			transition: background-color 0.4s;
+		
+
+			&:hover {
+				background-color: #080808;
+			}
+		}
+	}
+	
+	li.right {float: right;}
 }
 
-ul.navbar li {
-	float: left;
-	position: -webkit-sticky;
-	position: sticky;
-	top: 0;
-}
+footer {
+	p {
+		text-align: right;
+		font-size: 12px;
+	}
 
-ul.navbar li a {
-	display: block;
-	color: white;
-	text-align: center;
-	padding: 14px 16px;
-	text-decoration: none;
-	text-shadow: 1px 1px 2px black;
-	-webkit-transition: background-color 0.4s;
-  	transition: background-color 0.4s;
-}
-
-ul.navbar a:hover {
-	background-color: #080808;
-}
-
-ul.navbar li.right {float: right;}
-
-footer p {
-	text-align: right;
-	font-size: 12px;
-}
-
-footer a {
-	margin-top: 10px;
-	margin-bottom: 10px;
-	text-align: right;
-	display: block;
-	color: grey;
-	font-size: 12px;
+	a {
+		margin-top: 10px;
+		margin-bottom: 10px;
+		text-align: right;
+		display: block;
+		color: grey;
+		font-size: 12px;
+	}
 }
 
 @media only screen and (max-width: 600px) {
@@ -200,7 +210,7 @@ footer a {
 
 [class*="pad-"] {
   	float: left;
-	width: calc(100% - 20px);
+	width: calc(100% - #{$pad-px});
 }
 
 @media only screen and (min-width: 768px) {
@@ -219,17 +229,17 @@ footer a {
   .col-12 {width: 100%;}
 
   /* For desktop: */
-  .pad-2 {width: calc(16.66% - 20px);}
-  .pad-3 {width: calc(25% - 20px);}
-  .pad-4 {width: calc(33.33% - 20px);}
-  .pad-5 {width: calc(41.66% - 20px);}
-  .pad-6 {width: calc(50% - 20px);}
-  .pad-7 {width: calc(58.33% - 20px);}
-  .pad-8 {width: calc(66.66% - 20px);}
-  .pad-9 {width: calc(75% - 20px);}
-  .pad-10 {width: calc(83.33% - 20px);}
-  .pad-11 {width: calc(91.66% - 20px);}
-  .pad-12 {width: calc(100% - 20px);}
+  .pad-2 {width: calc(16.66% - #{$pad-px});}
+  .pad-3 {width: calc(25% - #{$pad-px});}
+  .pad-4 {width: calc(33.33% - #{$pad-px});}
+  .pad-5 {width: calc(41.66% - #{$pad-px});}
+  .pad-6 {width: calc(50% - #{$pad-px});}
+  .pad-7 {width: calc(58.33% - #{$pad-px});}
+  .pad-8 {width: calc(66.66% - #{$pad-px});}
+  .pad-9 {width: calc(75% - #{$pad-px});}
+  .pad-10 {width: calc(83.33% - #{$pad-px});}
+  .pad-11 {width: calc(91.66% - #{$pad-px});}
+  .pad-12 {width: calc(100% - #{$pad-px});}
 }
 
 .row::after {
diff --git a/static/style.css b/static/style.css
index f0f0b47..1d7d75f 100644
--- a/static/style.css
+++ b/static/style.css
@@ -29,12 +29,12 @@ p {
   display: inline-block;
   margin: 4px auto;
   cursor: pointer;
-  text-align: center;
   padding: 15px;
-  text-decoration: none;
   box-shadow: 2px 2px 4px black;
   /*-webkit-transition-duration: 0.4s;
    	transition-duration: 0.4s;*/
+  text-align: center;
+  text-decoration: none;
 }
 .button:hover {
   box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
@@ -133,14 +133,12 @@ ul.navbar {
   overflow: hidden;
   background-color: #131313;
 }
-
 ul.navbar li {
   float: left;
   position: -webkit-sticky;
   position: sticky;
   top: 0;
 }
-
 ul.navbar li a {
   display: block;
   color: white;
@@ -151,11 +149,9 @@ ul.navbar li a {
   -webkit-transition: background-color 0.4s;
   transition: background-color 0.4s;
 }
-
-ul.navbar a:hover {
+ul.navbar li a:hover {
   background-color: #080808;
 }
-
 ul.navbar li.right {
   float: right;
 }
@@ -164,7 +160,6 @@ footer p {
   text-align: right;
   font-size: 12px;
 }
-
 footer a {
   margin-top: 10px;
   margin-bottom: 10px;
diff --git a/static/style.css.map b/static/style.css.map
index 6dfd05e..a1b6d1a 100644
--- a/static/style.css.map
+++ b/static/style.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../css/style.scss"],"names":[],"mappings":"AAKA;EACC;;;AAGD;EACC,aAVY;;;AAab;EACC,kBAbmB;;;AAgBpB;EACC,OAfa;EAgBb;AACA;;;AAGD;EACQ,OArBM;EAsBN;EACP;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;AAAA;;AAGA;EACC;;;AAIF;EACC;;;AAGD;EAEC;EACA;EACA;;AAGA;EACC;EACA;EACA;EACA;;;AAIF;EACC;EACA;EACA;AACA;EACA;EACA;;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACC;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;;;AAID;AACC;EACA,kBA5GW;EA6GX;EACA;EACA;AACA;;AAEA;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACI;;AAGL;EACC;;;AAIF;EACC;EACA;EACA;;;AAGD;EACC;EACA;AACA;EACA;EACA;EACA;EACA,kBAnJW;;;AAsJZ;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACE;;;AAGH;EACC;;;AAGD;EAAoB;;;AAEpB;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACE;AAAA;IACc;;;AAGhB;EACG;EACF;;;AAGD;EACG;EACF;;;AAGD;AACE;EACA;IAAQ;;;EACR;IAAQ;;;EACR;IAAQ;;;EACR;IAAQ;;;EACR;IAAQ;;;EACR;IAAQ;;;EACR;IAAQ;;;EACR;IAAQ;;;EACR;IAAQ;;;EACR;IAAS;;;EACT;IAAS;;;EACT;IAAS;;;AAET;EACA;IAAQ;;;EACR;IAAQ;;;EACR;IAAQ;;;EACR;IAAQ;;;EACR;IAAQ;;;EACR;IAAQ;;;EACR;IAAQ;;;EACR;IAAQ;;;EACR;IAAS;;;EACT;IAAS;;;EACT;IAAS;;;AAGX;EACE;EACA;EACA","file":"style.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../css/style.scss"],"names":[],"mappings":"AAOA;EACC;;;AAGD;EACC,aAZY;;;AAeb;EACC,kBAfmB;;;AAkBpB;EACC,OAjBa;EAkBb;AACA;;;AAGD;EACQ,OAvBM;EAwBN;EACP;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;AAAA;EAIC;EACA;;AAGD;EACC;;;AAIF;EACC;;;AAGD;EAEC;EACA;EACA;;AAGA;EACC;EACA;EACA;EACA;;;AAIF;EACC;EACA;EACA;AACA;EACA;EACA;;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACC;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;;;AAID;AACC;EACA,kBAjHW;EAkHX;EACA;EACA;AACA;;AAEA;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACI;;AAGL;EACC;;;AAIF;EACC;EACA;EACA;;;AAGD;EACC;EACA;AACA;EACA;EACA;EACA;EACA,kBAxJW;;AA2JX;EACC;EACA;EACA;EACA;;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACE;;AAGF;EACC;;AAKH;EAAU;;;AAIV;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;AAAA;IACc;;;AAGhB;EACG;EACF;;;AAGD;EACG;EACF;;;AAGD;AACE;EACA;IAAQ;;;EACR;IAAQ;;;EACR;IAAQ;;;EACR;IAAQ;;;EACR;IAAQ;;;EACR;IAAQ;;;EACR;IAAQ;;;EACR;IAAQ;;;EACR;IAAQ;;;EACR;IAAS;;;EACT;IAAS;;;EACT;IAAS;;;AAET;EACA;IAAQ;;;EACR;IAAQ;;;EACR;IAAQ;;;EACR;IAAQ;;;EACR;IAAQ;;;EACR;IAAQ;;;EACR;IAAQ;;;EACR;IAAQ;;;EACR;IAAS;;;EACT;IAAS;;;EACT;IAAS;;;AAGX;EACE;EACA;EACA","file":"style.css"}
\ No newline at end of file