Fix some styling

src/app.css

@@ -1,107 +0,0 @@
-:root {
-	font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-	line-height: 1.5;
-	font-weight: 400;
-
-	color: #222;
-	background-color: #ffffff;
-
-	font-synthesis: none;
-	text-rendering: optimizeLegibility;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-	-webkit-text-size-adjust: 100%;
-}
-
-body {
-	margin: 0;
-	display: flex;
-	align-items: center;
-	min-height: 100vh;
-}
-
-#app {
-	max-width: 1280px;
-	margin: 0 auto;
-	text-align: center;
-}
-
-img {
-	margin-bottom: 0;
-  max-width: 100%;
-}
-
-img:hover {
-	filter: drop-shadow(0 0 2em #673ab8aa);
-}
-
-section {
-	margin-top: 5rem;
-	display: grid;
-	grid-template-columns: repeat(3, 1fr);
-	column-gap: 1.5rem;
-}
-
-.resource {
-	padding: 0.75rem 1.5rem;
-	border-radius: 0.5rem;
-	text-align: left;
-	text-decoration: none;
-	color: #222;
-	background-color: #f1f1f1;
-	border: 1px solid transparent;
-}
-
-.resource:hover {
-	border: 1px solid #000;
-	box-shadow: 0 25px 50px -12px #673ab888;
-}
-
-@media (max-width: 639px) {
-	#app {
-		margin: 2rem;
-	}
-	section {
-		margin-top: 5rem;
-		grid-template-columns: 1fr;
-		row-gap: 1rem;
-	}
-}
-
-/* @media (prefers-color-scheme: dark) {
-	:root {
-		color: #ccc;
-		background-color: #1a1a1a;
-	}
-	.resource {
-		color: #ccc;
-		background-color: #161616;
-	}
-	.resource:hover {
-		border: 1px solid #bbb;
-	}
-} */
-
-.row {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -ms-flex-wrap: wrap;
-    flex-wrap: wrap;
-    margin-right: -15px;
-    margin-left: -15px;
-}
-
-ul.user-items {
-    display: flex;
-}
-img.mini-avatar {
-    height: 40px;
-    width: 40px;
-    border-radius: 50%;
-	margin-left: -10px;
-}
-
-img.mini-avatar:first {
-	margin-left: 0;
-}

src/app.tsx

@@ -1,5 +1,4 @@
 import { useEffect, useState } from 'preact/hooks'
-import './app.css'
 
 const EVENTS = 'https://api.kommunity.com/api/v1/faith-in-tech/events?&page=1'
 
@@ -47,7 +46,6 @@ export function App() {
 
   return (
     <div>
-      <h1 style="text-align:center; font-weight: 200">Example</h1>
       <div class="list">
         {events.map((result: Event) => (
           <Result {...result} />

src/index.css

@@ -13,31 +13,13 @@
 	-webkit-text-size-adjust: 100%;
 }
 
-body {
-	margin: 0;
-	display: flex;
-	align-items: center;
-	min-height: 100vh;
-  text-decoration: none;
-}
-a {
-  text-decoration: none;
-  color: blue;
-}
-
-#app {
-	max-width: 1280px;
-	margin: 0 auto;
-	text-align: center;
-}
-
 img {
 	margin-bottom: 0;
   max-width: 100%;
 }
 
 img:hover {
-	filter: drop-shadow(0 0 2em #673ab8aa);
+	filter: drop-shadow(0 0 2em #68d2e861);
 }
 
 section {
@@ -59,7 +41,7 @@ section {
 
 .resource:hover {
 	border: 1px solid #000;
-	box-shadow: 0 25px 50px -12px #673ab888;
+	box-shadow: 0 25px 50px -12px #68d2e861;
 }
 
 @media (max-width: 639px) {
@@ -97,7 +79,7 @@ img.mini-avatar:first {
 	margin-left: 0;
 }
 .event-card {
-  margin-bottom: 30px;
+  margin-bottom: 50px;
 }
 @media screen and (min-width: 750px) {
   .event-card {