update base index sample page styles and content

scss/_palette.scss

@@ -1,8 +1,10 @@
 // colours used thoughout site
 :root {
     --col-bg: #212121;
-    --col-particle: #536878;
-    --col-particle-stroke: #035096;
-    --col-particle-stroke-hover: #0892d0;
+    --col-link: #bbdefb;
     --col-text: #ebe7c5;
+
+    --col-particle-stroke-hover: #0892d0;
+    --col-particle-stroke: #035096;
+    --col-particle: #536878;
 }

scss/index.scss

@@ -9,12 +9,37 @@ import partials
 body {
     background-color: var(--col-bg);
     color: var(--col-text);
+    font-family: 'Montserrat', sans-serif;
+    font-size: 1.6rem;
+    line-height: 1.6rem;
+}
+
+main {
+    flex: 1;
+}
+
+header {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+}
+
+footer {
+    display: flex;
+    font-size: 1.5rem;
+    line-height: 1.85rem;
 }
 
 h1 {
     font-size: 5rem;
     line-height: 5rem;
-    margin-bottom: 3rem;
+    margin-bottom: 1rem;
+}
+
+h2 {
+    font-size: 3rem;
+    line-height: 3rem;
+    margin-bottom: 5rem;
 }
 
 p {
@@ -23,19 +48,16 @@ p {
 
 a {
     color: inherit;
+    font-weight: bold;
+    text-decoration: underline;
+    transition: all 0.5s ease;
     &:hover,
     &:focus,
     &:active {
-        color: red;
+        color: var(--col-link);
     }
 }
 
-.wrapper {
-    display: flex;
-    flex-direction: column;
-    padding: 2rem;
-}
-
 #particles {
     height: 100%;
     left: 0;
@@ -44,3 +66,14 @@ a {
     width: 100%;
     z-index: -999;
 }
+
+.wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    min-height: 100%;
+    padding: 2rem;
+}
+ .spacer {
+     flex: 1;
+ }