/*---------------------------------------------*/
/*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 {
	display: flex;
	flex-direction: column;
}
body * {
	display: flex;
	flex-direction: column;
	margin: var(--gap-unit) 0px;
}

/*---------------------------------------------*/
/*DESIGN KEYWORDS*/
.vertical {
	display: flex;
	flex-direction: column;
}
.vertical > * {
	margin: var(--gap-unit) 0px;
}
.horizontal {
	display: flex;
	flex-direction: row;
}
.horizontal > * {
	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;
	text-align: center;
}