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;