/*---------------------------------------------*/
/*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);
}
nav {
	flex-direction: row;
	/*we have to set the height to use the height % for childs elements*/
	height: calc(var(--nav-height) + 1px);
	z-index: 10;
	position: relative;
}
.container_main {
	flex-direction: row;
}
.container_main > * {
	margin: 0px auto;
}
aside.aside_left {
	top: calc(var(--nav-height) + 1px);
	height: calc(100vh - var(--nav-height) - 1px);
	background-color: var(--color-back-base);
}
main {
	background-color: var(--color-back-base);
	min-height: calc(100vh - 1px - var(--nav-height) - var(--footer-height));
}
aside.aside_right {
	background-color: var(--color-back-base);
}
footer {
	height: var(--footer-height);
}
footer iframe {
	width: 100%;
	height: 100%;
}


/*---------------------------------------------*/
/*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;
}

/* RESPONSIVE DESIGNi */

@media only screen and (max-width: 1000px) {
	html {
		font-size: var(--small-font-size);
	}
	.container_main {
		flex-direction: column;
	}
	.container_main > * {
		margin: 20px;
	}
	.aside_left {
		position: relative;
	}
	/*NAVBAR*/
	nav.navbar {
		flex-direction: column;
		height: auto;
	}
	.navbar .nav_left a {
		display: none;
		display: flex;
		margin-left: 0px;
		width: 100%;
	}
	.navbar .nav_left a p {
		margin-left: 20px;
	}
	.navbar .nav_right {
		display: none;
		display: flex;
	}
	.navbar .nav_left a#nav_logo {
		display: flex;
		margin-bottom: 40px;
		width: auto;
	}
	.navbar .nav_left {
		flex-direction: column;
		height: auto;
	}
	.navbar .nav_right {
		margin: 20px 0px;
	}
	/*burger menu*/
	nav.navbar::before {
		content: "";
		position: absolute;
		right: 20px;
		top: 10px;
		width: 26px;
		height: 14px;
		border-top: 2px solid lightgrey;
		border-bottom: 2px solid lightgrey;
		cursor: pointer;
	}
	nav.navbar::after {
		content: "";
		position: absolute;
		right: 20px;
		top: 18px;
		width: 26px;
		height: 2px;
		border-top: 2px solid lightgrey;
		pointer-events: none;
	}
	/*MAIN*/
	main {
		max-width: 90%;
	}
}