@import url('//new.webdep.net/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: #00587a;
	--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-icons: #333333;
	--color-icons-active: #aaa;
	--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-heading-font-family: "Alumni Sans", "Cambria", "Ubuntu Condensed", serif;
	--text-heading-font-weight: 300;
	
	--text-menu-font-family: "Oswald", Arial, sans-serif;
	--text-menu-font-family: "Alumni Sans", "Cambria", "Ubuntu Condensed", serif;
	--text-menu-font-weight: 500;
	--text-menu-font-size: 1.5em;
	
	--text-code-font-family: "Roboto Mono", "Courier New", monospace;
	--text-code-font-weight: 400;
	--text-code-font-size: 0.8em;
	
	--size-container-width: 80rem;
}

[data-color-theme="dark"] {
	--color-main-text: #acacac;
	--color-main-link: #00587a;
	--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-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);
}

#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);
}
#page > header > .container {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}
#page > header > .container a {display:block;text-decoration:none;color:var(--color-menu-text);}
#page > header > .container .icons {margin:4px;}
#page > header > .container > div:nth-child(1) {border-right:1px solid var(--color-menu-text);}
#page > header > .container > div:nth-child(1) a {padding-right:2rem;}
#page > header > .container > div:nth-child(2) {display:flex;flex-direction:row;flex-wrap:nowrap;flex-grow:1;}
#page > header > .container > div:nth-child(3) {}
#page > header > .container > div:nth-child(4) {padding-right:32px;}



#page > div {
	flex-grow:1;
	align-self: stretch;
}
#page > div > .container {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch;
	padding-top: 3rem;
	padding-bottom: 2rem;
}
#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);
	width: 100%;
	padding:0.5rem 0;
}
#page > footer > .container {
	max-width: var(--size-container-width);
	margin: 0 auto;
}



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

.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);}

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

#main_menu {
	display:block;
	height:100%;
	display:flex;
	flex-direction:row;
	flex-wrap:nowrap;
	justify-content:flex-start;
	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);
	line-height:24px;
	/*font-variation-settings: "wdth" 50;
	font-stretch: 55%;
	font-variation-settings: "wdth" 55;*/
	font-kerning: normal;
	font-feature-settings: "kern" 1;
}
#main_menu > li {
	display:block;
	align-self:center;
	text-transform:uppercase;
}
/*#main_menu .iconsi {padding-top:0.1rem;}
*/
#main_menu > li > a,
#main_menu > li > .pointer {display:block;padding:0 0 0 1rem;white-space:nowrap;}

#main_menu > li > a:hover,
#main_menu > li > .pointer:hover {color:var(--color-menu-active);fill:red;}
/*#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);
}

article button,
article input {
	border: 1px solid var(--color-menu-text);
	font-family: var(--text-menu-font-family);
	font-weight: var(--text-menu-font-weight);
	font-size:   var(--text-menu-font-size);
	font-size:   var(--text-main-font-size);
	line-height: var(--text-main-line-height);
	text-transform:uppercase;
	padding: 0.5rem;
}
hr {
	border: 1px solid var(--color-menu-text);
	margin: 1rem 0;

}