/*---------------------------------------------*/
/*GLOBAL VARIABLE*/
:root {
	--gap-unit: 10px;
	--max-screen: 1500px;
	--base-font-size: 10px;
}


/*DEBUG*/
/* borders on mains elements of pages for debugging*/
body > *, body > .container_main > * {
	border: 1px solid red;
}

/*---------------------------------------------*/
/*global settings*/
/*
	 ---------------------    --------------------- 
	'         NAV         '  '         NAV         '
	'---------------------'  '---------------------'
	'        TITLE        '  '        TITLE        '
	'---------------------'  '---------------------'
	'  PATH > TO > PAGES  '  '  PATH > TO > PAGES  '
	'---------------------'  '---------------------'
	' ------------------- '  ' S '      C      ' A '
	''     CONTAINER     ''  ' U '      O      ' S '
	'' ---  -------  --- ''  ' M '      N      ' I '
	''' S ''   C   '' A '''  ' M '      T      ' D '
	''' U ''   O   '' S '''  ' A '      E      ' E '
	''' M ''   N   '' I '''  ' R '      N      ' S '
	''' M ''   T   '' D '''  ' Y '      T      '   '
	''' A ''   E   '' E '''  '---------------------'
	''' R ''   N   '' S '''  '        FOOTER       '
	''' Y ''   T   ''   '''  '---------------------'
	'''---''-------''---'''
	''------------------'''
	'---------------------'
	'        FOOTER       '
	'---------------------'

	navbar			->	nav
	title			->	.page_title
	path to pages	->	.page_path
	container		->	.container_main
		summary		->	aside.page_content
		main		->	main
		asides		->	aside.relative_content
	footer			->
*/

/*ALL*/
/* by default all elements are verticals*/
body, body * {
	display: flex;
	flex-direction: column;
}
body > *:not(.container_main), aside, main {
	padding: calc(var(--gap-unit) / 2);
}

/*HTML*/
html {
	scroll-behavior: smooth;
	/*default font-size for rem*/
	font-size: var(--base-font-size);
}

/*BODY*/
/* the page is designed for a maximum screen*/
body {
	max-width: var(--max-screen);
	margin: auto;
}

/*NAVBAR*/
body nav {
	flex-direction: row;
	height: 30px;
}
body nav > * {
	margin: auto;
	padding: 0px 10px;
}

/*TITLE*/
body .page_title {
}

/*PATH-TO-PAGES*/
body .page_path {
}

/*CONTAINER*/
body .container_main {
	flex-direction: row;
}

/*MAIN*/
body main {
}
body main > * {
	margin: var(--gap-unit) 0px;
}

/*ASIDES*/
body aside {
}
/* asides elements only have width if they have a child*/
body aside *:first-child {
	width: 200px;
}
/* aside left is for page table of content */
body aside.page_content {
}
/* aside right is for links to relatives content*/
body aside.relative_content {
}

/*FOOTER*/
body footer {
}


/*---------------------------------------------*/
/*DESIGN KEYWORDS*/
/* contains elements oriented vertically (default) or horizontally*/
.vertical {
	flex-direction: column;
}
/* horizontal is only in web version, it becomes vertical in mobile design*/
.horizontal {
	flex-direction: row;
}
/* self position of elements to the left, the right, or the center of their container*/
.right {
	margin-right: 0px;
	margin-left: auto;
	text-align: right;
}
.left > * {
	margin-left: 0px;
}
.center {
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}