add research,

change around how styles are specified for each page's overlay content

css/overlay.css

@@ -1,6 +1,5 @@
 .overlay-container {
 	position: relative;
-	text-align: center;
 	width: 100%;
 }
 
@@ -28,11 +27,5 @@
 }
 
 .overlay-container .overlay-content {
-	padding-left: 15%;
-	padding-right: 15%;
-	height: 100%;
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
 	text-decoration: none;
 }

css/style.css

@@ -8,14 +8,18 @@ h1, h2, h3, h4, h5, h6, p, a, label, button, input, select, td {
 
 body {
 	min-height: 100vh;
-	max-width: 100vw;
+	width: 100vw;
 	display: grid;
 	grid-template-rows: auto 1fr auto;
 }
 
 main {
-	padding-left: 32px;
-	padding-right: 32px;
+	width: calc(max(50%, 1080px));
+	max-width: 100vw;
+	padding-left: 0;
+	padding-right: 0;
+	margin-left: auto;
+	margin-right: auto;
 }
 
 header {
@@ -37,8 +41,10 @@ nav {
 nav a {
 	text-decoration: none;
 	font-size: larger;
+	opacity: 0.75;
 }
 
 nav a[aria-current="page"] {
-	text-decoration: underline;
+	opacity: 1;
+	font-weight: bold;
 }