feat: header and main elements for semantics

src/lib/Header.svelte

@@ -5,7 +5,8 @@
     let navShown = false;
 </script>
 
-<nav>
+<header>
+    <nav>
         <a class="brand" href="index.html">Cursed Creations</a>
         <md-outlined-icon-button
             class="menu"
@@ -20,10 +21,16 @@
                 <li><a {href}>{display}</a></li>
             {/each}
         </ul>
-</nav>
+    </nav>
+</header>
 
 <style lang="scss">
     $space: 4ch;
+
+    header {
+        display: contents;
+    }
+    
     nav {
         display: grid;
         align-items: center;

src/routes/+layout.svelte

@@ -3,7 +3,7 @@
 </script>
 
 <Header />
-<slot />
+<main><slot /></main>
 
 <style>
     :global(body) {