:root {
	--primary: rgb(232, 118, 60);
	--primary-down: rgb(232, 118, 60, 50%);
	--background: #020202;

	--text: #ffffff;
	--textMuted: #a0a0a0;

	/* ? ADMIN Stuff */
	--admin-background 				: rgba(16, 16, 16, 0.8);
	--admin-border-color			: rgba(43, 43, 43, 0.8);
	--admin-border-color-active 	: rgba(99, 99, 99, 0.8);
	--admin-background-deactivated 	: rgba(32, 32, 32, 0.8);

	--admin-success : rgba(50, 168, 82, 1);
	--admin-success-trans : rgba(50, 168, 82, .25);

	--admin-warning : rgba(252, 186, 3, 1);
	--admin-warning-trans : rgba(252, 186, 3, .25);

	--admin-error : rgba(235, 64, 52, 1);
	--admin-error-trans : rgb(245 66 66 / 25%);

	--admin-info : rgba(66, 135, 245, 1);
	--admin-info-trans : rgba(66, 135, 245, .25);

	/* ? Metrics */
	--header-height: 5rem;
	--header-padding: 7%;
	--header-background: var(--admin-background);
	--footer-height: 12.5rem;
}

@media only screen and (max-width: 1024px) and (orientation: portrait) {
	:root {
		--header-height: 5rem;
		--header-padding: 1.5rem;
		--footer-height: 23.75rem;
	}
}

body {
	height: 100%;
	width: 100%;

	margin: 0;
	font-family: 'Inter', sans-serif;

	background: var(--background);

	overflow-x: hidden;
}

* {
	scrollbar-width: auto;
	scrollbar-color: var(--admin-border-color) var(--admin-background);
}

::selection {
	color: var(--text);
	background: var(--primary);
}

#contentParent,
#scenesContent {
	min-height: 100dvh;
	height: auto;
	width: 100%;

	position: relative;
	z-index: 0;
}

.blury {
	backdrop-filter: brightness(120%) blur(2vmin) saturate(100%);
	backface-visibility: hidden;
	perspective: 1000;

	-webkit-backdrop-filter: brightness(120%) blur(2vmin) saturate(100%);
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
}

h1.in,
h2.in,
h3.in,
h4.in {
	height: min-content;
	width: min-content;

	margin: 0;
	padding: 0;

	position: relative;
	z-index: 0;

	color: var(--text);
	font-size: 4rem;

	text-shadow: 0 0 1rem black;
}

h2.in {
	font-size: 3rem;
}

h3.in {
	font-size: 2rem;
}

h4.in {
	font-size: 1rem;
}

h1.in::before,
h2.in::before,
h3.in::before,
h4.in::before {
	content: "";

	height: .5rem;
	width: 10rem;

	position: absolute;
	bottom: 0;
	left: 0;
	z-index: -1;

	background: var(--primary);
}

@media only screen and (orientation: portrait) {
	h1.in {
		font-size: 2rem;
	}

	h2.in {
		font-size: 1.75rem;
	}
	
	h3.in {
		font-size: 1.5rem;
	}
	
	h4.in {
		font-size: 1.25rem;
	}	

	h1.in::before,
	h2.in::before,
	h3.in::before,
	h4.in::before {
		height: .25rem;
	}
}