:root {
	--devCol: rgb(243, 150, 28);
	--color: 28, 243, 99;
	--accentColor: rgb(var(--color));
	--accentTransparent: rgba(var(--color), 0.5);
	--accentVeryTransparent: rgba(var(--color), 0.25);
	--glow: var(--accentTransparent);
	--glow-opaque: var(--accentColor);
	/*Orange: #ff8d06, Grün: #a8f000 Blue: #068fff*/
	--textColor: #f7f7f2;
	/* Orange: #ffe6d5, Grün: #fcfce8*/
	--neutralBackground: #808080;
	--dark: rgb(14, 12, 13);
	--dark-transparent: rgba(14, 12, 13, 0.882);
	--darkForOpacity: rgb(22, 22, 29);
	--brighter: #0d0f0e;
	--backgroundColor: #0a090a;
	--backgroundColor-Transparent: #0a090a7c;
	--textSize: 12pt;
	--timeline-line: rgba(255, 255, 255, 0.4);

	/* Navigation */
	--nav-radius: 220px;
	--nav-size: 60px;
	--bg-dark: var(--backgroundColor);

	/* Gallery */
	--transition-speed: 0.4s;
}
body {
	/*
  	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	*/
	font-family: 'JetBrainsMono';
	background-color: var(--backgroundColor);
	color: var(--textColor);
	background-position: top left;
	/* background-image: radial-gradient(var(--accentTransparent) 2px, transparent 2px);  /* Dots */
	background-image: url(/assets/Images/Background_DarkTheme.png);
	background-size: 33px 33px;
	background-attachment: fixed;
	background-repeat: repeat;

}

.bodyBackground {

	background-position: top left;
	background-color: var(--backgroundColor);
	color: var(--textColor);

	/* background-image: radial-gradient(var(--accentTransparent) 2px, transparent 2px);  /* Dots */
	background-image: url(/assets/Images/Background_DarkTheme.png);
	background-attachment: fixed;
	background-repeat: repeat;
	background-size: 33px 33px;
}

@media (prefers-color-scheme: light) {
	:root {
		/*No need to define css twice. Only changes*/

		/* Forest green — readable on warm beige, ~4.5:1 contrast */
		--color: 0, 115, 50;
		--accentColor: rgb(0, 115, 50);
		--accentTransparent: rgba(0, 115, 50, 0.45);
		--accentVeryTransparent: rgba(0, 115, 50, 0.18);
		--glow: rgba(0, 115, 50, 0.45);
		--glow-opaque: rgb(0, 115, 50);

		--textColor: #100f0f;

		--dark: rgb(215, 210, 205);
		--dark-transparent: rgba(215, 210, 205, 0.92);
		/* Opaque warm panel for light mode */

		--darkForOpacity: rgb(238, 238, 225);
		--brighter: #cac5c0;
		--backgroundColor: #e4dfdb;
		--backgroundColor-Transparent: #e4dfdb77;

		--textSize: 12pt;
		--timeline-line: rgba(0, 0, 0, 0.2);
	}

	body, .bodyBackground {
		background-image: url(/assets/Images/Background_LightTheme.png);
		background-size: 33px 33px;
		background-attachment: fixed;
		background-repeat: repeat;
	}

	.navbar-dark .navbar-toggler-icon {
		background-image:
			url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
	}

}

/* Navigation mobile overrides */
@media (max-width: 991px) {
	:root {
		--nav-radius: 160px;
		--nav-size: 40px;
	}
}

@font-face {
	font-family: 'JetBrainsMono';
	font-style: normal;
	font-weight: 400;
	/* src: url(/assets/UbuntuMono-R.ttf) format('truetype'); */
	src: url(/assets/Fonts/JetBrainsMono/fonts/ttf/JetBrainsMono-Thin.ttf) format('truetype');

}

@font-face {
	font-family: 'Orbital';
	font-style: normal;
	font-weight: 400;
	/* src: url(/assets/UbuntuMono-R.ttf) format('truetype'); */
	src: url(/assets/Fonts/Orbitron/Orbitron-VariableFont_wght.ttf) format('truetype');

}


.TextLogo {
	height: 0.8em;
	vertical-align: middle;
	content: url("/assets/Logo/NameDarkTheme.svg")
}

.ImageLogo {
	height: 1.5em;
	position: relative;
	top: 5px;
	left: -5px;
	content: url("/assets/Logo/LogoDarkTheme.png")
}

@media (prefers-color-scheme: light) {
	.TextLogo {
		content: url("/assets/Logo/NameLightTheme.svg")
	}

	.ImageLogo {
		content: url("/assets/Logo/LogoLightTheme.png")
	}

	.EmailLogo {
		content: url("/assets/Images/Icons/M_dark.svg")
	}

	.DeviantArtLogo {
		content: url("/assets/Images/Icons/DA_dark.svg")
	}

	.InstagramLogo {
		content: url("/assets/Images/Icons/Instagram_dark.svg")
	}

	.TwitterLogo {
		content: url("/assets/Images/Icons/Twitter_dark.svg")
	}

}

.bg-darkM {
	background-color: var(--dark);
}

/* ── Badges ── */
.wip-badge,
.info-badge,
.external-badge,
.incomplete-badge {
	display: inline-block;
	font-family: 'Orbital', sans-serif;
	font-size: 10px;
	letter-spacing: 3px;
	text-transform: uppercase;
	padding: 4px 14px;
	border-radius: 8px;
	border: 1px solid;
}

.wip-badge {
	color: #c0392b;
	border-color: rgba(192, 57, 43, 0.35);
	background: rgba(192, 57, 43, 0.1);
}

.info-badge {
	color: #4d88ff;
	border-color: rgba(77, 136, 255, 0.35);
	background: rgba(77, 136, 255, 0.1);
}

.external-badge,
.incomplete-badge {
	color: var(--devCol);
	border-color: color-mix(in srgb, var(--devCol) 35%, transparent);
	background: color-mix(in srgb, var(--devCol) 10%, transparent);
}

@media (prefers-color-scheme: light) {
	.wip-badge {
		color: #922b21;
		border-color: rgba(146, 43, 33, 0.4);
		background: rgba(146, 43, 33, 0.07);
	}

	.info-badge {
		color: #2d5fbf;
		border-color: rgba(45, 95, 191, 0.4);
		background: rgba(45, 95, 191, 0.07);
	}

	.external-badge,
	.incomplete-badge {
		color: color-mix(in srgb, var(--devCol) 80%, black);
		border-color: color-mix(in srgb, var(--devCol) 40%, transparent);
		background: color-mix(in srgb, var(--devCol) 7%, transparent);
	}
}



/* ── Scrollbars ── */
* {
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, var(--textColor) 15%, transparent) transparent;
}

*::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

*::-webkit-scrollbar-track {
	background: transparent;
}

*::-webkit-scrollbar-thumb {
	background: color-mix(in srgb, var(--textColor) 15%, transparent);
	border-radius: 3px;
}

*::-webkit-scrollbar-thumb:hover {
	background: color-mix(in srgb, var(--textColor) 30%, transparent);
}

/* ── Headings ── */
h1, h2, h3, h4 {
	margin-top: 30px;
	margin-bottom: 16px;
}

h1 {
	font-family: 'Orbital', sans-serif;
	font-size: 20pt;
}

h2 {
	font-size: 18pt;
}

h3 {
	font-size: 16pt;
}

h4 {
	font-size: 14pt;
}

h5, h6 {
	font-size: var(--textSize);
	margin-top: 5px;
	margin-bottom: 10px;
}

/* ── Horizontal rules ── */
hr {
	border: none;
	border-bottom: 1px solid color-mix(in srgb, var(--textColor) 10%, transparent);
	margin: 16px 0;
}

a:any-link {
	color: var(--accentColor);
}

.nav-item {
	/*
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	*/

}

.nav-link:hover {
	color: var(--accentColor) !important;
}

.nav-link {
	color: var(--textColor) !important;
}

.nav-item {
	color: var(--textColor);
}

footer {
	color: var(--textColor);
}

.active>a {
	color: var(--accentColor) !important;
}