@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap&family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');

:root {
	--font-size-base: 1rem;
	--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);

	--colors-BG-normal: #101010;
	--colors-BG-section: #171717;
	--colors-BG-sub: #262626;
	--colors-BG-highlighted: #44403C;
	--colors-accent: #68c2ff;
	--colors-text-high: #FFFFFF;
	--colors-text-normal: #FFFFFF;
	--colors-special-good: #49AC49;
	--colors-special-bad: #AC4949;

	--sizing-border-radius: 0.5rem;
	--sizing-border-radius-normal: 0.75rem;
	--sizing-border-radius-full: 1rem;

	--sizing-huge: 1rem;
	--sizing-normal: 0.5rem;
	--sizing-nano: 0.3rem;

	--time-action: .3s;
}

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


::-webkit-scrollbar {
	width: var(--sizing-normal);
}

*:hover::-webkit-scrollbar-thumb {
	background: var(--colors-BG-sub);
}

::-webkit-scrollbar-track {
	background: var(--colors-BG-normal);
}

::-webkit-scrollbar-thumb {
	background: var(--colors-BG-sub);
	border-radius: var(--sizing-border-radius);
}

::-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 {
	outline: none;
	font-family: inherit;
	font-size: inherit;
}

body {
	margin: 0;
	background-color: var(--colors-BG-normal);
	color: var(--colors-text-normal);
	font-family: 'Poppins', sans-serif;
	user-select: none;
}

body * {
	transition-timing-function: ease-out;
}

p {
	font-family: "IBM Plex Sans", sans-serif;
}


.contextmenu {
	position: absolute;
	text-align: center;
	background: var(--colors-BG-section);
	border: 1px solid var(--colors-BG-section);
	color: var(--colors-text-normal);
	border-radius: 0.5rem;
	box-shadow: 0px 3px 5px 0px #0000005c;
	overflow: hidden;
	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(--colors-BG-sub);
}

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

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