improved template

style.css

@@ -1,42 +1,159 @@
+/* 
+=================================================
+https://www.joshwcomeau.com/css/custom-css-reset/
+================================================= 
+*/
+
+/*
+  1. Use a more-intuitive box-sizing model.
+*/
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+/*
+    2. Remove default margin
+  */
 * {
-    box-sizing: border-box;
-    font-family: Verdana, serif;
-    color: #424242;
+  margin: 0;
+}
+/*
+    3. Allow percentage-based heights in the application
+  */
+html,
+body {
+  height: 100%;
+}
+/*
+    Typographic tweaks!
+    4. Add accessible line-height
+    5. Improve text rendering
+  */
+body {
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+/*
+    6. Improve media defaults
+  */
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+/*
+    7. Remove built-in form typography styles
+  */
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+/*
+    8. Avoid text overflows
+  */
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  overflow-wrap: break-word;
+}
+/*
+    9. Create a root stacking context
+  */
+#root,
+#__next {
+  isolation: isolate;
 }
 
-html, body {
-    margin: 0;
-    padding: 0;
-    height: 100vh;
-    max-width: 100%;
+/* 
+=================================================
+CUSTOM STYLE
+================================================= 
+*/
+
+:root {
+  /* https://materialui.co/colors/ */
+  --hue-primary: 65.52;
+  --sat-primary: 69.96%;
+  --background: hsl(var(--hue-primary), var(--sat-primary), 96.08%);
+  --background-primary: hsl(var(--hue-primary), var(--sat-primary), 93.33%);
+  --color-primary: hsl(var(--hue-primary), var(--sat-primary), 50%);
+  --text-primary: hsl(var(--hue-primary), var(--sat-primary), 25%);
+  --text-secondary: hsl(var(--hue-primary), var(--sat-primary), 30%);
+}
+
+/* 
+=================================================
+https://blog.koley.in/2019/339-bytes-of-responsive-css
+https://www.swyx.io/css-100-bytes
+https://gist.github.com/JoeyBurzynski/617fb6201335779f8424ad9528b72c41
+================================================= 
+*/
+
+* {
+  box-sizing: border-box;
+  font-family: Verdana, serif;
+  color: var(--text-primary);
+}
+
+html,
+body {
+  padding: 0;
+  max-width: 100%;
 }
 
 body {
-    background-color: #F5F5F5;
+  background-color: var(--background);
 }
 
 main {
-    padding: 1.5rem;
-    margin: auto;
-    background-color: #EEEEEE;
-    min-height: 100%;
+  padding: 1.5rem;
+  margin: auto;
+  background-color: var(--background-primary);
+  min-height: 100%;
 }
 
 h1 {
-    margin-bottom: .5em;
+  margin-bottom: 0.5em;
 }
 
-table{
-    border-collapse: collapse;
-    width:100%;
-    font-size: .9em;
+table {
+  border-collapse: collapse;
+  width: 100%;
+  font-size: 0.9em;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 1.5em 0 0.5em;
+}
+
+p,
+ul,
+ol {
+  margin-bottom: 2em;
+  color: var(--text-secondary);
+  font-family: sans-serif;
 }
 
 @media only screen and (min-width: 768px) {
-    main {
-        max-width: 42rem;
-    }
-    table{
-        font-size:inherit;
-    }
+  main {
+    max-width: 42rem;
+  }
+  table {
+    font-size: inherit;
+  }
 }