texts

styles/globals.scss

@@ -3,26 +3,62 @@
 @import "typography.scss";
 
 * {
-	box-sizing: border-box;
-	padding: 0;
-	margin: 0;
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
 }
 
 *,
 :after,
 :before {
-	box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 html,
 body {
-	max-width: 100vw;
-	background-color: var(--color-background-body);
-	min-height: 100vh;
-	display: flex;
-	flex-direction: column;
-	main {
-		width: 100%;
-		flex: 1;
-	}
+  max-width: 100vw;
+  background-color: var(--color-background-body);
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  main {
+    width: 100%;
+    flex: 1;
+  }
+}
+
+.flex-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.flex-column {
+  display: flex;
+  flex-direction: column;
+}
+
+.container-text {
+  padding: 0 120px;
+  text-align: left;
+
+  p,
+  li,
+  ul,
+  ol {
+    padding-left: 2ch;
+  }
+  h1,
+  h2 {
+    padding-top: 60px;
+    padding-bottom: 10px;
+  }
+
+  h3,
+  h4,
+  h5,
+  h6 {
+    padding-top: 20px;
+    padding-bottom: 10px;
+  }
 }

styles/typography.scss

@@ -16,34 +16,37 @@ body {
 }
 
 /* Headings */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: bold;
+  color: var(--color-font-headline);
+}
 h1 {
   font-size: 2rem;
-  font-weight: bold;
 }
 
 h2 {
   font-size: 1.7rem;
-  font-weight: bold;
 }
 
 h3 {
-  font-size: 1.5rem;
-  font-weight: bold;
+  font-size: 1.4rem;
 }
 
 h4 {
-  font-size: 1.4rem;
-  font-weight: bold;
+  font-size: 1.3rem;
 }
 
 h5 {
   font-size: 1.2rem;
-  font-weight: bold;
 }
 
 h6 {
   font-size: 1.1rem;
-  font-weight: bold;
 }
 
 /* General Texts */

styles/variables_colors.scss

@@ -7,8 +7,9 @@
   /* Colors: General */
   --color-background-body: #181a1b;
   --color-background-secondary: #2c3032;
-  --color-font: #ffffff;
+  --color-font: #ebebeb;
   --color-font-muted: #929292;
+  --color-font-headline: #fff;
   --color-shadow-nav: #00000033;
 
   --color-danger: #cf000f;
@@ -43,6 +44,7 @@
   .theme-light {
     --color-background-body: #ffffff;
     --color-font: #000000;
+    --color-font-headline: #000;
     --color-shadow-nav: #000c2b0d;
 
     --color-overlay-mix: var(--color-font);