*,
*::before,
*::after {
	box-sizing: border-box;
	outline: none;
}

::-webkit-scrollbar {
	width: 7px;
	height: 7px;
}

::-webkit-scrollbar-corner {
	background: none;
}

::-webkit-scrollbar-track {
	border: none;
}

::-webkit-scrollbar-thumb {
	background: rgb(112, 112, 112);
	border-radius: 5px;
}

:root {
	--white: rgb(255, 255, 255);
	--light: rgb(219, 219, 219);
	--grey: rgb(128, 128, 128);
	--dark: rgb(38, 38, 38);
	--black: rgb(24, 24, 24);

	--red: #ff000d;
	--blue: #00A8FF;
	--green: rgb(0, 167, 28);
	--purple: rgb(132, 0, 255);
	--orange: rgb(255, 164, 27);

	--primary: var(--black);
	--secondary: var(--dark);
	--tertiary: var(--light);
	--bg: var(--white);
}

[data-theme="dark"] {
	--primary: var(--white);
	--secondary: var(--light);
	--tertiary: var(--dark);
	--bg: var(--black);
}

html {
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-ms-overflow-style: scrollbar;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
	margin: 0px;
	padding: 0px;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
}

html,
body {
	font-family: 'Segoe UI', sans-serif;
	font-size: var(--s);
	font-weight: 300;
	color: var(--secondary);
}

hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

.dark-bg{
	background-color: rgb(171, 171, 171);
}

[data-theme="dark"] .dark-bg {
	background-color: rgb(54, 54, 54);
}