Progress sync, sample text on home page

public/css/home.css

@@ -3,7 +3,7 @@
   --border-radius: 40%;
 }
 .border-round-2 {
-  --border-radius: 75%;
+  --border-radius: 85%;
 }
 .border-round-tl {
   border-top-left-radius: var(--border-radius);
@@ -91,4 +91,7 @@
   .home-grid-container {
     padding: 0;
   }
+
+  .home-grid {
+  }
 }

public/css/style.css

@@ -50,6 +50,14 @@ footer {
   height: var(--footer-height);
 }
 
+.color-teal {
+  color: rgba(var(--teal), .86);
+  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
+}
+.color-tan {
+  color: rgba(var(--tan), .86);
+}
+
 .container {
   max-width: 1200px;
   margin-left: auto;

src/_includes/layout.html

@@ -35,7 +35,10 @@
   </header>
   <main>
     <div class="container flex-adaptive">
-      <div class="flex-1">Text</div>
+      <div class="flex-1">
+        <h1>Welcome to <span class="color-teal">Cyper's Blog</span>!</h1>
+        <p>Where you can experience stories <span class="">side-by-side</span> with <span class="">Cyper</span></p>
+      </div>
       <div class="flex-1 home-grid-container">
         <div class="home-grid">
           <div class="fill-background fill-teal border-round-1 border-round-tl border-round-bl"></div>