fix light dark mode

src/App.jsx

@@ -121,8 +121,8 @@ function App() {
 					<div style={{ padding: "8px 0", fontSize: "1.7rem" }}>
 						Output Examples
 					</div>
-					<img src={Demo0} />
+					<img src={Demo0} style={{ width: "100%" }} />
-					<img src={Demo1} />
+					<img src={Demo1} style={{ width: "100%" }} />
 				</div>
 			</div>
 		</div>

src/index.css

@@ -16,6 +16,16 @@
 	-webkit-text-size-adjust: 100%;
 }
 
+@media (prefers-color-scheme: light) {
+	:root {
+		color: #111113;
+		background-color: #ffffff;
+	}
+	a:hover {
+		color: #747bff;
+	}
+}
+
 * {
 	box-sizing: border-box;
 	print-color-adjust: exact;
@@ -33,7 +43,7 @@ a:hover {
 
 body {
 	margin: 0;
-	min-width: 320px;
+	min-width: 700px;
 	min-height: 100vh;
 }
 
@@ -61,23 +71,6 @@ button:focus-visible {
 	outline: 4px auto -webkit-focus-ring-color;
 }
 
-@media (prefers-color-scheme: light) {
-	:root {
-		color: #213547;
-		background-color: #ffffff;
-	}
-	a:hover {
-		color: #747bff;
-	}
-	button {
-		background-color: #f9f9f9;
-	}
-}
-
-#root {
-	color: #111113;
-}
-
 .body {
 	display: flex;
 	flex-direction: column;