/* Scrollbar */
/* Width */
::-webkit-scrollbar {
	width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
	background: var(--base-container);
}

/* Handle */
::-webkit-scrollbar-thumb {
	background: var(--base-active-bg);
}

:root {
	/* Colors */
	--base-body-bg: #1a1a1aff;
	--base-bg: #00000060;
	--base-color: #fefefeff;
	--base-container: #f2f2f220;
	--base-hover-bg: #f2f2f230;
	--base-focus-bg: #f2f2f245;
	--base-active-bg: #fefefe60;
	--blur-strength: 6px;
	--panel-bg: var(--base-bg);
	--panel-color: var(--base-color);
	--transition-speed: 300ms;
	--rounded-radius: 12px;
}

/* Placeholder */
::placeholder {
	color: var(--base-color);
	opacity: 0.65;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background: var(--base-hover-bg);
}

* {
	box-sizing: border-box;
	
	/* Font rendering */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-variant-ligatures: none;

	/* Disable tap hightlight color on mobile devices */
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: var(--base-body-bg);
	color: var(--foreground);
}

html,
body {
	font-family: roboto, sans-serif;
	height: 100%;
	position: fixed;
}

/* Select */
select {
	text-align: center;
	text-align-last: center;
}

/* Hide focus elements outline */
input:focus,
textarea:focus,
select:focus {
	outline: none;
}

select::-ms-expand {
	display: none;
}

option {
	text-align: left;
}
