added some styling

index.html

@@ -19,12 +19,11 @@
 
 <h3>Check out these custom web components below!</h3>
 
-
 <h4>Web Component 1</h4>
 <poots-poot>
 	
 	<h4 slot="keyblades">my favorite keyblades</h4>
-	<ul slot="list">
+	<ul slot="list" style="font-family: KHMenu;">
 
 		<li>
 		Kingdom Key

main.css

@@ -0,0 +1,6 @@
+@font-face {
+    font-family: 'KHMenu';
+    src: url('font/KHMenu.otf') format('opentype');
+    font-weight: normal;
+    font-style: normal;
+}

poots.js

@@ -1,7 +1,31 @@
 const template = document.createElement('template')
 template.innerHTML = `
-    <div>
-    
+
+<style>
+    @font-face {
+    font-family: 'KHMenu';
+    src: url('font/KHMenu.otf') format('opentype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+    div {
+    border: 1px solid;
+    }
+    h2 {
+    font-family: KHMenu
+    }
+
+    :host {
+    background-color: purple
+    display: block;
+    }
+
+
+</style>
+
+<div>
+   
     <h2> WEPA! </h2>
     <slot name="keyblades">Default text is no slot used in html</slot>
     <slot name="list"> </slot>