further work on mobile layout

adjust size of elements
adjust flex properties
remove background-image from body

style/style.css

@@ -138,6 +138,16 @@ nav {
 	border-image-source: linear-gradient(to bottom, var(--trans-pride-blue-light) 0 20%, var(--trans-pride-pink-light) 20% 40%, var(--trans-pride-white-light) 40% 60%, var(--trans-pride-pink-light) 60% 80%, var(--trans-pride-blue-light) 80%);
 }
 
+section {
+	width: 55vw;
+}
+
+.status {
+	height: 120px;
+	margin-top: 0.5rem;
+	margin-bottom: 0.5rem;
+}
+
 @media (prefers-color-scheme: dark) {
 	:root {
 		--background-color: #240046;
@@ -193,22 +203,39 @@ nav {
 	header {
 		display: none;
 	}
+
 	footer {
 		display: none;
 	}
+
 	nav {
 		display: none;
 	}
+
 	body {
 		display: flex;
+		background-image: none;
 	}
+
 	main {
+		display: flex;
+		justify-content: center;
+		align-items: baseline;
 		height: 90vh;
 		width: 100vw;
+		padding: 0;
+		padding-top: 1.25rem;
+		padding-bottom: 1.25rem;
+	}
+
+	section {
+		width: 95vw;
+	}
+
+	.status {
+		height: auto;
+		margin: 0;
 	}
-}
-section {
-	width: 55vw;
 }
 
 a {
@@ -260,11 +287,7 @@ main section ul li {
 	letter-spacing: .05rem;
 }
 
-.status {
+
-	height: 120px;
-	margin-top: 0.5rem;
-	margin-bottom: 0.5rem;
-}
 
 .status .statuslol_container .statuslol {
 	background: var(--background-color) !important;