@import url('/assets/fonts/fonts.css');

* {
	margin: 0;
	padding: 0;
	border: none;
	box-sizing: border-box;
	font: inherit;
	font-size: 100%;
	vertical-align: middle;
	background: none;
}

:root {
	--color-main-text: #333333;
	--color-main-link: #2088aa;
	--color-main-header: #101010;
	--color-main-active: #aaa;

	--color-main-bg: #ffffff;
	--color-menu-text: #333333;
	--color-menu-bg: #ffffff;
	--color-menu-active: #aaa;

	--color-submenu-text: #333333;
	--color-submenu-bg: #f6f6f6;
	--color-submenu-active: #333333;
	--color-submenu-bg-active: #fff;

	--color-icons: #333333;
	--color-icons-active: #aaa;

	--color-footer-text: #fafafa;
	--color-footer-bg: #000000;

	--text-main-font-family: "Nunito", Verdana, "DejaVu Sans", sans-serif;
	--text-main-font-weight: 400;
	--text-main-font-size: 1.2em;
	--text-main-line-height: 1.3em;

	--text-compact-font-family: "Nunito", Verdana, "DejaVu Sans", sans-serif;
	--text-compact-font-weight: 400;
	--text-compact-font-size: 1em;
	--text-compact-line-height: 1.3em;

	--text-small-font-family: "Nunito", Verdana, "DejaVu Sans", sans-serif;
	--text-small-font-weight: 400;
	--text-small-font-size: 0.8em;
	--text-small-line-height: 1.3em;

	--text-heading-font-family: "Alumni Sans", "Cambria", "Ubuntu Condensed", serif;
	--text-heading-font-weight: 300;

	--text-menu-font-family: "Alumni Sans", "Cambria", "Ubuntu Condensed", serif;
	--text-menu-font-weight: 500;
	--text-menu-font-size: 1.5em;
	--text-menu-line-height: 1.3em;

	--head-submenu-font-family: "Alumni Sans", "Cambria", "Ubuntu Condensed", serif;
	--head-submenu-font-weight: 600;
	--head-submenu-font-size: 1.3em;
	--head-submenu-line-height: 1em;


	--text-code-font-family: "Roboto Mono", "Courier New", monospace;
	--text-code-font-weight: 400;
	--text-code-font-size: 0.8em;

	--size-container-width: 80rem;
	--menu-main-height: 50px;
	--menu-main-gap: 13px;
}

[data-color-theme="dark"] {
	--color-main-text: #aeaeae;
	--color-main-link: #4088cf;
	--color-main-header: #fafafa;
	--color-main-active: #ffffff;
	--color-main-bg: #303030;
	--color-menu-text: #acacac;
	--color-menu-bg: #303030;
	--color-menu-active: #ffffff;

	--color-submenu-text: #acacac;
	--color-submenu-bg: #404040;
	--color-submenu-active: #ffffff;
	--color-submenu-bg-active: #454545;

	--color-icons: #acacac;
	--color-icons-active: #ffffff;
	--color-footer-bg: #000000;

	--text-main-font-weight: 300;
	--text-menu-font-weight: 300;
	--text-heading-font-weight: 200;
	--text-code-font-weight: 300;
}

body {
	font-weight: var(--text-main-font-weight);
	font-family: var(--text-main-font-family);
	color: var(--color-main-text);
	background-color: var(--color-main-bg);
	position: relative;
}

#page {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: space-between;
	min-height: 100vh;
}

.container {
	max-width: var(--size-container-width);
	margin: 0 auto;
	padding: 0 3rem;
	max-width: var(--size-container-width);
}

#page>header {
	background: var(--color-menu-bg);
	color: var(--color-menu-text);
	position: relative;
}

#page>header>.container {
	display: flex;
	align-items: stretch;
	height: var(--menu-main-height);
}

#page>header>.container a,
#page>header>.container span {
	display: block;
	text-decoration: none;
	color: var(--color-menu-text);
}

#page>header>.container>div {
	z-index: 101;
}

#page>header>.container>div:nth-child(2) {
	display: flex;
	flex-grow: 1;
}

#page>header>.container>div:nth-child(4) {
	padding-right: 0;
	display: flex;
}


#page>header>.container>div>a,
#page>header>.container>div>button {
	height: var(--menu-main-height);
}

#page>header>.container>div>button {
	padding: 0 0.5rem;
}

#page>header>.container>div>a {
	padding-top: var(--menu-main-gap);
}

#logo {
	z-index: 99;
}

#logo>a {
	display: block;
	height: 100%;
	padding: 0.6rem 3rem 0 0;
}

/******************************************************************************
 * Main menu
 *****************************************************************************/
#main_menu {
	display: flex;
	flex-grow: 1;

	user-select: none;
	font-family: var(--text-menu-font-family);
	font-weight: var(--text-menu-font-weight);
	font-size: var(--text-menu-font-size);
	font-kerning: normal;
	font-feature-settings: "kern" 1;
}

#main_menu>li {
	display: block;
	align-self: stretch;
	text-transform: uppercase;
	padding: 0 0.5rem 0 1rem;
	border-color: var(--color-menu-bg);
	border-top: 5px solid var(--color-menu-bg);
	border-bottom: 3px solid var(--color-menu-bg);
}

#main_menu>li:nth-child(1) {
	border-left: 1px solid var(--color-menu-text);
}

#main_menu>li.active {
	background-color: var(--color-submenu-bg);
	border-color: var(--color-submenu-bg);
	border-top-color: var(--color-main-link);
}

/*#main_menu .iconsi {padding-top:0.1rem;}
*/
#main_menu>li>a,
#main_menu>li>.pointer {
	display: block;
	height: 100%;
	white-space: nowrap;
	padding-top: 0.35rem;
}

#main_menu>li>a:hover,
#main_menu>li>.pointer:hover {
	color: var(--color-menu-active);
}

.menuArrow {
	transform: rotate(0deg);
}

.menuArrow.active {
	transform: rotate(180deg);
}


#search_bar {
	padding-top: var(--menu-main-gap);
	display: flex;
}

#search_bar>div:nth-child(1) {
	display: none;
	flex-grow: 1;
}

/******************************************************************************
 * Submenu
 *****************************************************************************/
#sub_menu .subpanel {
	position: absolute;
	z-index: 99;
	padding: 1rem 0 1rem 0;
	display: none;
	flex-direction: row;
	background-color: var(--color-submenu-bg);
	width: 100%;
	box-shadow: 0px 10px 13px -7px #000000, 14px 5px 36px 4px rgba(0, 0, 0, 0);
}

#sub_menu .subpanel.active {
	display: flex;
}

#sub_menu .container {
	display: grid;
	grid-template-columns: 13rem 1fr;
	grid-gap: 0 0;
	padding: 0 3rem;
}

#sub_menu .container>div:nth-child(1) {
	padding: 1.9rem 2rem 0 0;
	border-right: 1px dotted var(--color-menu-text);
	text-align: right;
	font-size: 1.2em;
}

#sub_menu .container>div:nth-child(2) {
	padding: 1.5rem 2rem 1rem 2rem;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: auto;
	grid-gap: 0.5rem;
}

#sub_menu .container>div:nth-child(2)>a {
	display: block;
	text-decoration: none;
	color: var(--color-menu-text);
	border-radius: 0.25rem;
	border: 1px solid var(--color-submenu-bg);
	padding: 0.5rem;
}

#sub_menu .container>div:nth-child(2)>a:hover {
	color: var(--color-submenu-active);
	background: var(--color-submenu-bg-active);
	border-bottom: 1px dotted var(--color-main-link);
}

#sub_menu .container>div:nth-child(2)>a>h5 {
	font-family: var(--text-compact-font-family);
	font-size: var(--text-compact-font-size);
	font-weight: bold;
	line-height: var(--text-compact-line-height);
	text-transform: none;
	color: var(--color-main-link);
}

#sub_menu>div>div:nth-child(2)>a>div {
	font-family: var(--text-compact-font-family);
	font-size: var(--text-compact-font-size);
	font-weight: var(--text-compact-font-weight);
	line-height: var(--text-compact-line-height);
	font-kerning: normal;
	font-feature-settings: "kern" 1;
}

/******************************************************************************
 *
 *****************************************************************************/

#shadow {
	position: absolute;
	z-index: 98;
	align-self: stretch;
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: none;
	pointer-events: none;
	backdrop-filter: blur(0.5rem) grayscale(100%);
}

#shadow.active {
	display: block;
	pointer-events: auto;
}

/******************************************************************************
 *
 *****************************************************************************/
#page>div {
	flex-grow: 1;
	align-self: stretch;
	position: relative;
}

#page>div>.container {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch;
	padding-top: 3rem;
	padding-bottom: 5rem;
}

#page>div>.container>article {
	overflow: hidden;
	max-width: 100%;
	flex-grow: 1;
	align-self: stretch;

	font-family: var(--text-main-font-family);
	font-weight: var(--text-main-font-weight);
	font-size: var(--text-main-font-size);
	line-height: var(--text-main-line-height);
}

article strong {
	font-weight: 500;
}

article i {
	font-style: italic;
}

/******************************************************************************
 *
 *****************************************************************************/

#page>footer {
	background: var(--color-footer-bg);
	color: var(--color-footer-text);
	width: 100%;
	padding: 2rem 0;
}

#page>footer>.container {
	max-width: var(--size-container-width);
	margin: 0 auto;
	padding: 2rem 3rem;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
	font-family: var(--text-compact-font-family);
	font-size: var(--text-compact-font-size);
	font-weight: var(--text-compact-font-weight);
	line-height: 1.8;
}

#page>footer>.container h5 {
	font-size: var(--text-small-font-size);
	font-family: var(--text-compact-font-family);
	font-size: var(--text-compact-font-size);
	font-weight: 700;
	line-height: 1em;
	padding-bottom: 1rem;
}

#page>footer>.container a {
	display: block;
	color: var(--color-footer-text);

}

#page>footer>.container a:hover {
	text-decoration: underline;
}

.btmcopy {
	text-align: center;
}

/******************************************************************************
 *
 *****************************************************************************/

#w_logo,
.icons {
	display: block;
	fill: var(--color-icons);
}

#w_logo_b {
	display: inline-block;
	fill: var(--color-icons);
	margin-bottom: 1rem;
}

.iconsi {
	display: inline;
	fill: var(--color-icons);
}

a:hover>#w_logo,
a:hover>.icons,
a:hover>.iconsi,
.pointer:hover>.icons,
.pointer:hover>.iconsi {
	fill: var(--color-icons-active);
}



/*#main_menu > li > .pointer:hover {color:var(--color-menu-active);fill:var(--color-menu-active)!important;}*/

h1,
h2,
h3,
h4,
h5 {
	font-family: var(--text-heading-font-family);
	font-weight: var(--text-heading-font-weight);
	font-size: 2.3em;
	line-height: 0.8em;
	padding: 0 0 .5em 0;
	text-transform: uppercase;
	font-kerning: normal;
	font-feature-settings: "kern" 1;
}

h2 {
	text-transform: none;
}

h3 {
	font-size: 2em;
}

.pointer {
	cursor: pointer;
}

pre {
	font-weight: var(--text-code-font-weight);
	font-family: var(--text-code-font-family);
	font-size: var(--text-code-font-size);
}

a {
	color: var(--color-main-link);
	background-color: inherit;
	text-decoration: none;
}

#page>div a:hover {
	/*border-bottom: 1px dotted var(--color-main-link);*/
	color: var(--color-main-bg);
	background-color: var(--color-main-link);
}