Change color scheme and layout

src/layouts/Layout.astro

@@ -22,20 +22,30 @@ const { title } = Astro.props;
 <style is:global>
 	html {
 		font-family: 'JetBrains Mono', monospace;
-		background: #235488;
+		background: #000;
+		color: #8F0;
+	}
+	html, body {
+		margin: 0;
+		padding: 0;
+		height: 100%;
+		width: 100%;
 	}
 	h1 {
-		font-size: 5em;
+		font-size: 2.5em;
 		text-transform: uppercase;
 		font-weight: 800;
+		margin: 0;
 	}
 	h2 {
-		font-size: 3em;
+		font-size: 1.5em;
 		text-transform: uppercase;
 		font-weight: 600;
+		margin: 0;
 	}
 	a {
-		color: #fff;
+		color: #8F0;
+		text-transform: uppercase;
 	}
 	@font-face {
 		font-family: 'JetBrains Mono';

src/pages/index.astro

@@ -5,7 +5,7 @@ import Layout from '../layouts/Layout.astro';
 <Layout title="home">
 	<main>
 		<h1>lukeh990</h1>
-		<h2>WIP</h2>
+		<h2>full-stack web dev</h2>
 		<ul class="socials">
 			<li>
 				<a rel="me" href="https://tech.lgbt/@lukeh990" target="_blank" rel="noopener noreferrer">Mastodon</a>
@@ -17,14 +17,14 @@ import Layout from '../layouts/Layout.astro';
 
 <style>
 	main {
-		margin: auto;
-		padding: 1rem;
-		width: 800px;
-		max-width: calc(100% - 2rem);
-		color: white;
-		font-size: 20px;
-		line-height: 1.6;
 		text-align: center;
+		height: 100%;
+		width: 100%;
+
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-direction: column;
 	}
 	.socials {
 		list-style: none;