up css and nav

style_general.css

@@ -1,70 +1,125 @@
 * {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
 }
 
 body {
-    font-family: Helvetica, "Ubuntu Sans", "Noto Sans", Arial, sans-serif;
-    text-align: left;
-    margin: 0 auto;
-    font-size: 1rem;
-    max-width: 600px;
+  font-family: Helvetica, "Ubuntu Sans", "Noto Sans", Calibri, Arial, sans-serif;
+  text-align: left;
+  margin: 0 auto;
+  font-size: 1.5rem;
+  line-height: 1.5em;
+  max-width: 60ch;
+  color: #000;
+  background: #fff;
 }
 
-h1, h2, h3, h4, h5, h6 {
-    font-family: "Open Sans", "Noto Sans", Times, serif;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: Helvetica, "Ubuntu Sans", "Noto Sans", Calibri, Arial, sans-serif;
+  margin-top: 1em;
+  margin-bottom: 2rem;
+  color: #333;
 }
 
 /* 1. Use a more-intuitive box-sizing model */
-*, *::before, *::after {
+*,
+*::before,
+*::after {
   box-sizing: border-box;
 }
 
-/* 2. Remove default margin */
-* {
-  margin: 0;
-}
-
 body {
-  /* 3. Add accessible line-height */
-  line-height: 1.5;
-  /* 4. Improve text rendering */
+  /* Improve text rendering */
   -webkit-font-smoothing: antialiased;
 }
 
-/* 5. Improve media defaults */
-img, picture, video, canvas, svg {
+/*  Improve media defaults */
+img,
+picture,
+video,
+canvas,
+svg {
   display: block;
+  width: 100%;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
   max-width: 100%;
 }
 
-/* 6. Inherit fonts for form controls */
-input, button, textarea, select {
+/* Inherit fonts for form controls */
+input,
+button,
+textarea,
+select {
   font: inherit;
 }
 
-/* 7. Avoid text overflows */
-p, h1, h2, h3, h4, h5, h6 {
+/* Avoid text overflows */
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   overflow-wrap: break-word;
 }
 
-/* 8. Improve line wrapping */
+/* Improve line wrapping */
 p {
   text-wrap: pretty;
+  margin-top: 1.5rem;
+  margin-bottom: 1rem;
 }
-h1, h2, h3, h4, h5, h6 {
-  text-wrap: balance;
+h1 {
+  font-size: 3.5rem;
 }
 
-/*
-  9. Create a root stacking context
-*/
-#root, #__next {
+h2 {
+  font-size: 2rem;
+}
+
+h3 {
+  font-size: 1.5rem;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  text-wrap: balance;
+  line-height: 1.3em;
+}
+
+#root,
+#__next {
   isolation: isolate;
 }
 
-input, button, textarea, select {
+input,
+button,
+textarea,
+select {
   font: inherit;
 }
 
+ul {
+  padding-left: 4ch;
+  padding-right: 4ch;
+}
+li {
+  margin-bottom: 1em;
+}
+@media (max-width: 20rem) {
+  body {
+    padding: 1rem;
+  }
+}