layout and styling

css/main.css

@@ -1,5 +1,14 @@
 :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/ */
@@ -25,6 +34,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 */
@@ -32,6 +62,7 @@ img, picture, video, canvas, svg {
   display: block;
   max-width: 100%;
   height: auto;
+  margin: 0 auto;
 }
 
 /* 7. Inherit fonts for form controls */
@@ -58,3 +89,27 @@ 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;
+}