Add css reset

angular.json

@@ -26,9 +26,7 @@
 								"input": "public"
 							}
 						],
-            "styles": [
+						"styles": ["src/styles.scss"]
-              "src/styles.scss"
-            ]
 					},
 					"configurations": {
 						"production": {
@@ -80,9 +78,7 @@
 								"input": "public"
 							}
 						],
-            "styles": [
+						"styles": ["src/styles.scss"]
-              "src/styles.scss"
-            ]
 					}
 				}
 			}

src/app/app.html

@@ -0,0 +1,3 @@
+<main>
+	<h1>Hello, world!</h1>
+</main>

src/app/app.scss

@@ -0,0 +1,6 @@
+:host {
+	align-items: center;;
+	display: grid;
+	justify-items: center;
+	min-height: 100vh;
+}

src/styles.scss

@@ -1 +1,5 @@
-/* You can add global styles to this file, and also import other style files */
+@import url(styles/reset.scss);
+
+body {
+	font-size: calc(15px + 0.390625vw);
+}

src/styles/reset.scss

@@ -0,0 +1,54 @@
+/* 1. Use a more-intuitive box-sizing model */
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+/* 2. Remove default margin */
+* {
+  margin: 0;
+}
+
+/* 3. Enable keyword animations */
+@media (prefers-reduced-motion: no-preference) {
+  html {
+    interpolate-size: allow-keywords;
+  }
+}
+
+body {
+  /* 4. Add accessible line-height */
+  line-height: 1.5;
+  /* 5. Improve text rendering */
+  -webkit-font-smoothing: antialiased;
+}
+
+/* 6. Improve media defaults */
+img, picture, video, canvas, svg {
+  display: block;
+  max-width: 100%;
+}
+
+/* 7. Inherit fonts for form controls */
+input, button, textarea, select {
+  font: inherit;
+}
+
+/* 8. Avoid text overflows */
+p, h1, h2, h3, h4, h5, h6 {
+  overflow-wrap: break-word;
+}
+
+/* 9. Improve line wrapping */
+p {
+  text-wrap: pretty;
+}
+h1, h2, h3, h4, h5, h6 {
+  text-wrap: balance;
+}
+
+/*
+  10. Create a root stacking context
+*/
+#root, #__next {
+  isolation: isolate;
+}