/*---------------------------------------------*/
/*SKELETON*/
/*the position, size, and orientation of all elements without style or spaces*/
body, body * {
	display: flex;
	/*by default all elements are verticals*/
	flex-direction: column;
}
html {
	scroll-behavior: smooth;
	/*default font-size for rem*/
	font-size: var(--base-font-size);
}
body {
	background-color: var(--color-back-base);
}
body nav {
	flex-direction: row;
	/*we have to set the height to use the height % for childs elements*/
	height: var(--nav-height);
	background-color: var(--color-back-base);
	z-index: 10;
}
body .container_main {
	flex-direction: row;
	/*the page is designed for a maximum screen*/
	max-width: var(--max-screen);
}
body aside.page_content {
	top: calc(var(--nav-height) + 1px);
	height: calc(100vh - var(--nav-height) - 1px);
}

/*MAIN*/
body main {
	padding: calc(var(--gap-unit) / 2);
}
body main > * {
	margin: var(--gap-unit) 0px;
}
body main h1 {
	padding: 70px 0px;
	border-bottom: 1px solid var(--color-lines-main);
}
body main h2 {
	padding: 10px 0px;
	border-bottom: 1px solid var(--color-lines-main);
}

/*TITLE*/
body main .page_title {
	position: relative;
}
body main .page_title .date {
	position: absolute;
	bottom: 0px;
	left: 0px;
}

/*ASIDE RIGHT RELATIVES*/
/* aside right is for links to relatives content*/
body aside.relative_content {
	padding: calc(var(--gap-unit) / 2);
}
/* asides elements only have width if they have a child*/
body aside.relative_content *:first-child {
	width: var(--aside-right-width);
}
body aside.relative_content .relative_box {
	margin: var(--aside-margin);
	padding: var(--gap-unit);
	width: fit-content;
	border: 1px solid var(--color-lines-aside-r);
}
body aside.relative_content .box_name {
	border-bottom: 1px solid var(--color-lines-aside-r);
	padding-bottom: var(--gap-unit);
}
body aside.relative_content .relative_box > * {
	margin-bottom: var(--gap-unit);
}

/*FOOTER*/
body footer.page_footer {
	height: 100px;
	border-top: 1px solid var(--color-lines-nav);
}


/*---------------------------------------------*/
/*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;
}
.sticky {
	position: -webkit-sticky; /*safari*/
	position: sticky;
	top: 0;
}