diff --git a/css/style.scss b/css/style.scss
new file mode 100644
index 0000000..7318b43
--- /dev/null
+++ b/css/style.scss
@@ -0,0 +1,239 @@
+$font-stack: 'Lato', arial; 
+$background-colour: #202124;
+$ui-colour: #131313;
+$text-colour: white;
+
+* {
+	box-sizing: border-box;
+}
+
+html {
+	font-family: $font-stack;
+}
+
+body {
+	background-color: $background-colour;
+}
+
+a {
+	color: $text-colour;
+	font-size: 20px;
+	/*text-shadow: 1px 1px 1px #aaa;*/
+}
+
+p {
+        color: $text-colour;
+        font-size: 20px;
+	padding: 10px;
+}
+
+.button {
+	background-color: #505050;
+	color: black;
+	border-radius: 10px;
+	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;*/
+
+	&:hover {
+		box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
+	}
+}
+
+.row {
+	margin: 30px;
+}
+
+.gallerystrip{
+
+	width: 100%;
+	margin: auto;
+	margin-top: 15px;
+
+
+	img {
+		height: auto;
+		border: 10px solid #313439;
+		margin: 10px;
+		box-shadow: 4px 4px 7px #070707;
+	}
+}
+
+.profile {
+	background-color: #131313;
+	height: auto;
+	margin-top: 10px;
+	/*border: 8px solid #313439;*/
+	border-radius: 0px;
+	box-shadow: 7px 7px 8px black;
+
+
+	img {
+		border-radius: 50%;
+		display: block;
+		margin-top: 10px;
+		margin-left: auto;
+		margin-right: auto;
+		margin-bottom: 10px;
+		border: 8px solid #212121;
+		box-shadow: 4px 4px 3px #0c0c0c;
+	}
+}
+
+h1.title {
+	color: white;
+	font-size: 6em;
+	font-family: 'Megrim', arial;
+	text-shadow: 2px 2px 2px #aaa;
+
+	font-weight: bold;
+	display: block;
+	text-decoration: none;
+	background-color: #131313;
+	padding: 0px;
+	/*font-size: 16em;*/
+	width: 3em;
+	height: 1.3em;
+	text-align: center;
+	margin: auto;
+	box-shadow: 4px 4px 8px #000000;
+
+}
+
+.card {
+	/*background-color: grey;*/
+	background-color: $ui-colour;
+	box-shadow: 4px 4px 8px black;
+	padding: 10px;
+	margin: 10px;
+	/*border-radius: 3px;*/
+
+	h1 {
+		text-align: center;
+		color: white;
+		text-shadow: 1px 1px 2px #4f4f4f;
+	}
+
+	img {
+		width: 100%;
+		border-radius: 3px;
+		margin-bottom: 8px;	
+		box-shadow: 2px 2px 2px black;
+		margin-left: auto;
+    		margin-right: auto;
+	}
+
+	p {
+		margin-top: 20px;
+	}
+}
+
+h1.sectiontitle {
+	text-align:center;
+	color: white;
+	font-family: 'Megrim', sans-serif;
+}
+
+ul.navbar {
+	list-style-type: none;
+	border-radius: 5px 5px;
+	/*box-shadow: 3px 3px 1px grey;*/
+	margin: 10px;
+	padding: 0;
+	overflow: hidden;
+	background-color: $ui-colour;
+}
+
+ul.navbar li {
+	float: left;
+	position: -webkit-sticky;
+	position: sticky;
+	top: 0;
+}
+
+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;
+}
+
+@media only screen and (max-width: 600px) {
+  ul.navbar li.right,
+  ul.navbar li {float: none;}
+}
+
+[class*="col-"] {
+  	float: left;
+	width: 100%;
+}
+
+[class*="pad-"] {
+  	float: left;
+	width: calc(100% - 20px);
+}
+
+@media only screen and (min-width: 768px) {
+  /* For desktop: */
+  .col-1 {width: 8.33%;}
+  .col-2 {width: 16.66%;}
+  .col-3 {width: 25%;}
+  .col-4 {width: 33.33%;}
+  .col-5 {width: 41.66%;}
+  .col-6 {width: 50%;}
+  .col-7 {width: 58.33%;}
+  .col-8 {width: 66.66%;}
+  .col-9 {width: 75%;}
+  .col-10 {width: 83.33%;}
+  .col-11 {width: 91.66%;}
+  .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);}
+}
+
+.row::after {
+  content: "";
+  clear: both;
+  display: table;
+}
diff --git a/static/style.css b/static/style.css
index 7e21200..f0f0b47 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,230 +1,294 @@
 * {
-	box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 html {
-	font-family: 'Lato', arial;
+  font-family: "Lato", arial;
 }
 
 body {
-	background-color: #202124;
+  background-color: #202124;
 }
 
 a {
-	color: white;
-	font-size: 20px;
-	/*text-shadow: 1px 1px 1px #aaa;*/
+  color: white;
+  font-size: 20px;
+  /*text-shadow: 1px 1px 1px #aaa;*/
 }
 
 p {
-        color: white;
-        font-size: 20px;
-	padding: 10px;
+  color: white;
+  font-size: 20px;
+  padding: 10px;
 }
 
 .button {
-	background-color: #505050;
-	color: black;
-	border-radius: 10px;
-	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;*/
+  background-color: #505050;
+  color: black;
+  border-radius: 10px;
+  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;*/
 }
-
 .button:hover {
-	box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
+  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
 }
 
 .row {
-	margin: 30px;
+  margin: 30px;
 }
 
+.gallerystrip {
+  width: 100%;
+  margin: auto;
+  margin-top: 15px;
+}
 .gallerystrip img {
-	height: auto;
-	border: 10px solid #313439;
-	margin: 10px;
-	box-shadow: 4px 4px 7px #070707;
+  height: auto;
+  border: 10px solid #313439;
+  margin: 10px;
+  box-shadow: 4px 4px 7px #070707;
 }
 
-div.gallerystrip {
-	width: 100%;
-	margin: auto;
-	margin-top: 15px;
+.profile {
+  background-color: #131313;
+  height: auto;
+  margin-top: 10px;
+  /*border: 8px solid #313439;*/
+  border-radius: 0px;
+  box-shadow: 7px 7px 8px black;
 }
-
-div.profile {
-	background-color: #131313;
-	height: auto;
-	margin-top: 10px;
-	/*border: 8px solid #313439;*/
-	border-radius: 0px;
-	box-shadow: 7px 7px 8px black;
-}
-
-div.profile img {
-	border-radius: 50%;
-	display: block;
-	margin-top: 10px;
-	margin-left: auto;
-	margin-right: auto;
-	margin-bottom: 10px;
-	border: 8px solid #212121;
-	box-shadow: 4px 4px 3px #0c0c0c;
+.profile img {
+  border-radius: 50%;
+  display: block;
+  margin-top: 10px;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 10px;
+  border: 8px solid #212121;
+  box-shadow: 4px 4px 3px #0c0c0c;
 }
 
 h1.title {
-	color: white;
-	font-size: 6em;
-	font-family: 'Megrim', arial;
-	text-shadow: 2px 2px 2px #aaa;
-
-	font-weight: bold;
-	display: block;
-	text-decoration: none;
-	background-color: #131313;
-	padding: 0px;
-	/*font-size: 16em;*/
-	width: 3em;
-	height: 1.3em;
-	text-align: center;
-	margin: auto;
-	box-shadow: 4px 4px 8px #000000;
-
+  color: white;
+  font-size: 6em;
+  font-family: "Megrim", arial;
+  text-shadow: 2px 2px 2px #aaa;
+  font-weight: bold;
+  display: block;
+  text-decoration: none;
+  background-color: #131313;
+  padding: 0px;
+  /*font-size: 16em;*/
+  width: 3em;
+  height: 1.3em;
+  text-align: center;
+  margin: auto;
+  box-shadow: 4px 4px 8px #000000;
 }
 
-div.card {
-	/*background-color: grey;*/
-	background-color: #131313;
-	box-shadow: 4px 4px 8px black;
-	padding: 10px;
-	margin: 10px;
-	/*border-radius: 3px;*/
+.card {
+  /*background-color: grey;*/
+  background-color: #131313;
+  box-shadow: 4px 4px 8px black;
+  padding: 10px;
+  margin: 10px;
+  /*border-radius: 3px;*/
 }
-
-div.card h1 {
-	text-align: center;
-	color: white;
-	text-shadow: 1px 1px 2px #4f4f4f;
+.card h1 {
+  text-align: center;
+  color: white;
+  text-shadow: 1px 1px 2px #4f4f4f;
 }
-
 .card img {
-	width: 100%;
-	border-radius: 3px;
-	margin-bottom: 8px;	
-	box-shadow: 2px 2px 2px black;
-	margin-left: auto;
-    	margin-right: auto;}
-
+  width: 100%;
+  border-radius: 3px;
+  margin-bottom: 8px;
+  box-shadow: 2px 2px 2px black;
+  margin-left: auto;
+  margin-right: auto;
+}
 .card p {
-	margin-top: 20px;
+  margin-top: 20px;
 }
 
 h1.sectiontitle {
-	text-align:center;
-	color: white;
-	font-family: 'Megrim', sans-serif;
+  text-align: center;
+  color: white;
+  font-family: "Megrim", sans-serif;
 }
 
 ul.navbar {
-	list-style-type: none;
-	border-radius: 5px 5px;
-	/*box-shadow: 3px 3px 1px grey;*/
-	margin: 10px;
-	padding: 0;
-	overflow: hidden;
-	background-color: #131313;
+  list-style-type: none;
+  border-radius: 5px 5px;
+  /*box-shadow: 3px 3px 1px grey;*/
+  margin: 10px;
+  padding: 0;
+  overflow: hidden;
+  background-color: #131313;
 }
 
 ul.navbar li {
-	float: left;
-	position: -webkit-sticky;
-	position: sticky;
-	top: 0;
+  float: left;
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
 }
 
 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;
+  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;
+  background-color: #080808;
 }
 
-ul.navbar li.right {float: right;}
+ul.navbar li.right {
+  float: right;
+}
 
 footer p {
-	text-align: right;
-	font-size: 12px;
+  text-align: right;
+  font-size: 12px;
 }
 
 footer a {
-	margin-top: 10px;
-	margin-bottom: 10px;
-	text-align: right;
-	display: block;
-	color: grey;
-	font-size: 12px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  text-align: right;
+  display: block;
+  color: grey;
+  font-size: 12px;
 }
 
 @media only screen and (max-width: 600px) {
   ul.navbar li.right,
-  ul.navbar li {float: none;}
+ul.navbar li {
+    float: none;
+  }
+}
+[class*=col-] {
+  float: left;
+  width: 100%;
 }
 
-[class*="col-"] {
-  	float: left;
-	width: 100%;
-}
-
-[class*="pad-"] {
-  	float: left;
-	width: calc(100% - 20px);
+[class*=pad-] {
+  float: left;
+  width: calc(100% - 20px);
 }
 
 @media only screen and (min-width: 768px) {
   /* For desktop: */
-  .col-1 {width: 8.33%;}
-  .col-2 {width: 16.66%;}
-  .col-3 {width: 25%;}
-  .col-4 {width: 33.33%;}
-  .col-5 {width: 41.66%;}
-  .col-6 {width: 50%;}
-  .col-7 {width: 58.33%;}
-  .col-8 {width: 66.66%;}
-  .col-9 {width: 75%;}
-  .col-10 {width: 83.33%;}
-  .col-11 {width: 91.66%;}
-  .col-12 {width: 100%;}
+  .col-1 {
+    width: 8.33%;
+  }
+
+  .col-2 {
+    width: 16.66%;
+  }
+
+  .col-3 {
+    width: 25%;
+  }
+
+  .col-4 {
+    width: 33.33%;
+  }
+
+  .col-5 {
+    width: 41.66%;
+  }
+
+  .col-6 {
+    width: 50%;
+  }
+
+  .col-7 {
+    width: 58.33%;
+  }
+
+  .col-8 {
+    width: 66.66%;
+  }
+
+  .col-9 {
+    width: 75%;
+  }
+
+  .col-10 {
+    width: 83.33%;
+  }
+
+  .col-11 {
+    width: 91.66%;
+  }
+
+  .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% - 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);
+  }
+}
 .row::after {
   content: "";
   clear: both;
   display: table;
 }
+
+/*# sourceMappingURL=style.css.map */
diff --git a/static/style.css.map b/static/style.css.map
new file mode 100644
index 0000000..6dfd05e
--- /dev/null
+++ b/static/style.css.map
@@ -0,0 +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