diff --git a/oliverbooth.dev/Pages/Shared/_Layout.cshtml b/oliverbooth.dev/Pages/Shared/_Layout.cshtml
index c7ecc4c..9a6102f 100644
--- a/oliverbooth.dev/Pages/Shared/_Layout.cshtml
+++ b/oliverbooth.dev/Pages/Shared/_Layout.cshtml
@@ -1,4 +1,4 @@
-
+
@@ -6,6 +6,7 @@
@ViewData["Title"] - oliverbooth.dev
+
diff --git a/oliverbooth.dev/wwwroot/css/site.css b/oliverbooth.dev/wwwroot/css/site.css
deleted file mode 100644
index f8d98fc..0000000
--- a/oliverbooth.dev/wwwroot/css/site.css
+++ /dev/null
@@ -1,22 +0,0 @@
-html {
- font-size: 14px;
-}
-
-@media (min-width: 768px) {
- html {
- font-size: 16px;
- }
-}
-
-.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
- box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
-}
-
-html {
- position: relative;
- min-height: 100%;
-}
-
-body {
- margin-bottom: 60px;
-}
\ No newline at end of file
diff --git a/oliverbooth.dev/wwwroot/css/site.scss b/oliverbooth.dev/wwwroot/css/site.scss
new file mode 100644
index 0000000..3864c9e
--- /dev/null
+++ b/oliverbooth.dev/wwwroot/css/site.scss
@@ -0,0 +1,157 @@
+html, body {
+ background: #121212;
+ color: #f5f5f5;
+ font-family: sans-serif;
+ font-size: 16px;
+}
+
+@media (min-width: 768px) {
+ html {
+ font-size: 16px;
+ }
+}
+
+.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
+ box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
+}
+
+html {
+ position: relative;
+ min-height: 100%;
+}
+
+body {
+ margin-bottom: 60px;
+}
+
+a {
+ &:link, &:visited, &:hover, &:active {
+ text-decoration: none;
+ color: #03A9F4;
+ }
+
+ &:hover {
+ color: #ffffff;
+ }
+}
+
+#site-title {
+ a {
+ &:link, &:visited, &:hover, &:active {
+ text-decoration: none;
+ color: white;
+
+ * {
+ font-family: 'Roboto Mono', monospace;
+ text-decoration: none;
+ color: white;
+ }
+ }
+ }
+}
+
+hr.page-separator {
+ border-top: 5px dashed #ffffff;
+ opacity: 1;
+ margin: 50px 0;
+}
+
+@media (min-width: 992px) {
+ .container {
+ max-width: 600px !important;
+ }
+}
+
+ul.contact-reasons {
+ list-style-type: none;
+ padding: 0;
+
+ li {
+ margin-bottom: 10px;
+ margin-left: 0;
+ padding: 0;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+
+ a {
+ &:link, &:visited, &:hover, &:active {
+ text-decoration: none;
+ color: white;
+ }
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+ }
+}
+
+.card {
+ background: #212121;
+ color: #ffffff;
+
+ a.btn, button {
+ color: #ffffff;
+ }
+}
+
+nav {
+ margin: 0 auto;
+ max-width: 960px;
+ text-align: center;
+
+ ul.site-nav {
+ list-style-type: none;
+ padding: 0;
+ margin: 0 auto;
+
+ li {
+ display: inline-block;
+ margin-right: 20px;
+
+ &:last-child {
+ margin-right: 0;
+ }
+
+ a {
+ font-size: 24px;
+
+ &:link, &:visited, &:hover, &:active {
+ text-decoration: none;
+ color: white;
+ }
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+ }
+ }
+}
+
+pre code span.line {
+ counter-increment: line;
+
+ &:before {
+ content: counter(line);
+ display: inline-block;
+ border-right: 1px solid #ddd;
+ padding: 0 .5em;
+ margin-right: .5em;
+ color: #888;
+ }
+}
+
+.hljs-ln-numbers {
+ user-select: none;
+ text-align: center;
+ color: #ccc;
+ vertical-align: top;
+ padding-right: 15px;
+}
+
+.hljs-ln-code {
+ padding-left: 10px;
+}
\ No newline at end of file