diff --git a/index.html b/index.html
index ba86d57..203c7ae 100644
--- a/index.html
+++ b/index.html
@@ -22,8 +22,19 @@
 
 	<!-- CSS -->
 	
+	
+	
 	<style>:root {
 	color-scheme: light dark;
+
+	--color-light: #ddd;
+  --color-dark: #222;
+  --color-teal: #014d4e;
+  --color-pink: #ffb2d0;
+
+  --color-bg: light-dark(var(--color-light), var(--color-dark));
+  --color-text: light-dark(var(--color-dark), var(--color-light));
+  --color-accent: light-dark(var(--color-teal), var(--color-pink));
 }
 
 /* numbered components are from https://www.joshwcomeau.com/css/custom-css-reset/ */
@@ -49,6 +60,27 @@ body {
   line-height: 1.5;
   /* 5. Improve text rendering */
   -webkit-font-smoothing: antialiased;
+  color: var(--color-text);
+  background-color: var(--color-bg);
+  font-family: sans-serif;
+}
+
+#content {
+ 	width: 65%;
+  max-width: 1800px;
+  margin: 1rem auto;
+}
+
+@media (max-width: 1100px) {
+  #content {
+    width: 85%;
+  }
+}
+
+@media (max-width: 650px) {
+  #content {
+    width: 92%;
+  }
 }
 
 /* 6. Improve media defaults */
@@ -56,6 +88,7 @@ img, picture, video, canvas, svg {
   display: block;
   max-width: 100%;
   height: auto;
+  margin: 0 auto;
 }
 
 /* 7. Inherit fonts for form controls */
@@ -81,28 +114,109 @@ h1, h2, h3, h4, h5, h6 {
 */
 #root, #__next {
   isolation: isolate;
+}
+
+/* Basic elements */
+h1, h2, h3, h4, h5, h6 {
+  font-family: serif;
+}
+
+h1, h2, h3, h4, h5, h6,
+a {
+  color: var(--color-accent);
+}
+
+a {
+  padding: .1rem;
+  border-radius: .05rem;
+}
+
+a:focus-visible {
+  outline: solid var(--color-accent);
+}
+
+.hero {
+	aspect-ratio: 32 / 9;
+	object-fit: cover;
+}
+/* Print media */
+@media print {
+  header,
+  footer,
+  nav {
+    display: none;
+  }
+
+  body {
+    background-color: #fff;
+    width: 95vw;
+  }
+
+  body,
+  h1, h2, h3, h4, h5,
+  a {
+    color: #000;
+  }
+
+  a::after {
+    content: " (" attr(href) ")";
+  }
+}
+/* Header, footer, nav */
+#skip {
+  background-color: var(--color-bg);
+  position: absolute;
+  left: -999px;
+  top: -999px;
+}
+
+#skip:focus-visible {
+  left: 10%;
+  top: 5%;
+}
+
+header a[aria-current="page"]::before,
+footer a[aria-current="page"]::before {
+  content: "> " / "";
+}
+
+header a[aria-current="page"]::after,
+footer a[aria-current="page"]::after {
+  content: " <" / "";
+}
+
+header h2 a {
+  text-decoration: none;
+}
+
+nav ul {
+  display: flex;
+  justify-content: center;
+  flex-flow: row wrap;
+  list-style: none;
+  gap: 1rem;
 }</style>
 
   
 </head>
 
 <body>
-	<div id="content">
-		<header>
+	<header>
   <nav>
   </nav>
 </header>
 
 
-		<main id="main">
-			
-<h1>This is my home page</h1>
-
-
-  <img src="/img/TPPh3kvfzS-4898.jpeg" alt="chickadee" loading="lazy" decoding="async" width="4898" height="3265">
+	<main id="main">
+		
+
+  <img class="hero" src="/img/TPPh3kvfzS-4898.jpeg" alt="chickadee" loading="lazy" decoding="async" width="4898" height="3265">
 
 
+<div id="content">
+  <h1>This is my home page</h1>
 
+  
 <h2>Here’s an h2</h2>
 <p>This is a paragraph.</p>
 <p>This is another paragraph. It might be a bit longer.</p>
@@ -151,13 +265,13 @@ h1, h2, h3, h4, h5, h6 {
 <p>Ok, let’s push this and see what we get.</p>
 
 
+</div>
 
-		</main>
-	</div>
+	</main>
 
   <footer>
 </footer>
 
-	<!-- This page `/` was built on 2026-05-13T23:25:53.636Z -->
+	<!-- This page `/` was built on 2026-05-14T00:00:56.175Z -->
 </body>
 </html>
