

/* ==== PAGE ==== */

html {
	font-size: var(--base-font-size);
}

body {
	padding: 0;
	margin: 0;
	font-family: var(--main-font);
	color: var(--text-color);
	line-height: var(--base-line-height);
	background-color: var(--main-bg);
}

div#wrap-root {
	position: relative;
	z-index: 100;
	overflow: hidden;
}

header {
	color: var(--header-color);
	/* background-color: var(--header-bg); */
	/* position: relative; */
	position: relative;
	z-index: 1000;
	/* overflow: hidden; */
	height: 6rem;
	box-shadow: 0px 3px 3px var(--main-shadow-color);
}

/* ==== SECTION & ARTICLE ==== */

#wrap-main article {
	position: relative; 
	z-index: 100;
	
}
#wrap-main article.padded {
	padding: 2rem;
}
#wrap-main section {
	background-color: var(--section-bg);
	color: var(--section-color);
	margin: auto;
	/* overflow: hidden; */
	/* width: var(--main-sect-width); */
	padding: 2rem 2rem;
	
	/* position: flow-root;  */
	position: relative; 
	z-index: 100;
}


/* ==== ELEMENTS: SECTION & ARTICLE ==== */

section ul, section ol {
	margin-left: 2em;
}


/* ==== HEADS: GLOBAAL ==== */

header h1 {
	color: var(--h1-hea-color);
	text-align: center;
	font-size: 3.5rem;
	line-height: 5.5rem;
	padding: .5rem 0;
	letter-spacing: .3em;
	text-transform: uppercase;
}


/* ==== HEADS: ARTICLE ==== */


article h1, article h2, article h3, article h4, article h5  {
	font-family: var(--med-font);
	/* font-weight: normal; */
	padding: .25em;
	text-align: center;
	border-radius: .2rem;
	position: relative;
	/* z-index: 500; */
}

article h1 {
	color: var(--h1-art-color);
	font-size: 1.5rem;
	background-color: var(--h1-art-bg);
	padding: .6em;
	border-bottom: 1px solid var(--h-border-color);
	box-shadow: 0px 3px 3px var(--main-shadow-color);
	position: relative;
	/* z-index: 500; */
}

article h2 {
	color: var(--h2-art-color);
	font-size: 1.2rem;
	background-color: var(--h2-art-bg);
	box-shadow: 0px 3px 3px var(--main-shadow-color);
}

article h2:empty {
	display: none;
}

/* ==== HEADS: SECTION HEADS ==== */

section h2, section h3, section h4, section h5 {
	color: var(--h2-sec-color);
	background-color: var(--h2-sec-bg);
	border-top: 1px solid var(--h-border-color);
	border-bottom: 1px solid var(--h-border-color);
	margin: 2rem 0 1rem;
}
section h2 {
	margin: 4rem -2rem 2rem;
	padding: .25em 2.5rem;
	border-radius: 0;
}

section h3 {
	font-size: 1.1rem;
	/* text-align: center; */
	color: var(--h3-sec-color);
	background-color: var(--h3-sec-bg);
	margin: 3rem 0 1rem;
	padding: .3em;
}

section h4 {
	font-size: 1rem;
	color: var(--h4-sec-color);
	background-color: var(--h4-sec-bg);
}
section h5 {
	border-top: 0;
	margin: .5rem 0 1rem 1rem;
	font-size: 1rem;
	color: var(--h5-sec-color);
	background-color: var(--h5-sec-bg);
}

section > h2:first-child, section > h3:first-child, section > form:first-child, section > ul:first-child, section > nav:first-child {
	margin-top: 0;
}

section > p {
	margin: var(--para-margin);
}

form + nav.menu.menu--cat {
	border: 1px solid white;
	margin-top: 1rem;
}

/* ==== LINKS ==== */

a {
	text-decoration: none;
	color: var(--a-color);
}
a:hover {
	color: var(--a-hover-color);
	/* background-color: rgba(0,0,0,0.3); */
}
a:focus {
	outline: 1px solid var(--a-outline-c);
}

/* ==== PREFORMATTED ==== */


pre {
	white-space: pre-wrap;
	-moz-tab-size: 4;
	tab-size: 4;
}

pre.dump--json {
	padding: 1em;
}


code {
	font-family: var(--mono-font);
	font-size: var(--mono-font-size);
	/* line-height: 1em; */
}
.coderows {
	font-family: var(--mono-font);
	font-size: var(--mono-font-size);
	padding: 0 1rem;
	margin: var(--para-margin);
	line-height: 2rem;
	background: repeating-linear-gradient(
		to bottom,
			var(--code-line-odd-bg) 0,
			var(--code-line-odd-bg) 1.95rem,
			rgba(255,255,255,0.05) 1.95rem,
			rgba(255,255,255,0.05) 2rem,
			var(--code-line-even-bg) 2rem,
			var(--code-line-even-bg) 3.95rem,
			rgba(255,255,255,0.05) 3.95rem,
			rgba(255,255,255,0.05) 4rem,
			var(--code-line-odd-bg) 4rem
		);
}


.coderows * {
	margin: 0;
	padding: 0;
}
.coderows h2, .coderows h3, .coderows h4  {
	/* padding: 0 !important; */
	margin: 0 -1rem 0 -1rem; !important;
	padding: 0 1rem 0 1rem; !important;
	/* line-height: 1.9rem; */
	border-width: 0;
}
.coderows hr {
	color: transparent;
	background-color: rgba(200,200,255,0.15);
	height: .1em;
	margin: .95em;
	border: 0;
	display: block;
}

ul.coderows, .coderows ul {
	margin: 0;
	padding-left: 2.5em;
	line-height: inherit;
}
ul.coderows li, .coderows li {
	/* line-height: 1; */
	line-height: inherit;
	padding: 0 1em;
	margin: 0;
}


div.crows--grid {
	margin: 0 1rem;
	font-family: var(--mono-font);
	font-size: var(--mono-font-size);
	background: repeating-linear-gradient(to right, 
		var(--crow-bg1) 0, var(--crow-bg1) calc(var(--crow-incr)),
		var(--crow-bg2) calc(var(--crow-incr)), var(--crow-bg2) calc(var(--crow-incr) * 2),
		var(--crow-bg3) calc(var(--crow-incr) * 2), var(--crow-bg3) calc(var(--crow-incr) * 3)
	);
}

/* ==== UI ELEMENTS ==== */

div.notes {
	text-align: center;
	padding: 1rem;
}
div.notes:empty {
	display: none;
}


.auth-login {
	margin: 1rem auto;
}

div.auth--username {
	position: fixed;
	z-index: 100;
	right: 0;
	bottom: 0;
	overflow: hidden;
	background-color: var(--ui-username-bg);
	font-size: .8rem;
	padding: .4rem 0 .4rem 1.25rem;
	border-radius: .3rem 0 0 0;
}

a.logout--icon {
	transform: scale(1.8);
	line-height: 1rem;
	background-color: var(--ui-logout-icon-bg);
	padding: 0 .3rem;
	margin: 0 .5rem 0 1rem;
	display: inline-block;
}
a.logout--icon:hover {
	background-color: var(--ui-logout-icon-hover-bg);
}

/* ==== MISCELLANEOUS MODIFIERS ==== */

.pad {
	padding: 1em 1.5em;
}
.bgc {
	background-color: var(--bg-l);
}

#debug {
	#display: none;
}
.level_admin #debug {
	display: block;
}

.txt--trans {
	background-color: var(--bg-l);
}
.txt--trans::before {
	content: '↳';
	display: inline;
	/* width: 2ch; */
	padding: 0 .5rem;
	/* text-align: center; */
	background-color: var(--bg-l);
	/* color: #faa; */
}

/* ==== TOOL ADD-ONS ==== */

.mod-footer--tool-translator {
	margin: 1rem auto;
	width: fit-content;
	background-color: var(--bg-l1);
	border-radius: .25rem;
	padding: .3rem;
	opacity: 0.7;
}
.mod-footer--tool-translator:hover {
	opacity: 1;
}
.mod-footer--tool-translator img {
	vertical-align: middle;
	margin: 0 .025rem;
	border: 5px solid var(--bg-l1);
	opacity: 0.7;
}
.mod-footer--tool-translator img:hover {
	border: 5px solid var(--bg-l2);
	opacity: 1;
}

.flag-small {
	height: 2rem;
	min-width: 2.5rem;
}