some styling

public/styles/css/classes.css

@@ -1,11 +1,28 @@
 .content {
-
+    width: 90%;
+    max-width: 75em;
+    margin: auto;
+    padding: 0.5em;
+    margin-top: 1em;
+    margin-bottom: 1em;
+    border: 3px solid var(--accent);
+    border-radius: 5px;
+    opacity: 0.9;
+    background: linear-gradient(to bottom right, var(--background-950), var(--background-900));
+    -webkit-box-shadow: 0 0 20px var(--accent);
+    -moz-box-shadow: 0 0 20px var(--accent);
+    box-shadow: 0 0 20px var(--accent);
 }
 
-.title {
-
+h1::before {
+    content: "> ";
 }
 
-.subtitle {
-    
+h1 {
+    font-size: 42px;
+    background-image: var(--accent-gradient);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-size: 400%;
+    background-position: 0%;
 }

public/styles/css/color-scheme.css

@@ -5,6 +5,8 @@
     --secondary: #76552e;
     --accent: #ffa941;
 
+    --accent-gradient: linear-gradient(to bottom right, var(--accent), var(--accent-200) 30%, var(--text) 60%);
+
     --text-50: #f6f3ee;
     --text-100: #ede6de;
     --text-200: #dbcebd;

public/styles/css/main.css

@@ -1,4 +1,5 @@
 @import "color-scheme.css";
+@import "classes.css";
 
 @font-face {
     font-family: terminess-nf;

src/pages/index.astro

@@ -4,11 +4,13 @@ import Layout from "../layouts/Layout.astro";
 
 <Layout>
   <main>
-	// Title Area
+	<!-- Title Area -->
     <section class="content">
-      <h1 class="title">nelle observer</h1>
+      <h1 class="title"> nelle observer</h1>
 	  <h2 class="subtitle"></h2>
-	  <p>words</p>
+	</section>
+	<section class="content">
+		<p>hello, what brings you here?</p>
 	</section>
   </main>
 </Layout>