ok rem et asides

styles/global.css

@@ -1,38 +1,78 @@
-/*/////////////////////////////////////////////*/
+/*---------------------------------------------*/
 /*GLOBAL VARIABLE*/
 :root {
+	--gap-unit: 10px;
 }
 
+
+html {
+	scroll-behavior: smooth;
+	/*default font-size for rem*/
+	font-size: 10px;
+}
+/*borders on mains elements of pages for debugging*/
+body main, body aside, body nav {
+	/*
+	border: 1px solid red;
+	*/
+}
+body {
+	max-width: 1500px;
+}
+body nav {
+}
+body main {
+}
+body aside {
+}
+/*asides elements only have width if they have a child*/
+body aside *:first-child {
+	width: 200px;
+}
+body aside > * {
+	margin: var(--gap-unit);
+}
+body aside.page_content {
+}
+body aside.relative_content {
+}
+
+
 /*elements are flex, vertical, and to the left, by default*/
-body *:not(script) {
+body {
 	display: flex;
 	flex-direction: column;
-	margin: 20px 0px;
 }
-/*default*/
+body * {
+	display: flex;
+	flex-direction: column;
+	margin: var(--gap-unit) 0px;
+}
+
+/*---------------------------------------------*/
+/*DESIGN KEYWORDS*/
 .vertical {
 	display: flex;
 	flex-direction: column;
 }
 .vertical > * {
-	margin: 20px 0px;
+	margin: var(--gap-unit) 0px;
 }
-.left > * {
-	margin-left: 0px;
-}
-/*special*/
 .horizontal {
 	display: flex;
 	flex-direction: row;
 }
 .horizontal > * {
-	margin: 0px 20px;
+	margin: 0px var(--gap-unit);
 }
 .right {
 	margin-right: 0px;
 	margin-left: auto;
 	text-align: right;
 }
+.left > * {
+	margin-left: 0px;
+}
 .center {
 	margin-right: auto;
 	margin-left: auto;

styles/litterall.css

@@ -1,4 +1,4 @@
-.aside_left {
+.page_nav {
 	min-width: 200px;
 	padding: 0px 20px 0px 0px;
 	border-right: 1px solid lightgray;

styles/style.css

@@ -35,10 +35,6 @@ html {
 	scroll-behavior: smooth;
 	font-size: 10px;
 }
-/*to keep a blank space between the content and the top of the page*/
-body {
-	margin-top: 100px;
-}
 main {
 	min-height: calc(100vh - 70px);
 }

styles/text.css

@@ -57,7 +57,7 @@ h1 {
 h2 {
 	font-size: 2em;
 }
-.mini_text {
+small {
 	font-size: 0.8em;
 }
 /*specials settings*/
@@ -82,4 +82,16 @@ p br, h1 br, h2 br {
 h1 {
 	margin-bottom: 20px;
 }
-
+/*
+	<b> - Bold text
+	<strong> - Important text
+	<i> - Italic text
+	<em> - Emphasized text
+	<mark> - Marked text
+	<small> - Smaller text
+	<del> - Deleted text
+	<ins> - Inserted text
+	<sub> - Subscript text
+	<sup> - Superscript tex
+	<code> - Computer code
+*/