@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

@font-face {
	font-family: 'CMs Urga';
	src: url('./CMSUG.TTF');
}
@font-face {
	font-family: 'CMs Huree';
	src: url('./CMSHR.TTF');
}
@font-face {
	font-family: 'CMs Ulaanbaatar';
	src: url('./CMSUB.TTF');
}

:root {
	--font-family: 'Raleway', sans-serif;

	font-family: var(--font-family);
	font-size: 16px;

	--color-primary: #f5ccff;
	--color-on-primary: #8500a6;
	--color-primary-text: #000000;
	--color-background: #222222;
	--color-background-var: #2d2d2d;
	--color-text: rgba(255, 255, 255, 0.87);
	--color-text-50: rgba(255, 255, 255, 0.435);

	--color-success: #24ff24;
	--color-on-success: #000000;
	--color-warn: #ff8000;
	--color-on-warn: #000000;
	--color-error: #ee0000;
	--color-on-error: #ffffff;

	--length-optimal-profile-input: min(20rem, 320px);

	--filter-hover-brightness: brightness(0.9);

	--card-box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.4);

	--color-background-dark-fallback: #222222;

	color: var(--color-text);
}

.material-symbols-rounded {
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.material-symbols-rounded.filled {
	font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.material-symbols-rounded.big {
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
}
.material-symbols-rounded.big.filled {
	font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;
}

* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	transition: color 150ms ease-out, background-color 150ms ease-out, border-color 150ms ease-out,
		opacity 150ms ease-out;
}

html {
	width: 100vw;
	min-height: 100vh;
	max-height: 100vh;
	height: 100vh;
	min-height: -webkit-fill-available;
	max-height: -webkit-fill-available;
	height: -webkit-fill-available;

	scroll-behavior: smooth;

	overflow-x: auto;
	overflow-y: hidden;

	background-color: var(--color-background);
}

body {
	width: 100vw;
	min-height: 100%;
	height: 100%;

	overflow-x: hidden;
	overflow-y: auto;
}

* {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
input,
textarea {
	-webkit-user-select: auto;
	-moz-user-select: auto;
	-ms-user-select: auto;
	user-select: auto;

	font-family: var(--font-family);
}

input:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--color-primary-text);
}

img,
image {
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
}

button,
a {
	cursor: pointer;
	font-family: var(--font-family);
}

.invertable:hover,
.invertable:focus {
	filter: invert();
}

button:not(.invertable):active,
button:not(.invertable):hover,
button:not(.invertable):focus,
a:not(.invertable):active,
a:not(.invertable):hover,
a:not(.invertable):focus {
	filter: brightness(0.9);
}

button:not(.invertable):focus-visible {
	outline: 2px solid var(--color-primary-text);
}

.busy {
	cursor: progress;
	cursor: wait;
}

a,
a:visited {
	color: var(--color-primary-text);
	font-weight: bolder;
	text-decoration: none;
}

a.block {
	font-weight: initial;
	color: unset;
}

hr {
	color: var(--color-text);
	margin: 1rem 0;
	opacity: 0.25;
}

main {
	width: 100%;
	height: 100%;
}