/* #region fonts */
@font-face {
	font-family: 'Nunito';
	src: url('/font/Nunito-Black.eot');
	src: url('/font/Nunito-Black.eot?#iefix') format('embedded-opentype'),
	url('/font/Nunito-Black.woff2') format('woff2'),
	url('/font/Nunito-Black.woff') format('woff'),
	url('/font/Nunito-Black.ttf') format('truetype'),
	url('/font/Nunito-Black.svg#Nunito-Black') format('svg');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Nunito';
	src: url('/font/Nunito-BlackItalic.eot');
	src: url('/font/Nunito-BlackItalic.eot?#iefix') format('embedded-opentype'),
	url('/font/Nunito-BlackItalic.woff2') format('woff2'),
	url('/font/Nunito-BlackItalic.woff') format('woff'),
	url('/font/Nunito-BlackItalic.ttf') format('truetype'),
	url('/font/Nunito-BlackItalic.svg#Nunito-BlackItalic') format('svg');
	font-weight: 900;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Nunito';
	src: url('/font/Nunito-ExtraBold.eot');
	src: url('/font/Nunito-ExtraBold.eot?#iefix') format('embedded-opentype'),
	url('/font/Nunito-ExtraBold.woff2') format('woff2'),
	url('/font/Nunito-ExtraBold.woff') format('woff'),
	url('/font/Nunito-ExtraBold.ttf') format('truetype'),
	url('/font/Nunito-ExtraBold.svg#Nunito-ExtraBold') format('svg');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Nunito';
	src: url('/font/Nunito-ExtraBoldItalic.eot');
	src: url('/font/Nunito-ExtraBoldItalic.eot?#iefix') format('embedded-opentype'),
	url('/font/Nunito-ExtraBoldItalic.woff2') format('woff2'),
	url('/font/Nunito-ExtraBoldItalic.woff') format('woff'),
	url('/font/Nunito-ExtraBoldItalic.ttf') format('truetype'),
	url('/font/Nunito-ExtraBoldItalic.svg#Nunito-ExtraBoldItalic') format('svg');
	font-weight: bold;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Nunito';
	src: url('/font/Nunito-Bold.eot');
	src: url('/font/Nunito-Bold.eot?#iefix') format('embedded-opentype'),
	url('/font/Nunito-Bold.woff2') format('woff2'),
	url('/font/Nunito-Bold.woff') format('woff'),
	url('/font/Nunito-Bold.ttf') format('truetype'),
	url('/font/Nunito-Bold.svg#Nunito-Bold') format('svg');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Nunito';
	src: url('/font/Nunito-BoldItalic.eot');
	src: url('/font/Nunito-BoldItalic.eot?#iefix') format('embedded-opentype'),
	url('/font/Nunito-BoldItalic.woff2') format('woff2'),
	url('/font/Nunito-BoldItalic.woff') format('woff'),
	url('/font/Nunito-BoldItalic.ttf') format('truetype'),
	url('/font/Nunito-BoldItalic.svg#Nunito-BoldItalic') format('svg');
	font-weight: bold;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Nunito';
	src: url('/font/Nunito-ExtraLightItalic.eot');
	src: url('/font/Nunito-ExtraLightItalic.eot?#iefix') format('embedded-opentype'),
	url('/font/Nunito-ExtraLightItalic.woff2') format('woff2'),
	url('/font/Nunito-ExtraLightItalic.woff') format('woff'),
	url('/font/Nunito-ExtraLightItalic.ttf') format('truetype'),
	url('/font/Nunito-ExtraLightItalic.svg#Nunito-ExtraLightItalic') format('svg');
	font-weight: 200;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Nunito';
	src: url('/font/Nunito-LightItalic.eot');
	src: url('/font/Nunito-LightItalic.eot?#iefix') format('embedded-opentype'),
	url('/font/Nunito-LightItalic.woff2') format('woff2'),
	url('/font/Nunito-LightItalic.woff') format('woff'),
	url('/font/Nunito-LightItalic.ttf') format('truetype'),
	url('/font/Nunito-LightItalic.svg#Nunito-LightItalic') format('svg');
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Nunito';
	src: url('/font/Nunito-Italic.eot');
	src: url('/font/Nunito-Italic.eot?#iefix') format('embedded-opentype'),
	url('/font/Nunito-Italic.woff2') format('woff2'),
	url('/font/Nunito-Italic.woff') format('woff'),
	url('/font/Nunito-Italic.ttf') format('truetype'),
	url('/font/Nunito-Italic.svg#Nunito-Italic') format('svg');
	font-weight: normal;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Nunito';
	src: url('/font/Nunito-SemiBold.eot');
	src: url('/font/Nunito-SemiBold.eot?#iefix') format('embedded-opentype'),
	url('/font/Nunito-SemiBold.woff2') format('woff2'),
	url('/font/Nunito-SemiBold.woff') format('woff'),
	url('/font/Nunito-SemiBold.ttf') format('truetype'),
	url('/font/Nunito-SemiBold.svg#Nunito-SemiBold') format('svg');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Nunito';
	src: url('/font/Nunito-SemiBoldItalic.eot');
	src: url('/font/Nunito-SemiBoldItalic.eot?#iefix') format('embedded-opentype'),
	url('/font/Nunito-SemiBoldItalic.woff2') format('woff2'),
	url('/font/Nunito-SemiBoldItalic.woff') format('woff'),
	url('/font/Nunito-SemiBoldItalic.ttf') format('truetype'),
	url('/font/Nunito-SemiBoldItalic.svg#Nunito-SemiBoldItalic') format('svg');
	font-weight: 600;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Nunito';
	src: url('/font/Nunito-ExtraLight.eot');
	src: url('/font/Nunito-ExtraLight.eot?#iefix') format('embedded-opentype'),
	url('/font/Nunito-ExtraLight.woff2') format('woff2'),
	url('/font/Nunito-ExtraLight.woff') format('woff'),
	url('/font/Nunito-ExtraLight.ttf') format('truetype'),
	url('/font/Nunito-ExtraLight.svg#Nunito-ExtraLight') format('svg');
	font-weight: 200;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Nunito';
	src: url('/font/Nunito-Light.eot');
	src: url('/font/Nunito-Light.eot?#iefix') format('embedded-opentype'),
	url('/font/Nunito-Light.woff2') format('woff2'),
	url('/font/Nunito-Light.woff') format('woff'),
	url('/font/Nunito-Light.ttf') format('truetype'),
	url('/font/Nunito-Light.svg#Nunito-Light') format('svg');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Nunito';
	src: url('/font/Nunito-Regular.eot');
	src: url('/font/Nunito-Regular.eot?#iefix') format('embedded-opentype'),
	url('/font/Nunito-Regular.woff2') format('woff2'),
	url('/font/Nunito-Regular.woff') format('woff'),
	url('/font/Nunito-Regular.ttf') format('truetype'),
	url('/font/Nunito-Regular.svg#Nunito-Regular') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

/* #endregion fonts */

:root {
	--main-spacing: 25px;
	--half-spacing: calc(var(--main-spacing) / 2);
	--quarter-spacing: calc(var(--main-spacing) / 4);
	--nav-footer-height: 50px;
	--nav-elem-size: 30px;
	--nav-footer-font-size: 1.1em;
	--basic-font-size: 1.15em;
	--fade: background-color 0.5s ease;
}

/* #region nav-footer */

#toggle-navbar {
	margin: 0 !important;
}

#toggle-navbar img, footer img {
	filter: invert(var(--invert));
}

.sitever span {
	color: var(--green);
	font-size: 0.7em;
}

:focus-visible {
	outline: none !important;
}

header img,
header svg,
header > a {
	height: var(--nav-elem-size) !important;
}

header, .nav-list {
	height: var(--nav-footer-height);
}

header, footer {
	width: 100%;
	position: fixed;
	background-color: var(--bw);
	left: 0;
}

/* header specific */

header {
	top: 0;
	z-index: 50;
	border-bottom: 1px solid var(--nav-footer-border);
}

header .err {
	min-height: var(--nav-elem-size);
}

header > a {
	align-items: center;
	justify-content: center;
	display: flex;
	flex-direction: row;
}

header img, header svg, .extra-icon {
	width: var(--nav-elem-size);
}

header svg {
	fill: var(--wb);
}

/* navbar */

.nav-container {
	padding: 0 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: var(--nav-footer-height);
}

.nav-icons {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	margin-left: 20px;
}

.rand-title {
	filter: invert(var(--invert-dice));
}

.extra-icon {
	margin-left: 5px;
	font-size: 0;
}

.extra-icon:first-of-type {
	margin-left: 0;
}

.nav-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-grow: 1;
}

.nav-list {
	padding: 0 10px !important;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: row;
	width: 100%;
}

.nav-container .nav-list {
	padding: 0 30px !important;
}

.nav-list a, footer a {
	font-size: var(--nav-footer-font-size) !important;
}

#nav-content {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: row;
}

/* dropdown menus */

.dropdown {
    display: flex;
    align-items: center;
}

.dropdown-entry {
	cursor: pointer;
}

.dropdown-list {
	display: flex;
	flex-direction: column;
    position: absolute;
	width: 220px;
	background-color: var(--bw);
	border-radius: 0 0 8px 8px;
	padding: 10px 10px 10px 10px;
	transition: background-color ease 0.5s;
}

.dropdown-list > a {
	margin-bottom: 3px;
	padding: 0px 5px;
	border-radius: 4px;
	text-align: center;
}

.dropdown-list > a:last-child {
	margin-bottom: 0px !important;
}

.dropdown-list > a:hover {
	background-color: var(--clevel-1);
}

.dropdown-arrow {
	width: 20px;
	height: 20px;
	font-size: 0.75em;
	background-color: var(--wb);
	clip-path: polygon(5px 7px, 10px 13px, 15px 7px);
}

.dropdown:hover .dropdown-arrow {
	clip-path: polygon(5px 13px, 10px 7px, 15px 13px);
}

/* mobilenav */

.mobilenav {
	display: flex;
	height: var(--nav-footer-height);
	margin-left: 25px;
	align-items: center;
}
.mobilenav > a { font-size: var(--nav-footer-font-size); }
.mobilenav > *:first-of-type { margin-right: 15px; }

#ths-link { font-size: var(--nav-footer-font-size); }
#ths-drop { height: var(--nav-footer-height); }
#ths-drop-list { top: 40px; left: 10px; }

/* #region footer */
footer {
	bottom: 0;
	border-top: 1px solid var(--nav-footer-border);
}

footer img {
	height: 20px;
	width: 20px;
}

footer > .nav-list > div {
	align-items: center;
	justify-content: center;
	display: flex;
	margin-left: 10px;
}

footer > .nav-list > div > img:first-of-type {
	margin-right: 5px;
}

footer > .nav-list > div > img:last-of-type {
	margin-left: 5px;
}

/* color mode switch */

#toggle-colormode div {
	background-color: var(--bw);
	margin: 2px;
	border-radius: 100%;
}

#toggle-colormode {
	background-color: var(--wb);
	width: 40px;
	height: 20px;
	border-radius: 10px;
	cursor: pointer;
	flex-direction: row;
	display: inline-flex;
}

#toggle-colormode div {
	width: 16px;
	height: 16px;
}
/* #endregion footer */

/* #endregion nav-footer */

/* #region sitedesc */
.sitedesc {
	width: 100%;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: flex-start;
	margin-bottom: var(--main-spacing);
	height: max-content;
	flex: 0 0;
}

.sitedesc h1 { margin-bottom: 5px !important; }
.sitedesc > * { text-align: center; }
/* #endregion sitedesc */

/* #region basic-setup */
html {
	display: flex;
	justify-content: center;
}

main {
	padding: 75px var(--main-spacing);
	display: flex;
	flex-direction: column;
}

body, main {
	min-height: 100vh;
	width: 100%;
}

body {
	max-width: 1600px;
	height: max-content;
	background-color: var(--bg);
}

code {
	border: 1px solid var(--wb);
	border-radius: 4px;
	color: var(--wb);
	padding: 2px;
	background: var(--bw);
	display: inline-flex;
	flex-direction: row;
	flex-wrap: nowrap;
	text-decoration: inherit;
}

h1, h2, h3, h4, h5, h6, p, a, u, em, b, span, input, input::placeholder, li, li::marker, label, select, optgroup, option, button, img {
	font-family: "Nunito", sans-serif;
	color: var(--wb);
}

h1 { margin: 0 0 12px 0; }
h2 { margin: 0 0 10px 0; }
h3 { margin: 0 0 8px 0; }
h4 { margin: 0 0 6px 0; }
h5 { margin: 0 0 4px 0; }
h6 { margin: 0 0 2px 0; }
h1, h2, h3, h4, h5, h6 { font-weight: normal; }

a { text-decoration: none; }
em { color: inherit; }
p { margin: 0; }

input {
	outline: none;
	border: none;
}

input[type="text"]::placeholder {
	opacity: 0.54;
}

select {
	padding: 10px 30px;
	border: none;
	appearance: none;
	background: var(--selector-arrow) no-repeat right;
	background-position-x: calc(100% - 12px);
	-moz-appearance: none;
	-webkit-appearance: none;
}

option {
	border-radius: 8px;
	padding: 5px
}

option:checked {
	background-color: var(--wb);
	color: var(--bw);
}

option:disabled, optgroup:disabled {
	display: none !important;
}

:disabled {
	cursor: not-allowed !important;
	opacity: 0.7 !important;
}

p, button, a, li::marker, label, select, input[type="text"] {
	font-size: 0.95em;
}

a.inline-link,
a.block-link,
a.sitever-link {
	font-size: initial !important;
}

ul, ol {
	padding-left: 20px;
	margin-top: 0 !important;
	margin-bottom: 1em;
}
ul { list-style-type: disc; }
li { margin-bottom: 15px; }
li:last-child { margin-bottom: 0 !important; }

/* prevents most spacing issues with margin/padding */
* { box-sizing: border-box; }

/* #endregion basic-setup */

/* #region err */
.err-container, .err {
	width: 100%;
}

.err.page {
	width: 80%;
}

.err-container {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

.err {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: var(--clevel-1);
}

.err.nobg {
	background-color: initial !important;
}

.err.small {
	border-radius: 4px !important;
	padding: 0 10px !important;
}

.err, .err.large {
	padding: 10px;
	border-radius: 10px;
}

.err > * {
	margin-bottom: 10px !important;
}

.err > *:nth-last-child(1) {
	margin-bottom: 0 !important;
}
/* #endregion err */

/* #region btn */
.btn {
	background-color: var(--clevel-1);
	border: 2px solid var(--green);
	border-radius: 5px;
	padding: 4px 10px;
	min-width: 150px;
	margin: 10px;
	align-self: center;
	text-align: center;
}

.btn:hover { background-color: var(--clevel-1-hover); }
.btn-c2 { background-color: var(--clevel-2) !important; }
.btn-c2:hover { background-color: var(--clevel-2-hover) !important; }
.btn-c3 { background-color: var(--clevel-3) !important; }
.btn-c3:hover { background-color: var(--clevel-3-hover) !important; }
/* #endregion btn */

/* #region utility-classes */
.spacer {
	width: 3px;
	border-radius: 5px;
	margin: 0 10px;
	min-height: 21px;
}
.spacer.l1 { background-color: var(--clevel-1); }
.spacer.l2 { background-color: var(--clevel-2); }
.spacer.l3 { background-color: var(--clevel-3); }

.dark { flex-direction: row-reverse !important; }
.light { flex-direction: row !important; }

.tcenter { text-align: center; }

.bold { font-weight: bold; }
.underline { text-decoration: underline !important; }
.strikethrough { text-decoration: line-through !important; }

.red { color: var(--red); }
.pink { color: var(--pink); }
.green { color: var(--green); }
.yellow { color: var(--yellow); }
.blue { color: var(--blue); }
.orange { color: var(--orange); }

.hidden { display: none !important; }
.hidden-desktop { display: none; }
.hidden-mobile { display: inline-flex; }
.hidden-mobile.dynamic-mobile { display: inline; }

.nospace {
	margin: 0 !important;
	padding: 0 !important;
}

/* basic text blocks */
.text {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}
.text.stacked > p { margin-bottom: 10px; }
/* #endregion utility-classes */

/* fade on theme change */
.sitever h3 > span,
#toggle-navbar img,
.dropdown-list > a,
#toggle-colormode,
.extra-icon,
footer img,
.spacer,
header,
footer,
select,
input,
.btn,
body,
code {
	transition: var(--fade);
}

@media only screen and (max-width: 1200px) {
	main { padding: 75px var(--half-spacing); }
	.err.page { width: 100%; }
	.mobilenav { margin: 0; }
	.mobilenav > * { margin: 0 10px !important; }
	.list-shrink-ls { padding-left: 15px; }
	.text.large-stacked > p { margin-bottom: var(--main-spacing); }
	.hidden-desktop { display: inline-flex; }
	.hidden-desktop.dynamic-mobile { display: inline; }
	.hidden-mobile, .nav-hidden { display: none !important; }
	.extra-icon { margin: 0 !important; }

	header, .nav-container, #nav-content, #nav-content .nav-list {
		height: auto;
	}

	.nav-container, #nav-content .nav-list {
		flex-direction: column;
	}

	#nav-content {
		flex-direction: column-reverse;
		margin-bottom: 5px;
	}

	#mrandtitle-icon {
		position: absolute;
		top: 50px;
		left: 10px;
	}

	#msearch-icon {
		position: absolute;
		top: 50px;
		right: 10px;
	}

	#ths-drop-list-container {
		display: flex;
		position: fixed;
		background-color: red;
		top: var(--nav-footer-height);
		justify-content: flex-start;
		align-items: center;
		flex-direction: column;
		left: 0;
	}

	#ths-drop-list {
		top: 10px;
		border-radius: 8px;
		width: 100%;
		max-width: 200px;
	}

	.nav-header {
		height: var(--nav-footer-height) !important;
		justify-content: space-between !important;
		align-items: center !important;
		width: 100%;
	}

	.sitedesc h3 {
		justify-content: flex-start;
		text-align: center;
	}
}