@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;800&display=swap');

:root {
	--font-size-base: 1rem;

	/* basic colors */
	--col-bg1: #101010;
	--col-txt1: #FFFFFF;
	--col-bg2: #171717;
	--col-bg3: #262626;
	--col-bgh: #44403C;
	--col-txth: #FFFFFF;

	--col-good: #5be45b;
	--col-bad: #d44343;

	/* sizing */
	--sizing-normal: 0.5rem;
	--sizing-huge: 1rem;
	--sizing-nano: .3rem;

	--siz-radius1: 0.5em;
	--siz-radius2: 0.35em;
	--siz-radius3: 0.2em;

	--spacing-normal: 0.3rem;
	--spacing-gap: 6px;

	/* easing */
	--time1: .3s cubic-bezier(0.36, 0.38, 0, 0.94);
	--time2: .3s cubic-bezier(0.42, 1.67, 0.21, 0.90);

	/* decor */
	--box-crisp: 1px solid #ffffff0c;
	--box-crisp-col: #ffffff0c;

	/* Extended support */
	--colors-accent: rgb(97, 121, 255);

	--font-size-small: calc(var(--font-size-base) * 0.85);
	--font-size-normal: var(--font-size-base);
	--font-size-subheading: calc(var(--font-size-base) * 1.25);
	--font-size-big: calc(var(--font-size-base) * 2);
}

@media (max-width: 768px) {
	:root {
		----time1: .5s;
	}
}

::-webkit-scrollbar {
	width: .5rem;
	height: .5em;
}

::-webkit-scrollbar-track {
	background: var(--col-bg2);
	width: 5px;
	border-radius: var(--siz-radius1);
}

@keyframes barExpandVert {
	0% {
		width: 0;
	}
	100% {
		width: 100%;
	}
}

::-webkit-scrollbar-thumb {
	background-color: var(--col-bg3);
	border-radius: var(--siz-radius1);
	border: 1px solid #7a7a7a4a;
	animation: barExpandVert var(--time2);
}

::-webkit-scrollbar-thumb:hover {
	cursor: grab;
}

::-webkit-scrollbar-thumb:active {
	cursor: grabbing;
}

html {
	height: 100%;
	width: 100%;
	font-size: var(--font-size-base);
}

button,
input,
textarea,
select {
	outline: none;
	font-family: inherit;
	font-size: inherit;
}

button {
	cursor: pointer;
}

body {
	margin: 0;
	background-color: var(--col-bg1);
	color: var(--col-txt1);
	user-select: none;
	font-family: 'Poppins', sans-serif;
}

body * {
	transition-timing-function: cubic-bezier(0.36, 0.38, 0, 0.94);
}

input::placeholder,
textarea::placeholder {
	color: var(--col-txt1);
	opacity: .5;
}

.contextmenu {
	position: absolute;
	text-align: center;
	background: var(--col-bg2);
	border: 1px solid var(--col-bg2);
	color: var(--col-txt1);
	border-radius: 0.5rem;
	box-shadow: 0px 3px 5px 0px #0000005c;
	overflow: visible;
	animation: pop3 .2s;
	z-index: 99;
	font-size: var(--font-size-small);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	padding: 0.3rem;
	gap: 0.3rem;
}

.ctxmenuitem {
	text-align: left;
	border-radius: 0.3rem;
	display: flex;
	align-items: center;
	padding-left: 0.3rem !important;
	gap: 0.5rem;
}

.ctxmenuitem .material-symbols-rounded {
	font-size: 1rem;
	opacity: 0.5;
}

.ctxmenuitem:hover {
	background: var(--col-bg3);
}

@keyframes pop3 {
	from {
		filter: opacity(0%);
		transform: scale(0.9);
	}

	to {
		filter: opacity(100%);
	}
}

.material-symbols-rounded {
	font-weight: normal !important;
}