Refactor CSS styles

Author: JeelRajodiya

app/page.module.css

@@ -1,51 +1,51 @@
 .main {
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-	gap: 64px;
-	justify-content: center;
-	align-items: center;
+  display: flex;
+  flex-direction: column;
+  height: inherit;
+  gap: 64px;
+  justify-content: center;
+  align-items: center;
 }
 
 .wrapper {
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-	gap: 64px;
-	justify-content: center;
-	align-items: center;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  gap: 64px;
+  justify-content: center;
+  align-items: center;
 }
 .title {
-	font-size: xx-large;
-	font-weight: bold;
-	display: flex;
-	flex-direction: column;
-	gap: 0px;
+  font-size: xx-large;
+  font-weight: bold;
+  display: flex;
+  flex-direction: column;
+  gap: 0px;
 }
 
 .title > div {
-	line-height: 90%;
+  line-height: 90%;
 }
 .iconAndTitle {
-	display: flex;
-	flex-direction: row;
+  display: flex;
+  flex-direction: row;
 
-	gap: 8px;
-	justify-content: center;
-	align-items: center;
+  gap: 8px;
+  justify-content: center;
+  align-items: center;
 }
 .subtitle {
-	font-size: large;
-	font-weight: bold;
-	display: flex;
-	flex-direction: column;
-	gap: 0px;
+  font-size: large;
+  font-weight: bold;
+  display: flex;
+  flex-direction: column;
+  gap: 0px;
 }
 
 .subtitleWrapper {
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-	justify-content: center;
-	align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  justify-content: center;
+  align-items: center;
 }

app/page.tsx

@@ -3,28 +3,26 @@ import styles from "./page.module.css";
 import JsonIcon from "@/public/icons/json-schema-blue.png";
 
 export default function Home() {
-	return (
-		<div className={styles.main}>
-			<div className={styles.wrapper}>
-				<div className={styles.iconAndTitle}>
-					<img
-						alt="logo"
-						src={JsonIcon.src}
-						style={{ width: "64px", height: "64px" }}
-					/>
-					<div className={styles.title}>
-						<div>Tour of</div>
-						<div>JSON</div>
-						<div>Schema</div>
-					</div>
-				</div>
-				<div className={styles.subtitleWrapper}>
-					<div className={styles.subtitle}>
-						Learn JSON Schema by Examples.
-					</div>
-					Work in progress.
-				</div>
-			</div>
-		</div>
-	);
+  return (
+    <div className={styles.main}>
+      <div className={styles.wrapper}>
+        <div className={styles.iconAndTitle}>
+          <img
+            alt="logo"
+            src={JsonIcon.src}
+            style={{ width: "64px", height: "64px" }}
+          />
+          <div className={styles.title}>
+            <div>Tour of</div>
+            <div>JSON</div>
+            <div>Schema</div>
+          </div>
+        </div>
+        <div className={styles.subtitleWrapper}>
+          <div className={styles.subtitle}>Learn JSON Schema by Examples.</div>
+          Work in progress ...
+        </div>
+      </div>
+    </div>
+  );
 }