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

:root {
	--font-size-small: 0.85rem;
	--font-size-normal: 1rem;
	--font-size-subheading: 1.25rem;
	--font-size-big: 2rem;

    --colors-BG-normal: #101010;
    --colors-BG-sub: #262626;
    --colors-BG-section: #171717;
    --colors-BG-highlighted: #44403C;
	--colors-BG-accent: #44403C;
    --colors-text-normal: white;
	--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: .2s;
	
	--vw: 1vw;
	--vh: 1vh;
	--font-size-default: calc((var(--vw) + var(--vh)) / 2);
}

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

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

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

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

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

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

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

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;
}