Add some dark styles

src/routes/_layout.svelte

@@ -5,18 +5,30 @@
 </script>
 
 <style>
+  .app-content {
+		background: linear-gradient(176deg, rgb(31, 22, 94) 0%,rgb(67, 117, 236) 100%);
+    background-attachment: fixed;
+		color:#f2f0f0;
+  }
+
 	main {
 		position: relative;
 		max-width: 56em;
-		background-color: white;
 		padding: 2em;
 		margin: 0 auto;
 		box-sizing: border-box;
 	}
+
+  :global(::selection) {
+    background: #0dd0d0;
+  }
+
 </style>
 
-<Nav {segment}/>
+<div class="app-content">
+  <Nav {segment}/>
 
-<main>
-	<slot></slot>
-</main>
+  <main>
+    <slot></slot>
+  </main>
+</div>

src/routes/index.svelte

@@ -1,3 +1,9 @@
+<script context="module">
+  export async function preload() {
+	  return this.redirect(302, 'portfolio')
+  }
+</script>
+
 <style>
 	h1, figure, p {
 		text-align: center;

src/routes/portfolio/index.svelte

@@ -15,6 +15,16 @@
   export let content
 </script>
 
+<style>
+  :global([id])::before {
+    content: '';
+    display: block;
+    height:      3em;
+    margin-top: -3em;
+    visibility: hidden;
+  }
+</style>
+
 <svelte:head>
 	<title>{content.title}</title>
 </svelte:head>
@@ -23,11 +33,11 @@
 
 <h2>Software Developer</h2>
 
-<section class="personal-information">
+<section id="personal-information">
   {@html content.body}
 </section>
 
-<section class="work-history">
+<section id="work-history">
   <h2>Work experience</h2>
   <section class="work-history-prelude">
     {@html content.workHistoryPrelude}
@@ -41,7 +51,7 @@
   </ul>
 </section>
 
-<section class="projects">
+<section id="projects">
   <h2>Projects</h2>
   <ul>
     {#each content.projects as project}
@@ -52,7 +62,7 @@
   </ul>
 </section>
 
-<section class="education">
+<section id="education">
   <h2>Education</h2>
   <ul>
     {#each content.education as work}