/*#region Imports*/
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@6..144,1..1000&family=Luxurious+Script&display=swap');

@font-face {
	font-family: "Digital Numbers";
	src: url('/fonts/DigitalNumbers-Regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
}
/*#endregion*/

/*#region Globals*/
:root {
	--core-font: 'Google Sans Flex', sans-serif;
	
	--color-white: #F5F5F5;
	--color-gray: #757575;
	--color-black: #262626;

	--color-green: #44BBA4;
	--color-yellow: #E5DD54;
	--color-red: #E4113F;
	--color-purple: #804CB1;

	--color-primary: #1F5C45;
	--color-secondary: #124559;
	--color-dark: var(--color-black);
	--color-positive: var(--color-green);
	--color-negative: var(--color-red);
	--color-warning: var(--color-yellow);

	--gradient-black-to-primary: linear-gradient(to bottom, #262626, #2A313A, #1E404A, #0B4F4F, #1F5C45);
	--gradient-black-to-purple: linear-gradient(to bottom, #262626, #373248, #4A3C6C, #62458F, #804CB1);
}
/*#endregion*/

/*#region Typography*/
h1,
h2,
h3,
h4,
h5,
p {
	margin: 0;
}

.text-heading {
	font-family: 'Google Sans Flex', sans-serif !important;
	font-weight: 800;
	font-size: 3rem;
	line-height: 1.2em;
}
.text-subheading {
	font-family: 'Google Sans Flex', sans-serif !important;
	font-weight: 800;
	font-size: 1.5rem;
	line-height: 1.2em;
}
.text-body {
	font-family: 'Google Sans Flex', sans-serif !important;
	font-weight: 400;
	font-size: 1rem;
	letter-spacing: .03125em;
	line-height: 1.4em;
}
.text-caption {
	font-family: 'Google Sans Flex', sans-serif !important;
	font-weight: 400;
	font-size: .6rem;
	letter-spacing: .075em;
	line-height: 1.4em;
}

.text-script {
	font-family: 'Luxurious Script', cursive !important;
}

.text-digital {
	font-family: 'Digital Numbers', monospace !important;
}
/*#endregion*/

/*#region Utils*/
img,
svg {
	width: 100%;
	height: auto;
}

.clearfix:after {
	display: block;
	clear: both;

	content: '';
}

.fillParent {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.flexCenter {
	display: flex;
	align-items: center;
	justify-content: center;
}
.flexCenter.horiz {
		flex-flow: row nowrap;
}
.flexCenter.vert {
	flex-flow: column nowrap;
}

.full-height {
	height: auto !important;
	min-height: 100% !important;
}

.observerFadeInUp {
	opacity: 0;
	transform: translateY(40px);

	transition: opacity 0.75s ease-in,
				transform 0.75s ease-in;
}
.observerFadeInUp.show {
	opacity: 1;
	transform: translateY(0px);
}

.colorScrollbars {
	scrollbar-color: var(--color-primary) var(--color-black);
}
.colorScrollbars::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}
.colorScrollbars::-webkit-scrollbar-thumb {
	background: var(--color-primary);
}
.colorScrollbars::-webkit-scrollbar-track {
	background: var(--color-black);
}
/*#endregion*/

/*#region Main*/
*,
*:before,
*:after {
	box-sizing: border-box;
}
*:not(input):not(textarea) {
	outline: none !important;

	user-select: none;
}

html,
body {
	position: relative;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;

	color: var(--color-white);
	font-family: var(--core-font);
	font-size: 100%;

	background: var(--color-black);

	overflow: hidden;
}

#View {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	overflow: auto;
}
/*#endregion*/