basic styling, some metadata

css/main.css

@@ -3,58 +3,79 @@
 }
 
 /* numbered components are from https://www.joshwcomeau.com/css/custom-css-reset/ */
-/* 1. Use a more-intuitive box-sizing model */
 *, *::before, *::after {
-  box-sizing: border-box;
+  box-sizing: border-box; /* 1. Use a more-intuitive box-sizing model */
+}
+
+#root, #__next {
+  isolation: isolate; /* 10. Create a root stacking context */
 }
 
-/* 2. Remove default margin */
 *:not(dialog) {
-  margin: 0;
+  margin: 0; /* 2. Remove default margins */
 }
 
-/* 3. Enable keyword animations */
 @media (prefers-reduced-motion: no-preference) {
   html {
-    interpolate-size: allow-keywords;
+    interpolate-size: allow-keywords; /* 3. Enable keyword animations */
   }
 }
 
 body {
-  /* 4. Increase line-height */
-  line-height: 1.5;
-  /* 5. Improve text rendering */
-  -webkit-font-smoothing: antialiased;
+  line-height: 1.5; /* 4. Increase line-height */
+  -webkit-font-smoothing: antialiased; /* 5. Improve text rendering */
+  font-family: sans-serif;
+}
+
+#content {
+	width: 65%;
+	max-width: 1800px;
+	margin-inline: auto;
+	margin-block-end: 3rem;
+}
+
+@media (max-width: 1050px) {
+	#content {
+		width: 85%;
+	}
+}
+
+@media (max-width: 650px) {
+	#content {
+		width: 92%;
+	}
 }
 
-/* 6. Improve media defaults */
 img, picture, video, canvas, svg {
-  display: block;
-  max-width: 100%;
-  height: auto;
+  display: block; /* 6. Improve media defaults */
+  max-width: 100%; /* 6. Improve media defaults */
+  height: auto; /* 6. Improve media defaults */
+  margin: 0 auto;
 }
 
-/* 7. Inherit fonts for form controls */
 input, button, textarea, select {
-  font: inherit;
+  font: inherit; /* 7. Inherit fonts for form controls */
 }
 
-/* 8. Avoid text overflows */
-p, h1, h2, h3, h4, h5, h6 {
-  overflow-wrap: break-word;
+h1, h2, h3, h4, h5, h6, p {
+  overflow-wrap: break-word; /* 8. Avoid text overflows */
 }
 
-/* 9. Improve line wrapping */
-p {
-  text-wrap: pretty;
-}
 h1, h2, h3, h4, h5, h6 {
-  text-wrap: balance;
+  text-wrap: balance; /* 9. Improve line wrapping */
+  font-family: serif;
+  margin-block-start: 1em;
 }
 
-/*
-  10. Create a root stacking context
-*/
-#root, #__next {
-  isolation: isolate;
+h1 {
+	text-align: center;
+}
+
+p {
+  text-wrap: pretty; /* 9. Improve line wrapping */
+}
+
+#hero {
+	aspect-ratio: 40 / 9;
+	object-fit: cover;
 }