@font-face {
	font-family: 'Poppins';
	src: url('../ttf/poppins-regular-2.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
}
@font-face {
	font-family: 'Poppins';
	src: url('../ttf/poppins-medium-2.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: 'Poppins';
	src: url('../ttf/poppins-semibold-2.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
}

@font-face {
	font-family: 'Poppins';
	src: url('../ttf/poppins-bold-2.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: 'Poppins';
	src: url('../ttf/poppins-bolditalic-2.ttf') format('truetype');
	font-weight: 700;
	font-style: italic;
}

@font-face {
	font-family: 'Rubik';
	font-style: normal;
	font-weight: 300 900;
	font-display: block;
	src: url('../ttf/rubik-variablefont_wght.ttf');
}

@font-face {
	font-family: 'game-icons';
	src: url('../ttf/game-icons6b4b.ttf') format('truetype'),
		url('../woff/game-icons6b4b.woff') format('woff'),
		url('../svg/game-icons6b4b.svg') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

[class^='game-icons'],
[class*=' game-icons'] {
	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: 'game-icons' !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Enable Ligatures ================ */
	letter-spacing: 0;
	-webkit-font-feature-settings: 'liga';
	-moz-font-feature-settings: 'liga=1';
	-moz-font-feature-settings: 'liga';
	-ms-font-feature-settings: 'liga' 1;
	font-feature-settings: 'liga';
	-webkit-font-variant-ligatures: discretionary-ligatures;
	font-variant-ligatures: discretionary-ligatures;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	overflow: hidden;
	padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--dark-font);
	font-family: var(--header-font);
	font-weight: 700;
}

a {
	color: var(--primary);
}

.overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	user-select: none;
}

.tabular-nums {
	font-variant-numeric: tabular-nums;
}

.numeric-style,
.numeric-style * {
	font-family: 'Rubik', sans-serif;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}
.body-style {
	font-family: var(--game-font);
	font-weight: normal;
	font-variant-numeric: normal;
}

body > div > canvas:nth-child(1) {
	border-radius: 0 8px 0 0;
}

hr {
	border: 0;
	background: var(--light-border-color);
	height: 2px;
}

/* Animations */

.fade-enter-active,
.fade-leave-active {
	transition: opacity var(--primary-transition);
}
.fade-slow-enter-active,
.fade-slow-leave-active {
	transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to,
.fade-slow-enter,
.fade-slow-leave-to {
	opacity: 0;
}

.zoom-enter-active,
.zoom-leave-active,
.zoom-reverse-enter-active,
.zoom-reverse-leave-active {
	transition: opacity 0.1s, transform 0.1s;
}
.zoom-enter,
.zoom-reverse-leave-to {
	opacity: 0;
	transform: scale(0.8);
}
.zoom-leave-to,
.zoom-reverse-enter {
	opacity: 0;
	transform: scale(1.2);
}

.slide-up-enter-active,
.slide-up-leave-active {
	transition: opacity 0.1s, transform 0.1s;
}
.slide-up-enter,
.slide-up-leave-to {
	opacity: 0;
	transform: translateY(16px);
}

/* Scrollbar */

::-webkit-scrollbar {
	background: transparent;
	width: 14px;
}
::-webkit-scrollbar-track {
	background: var(--light-border-color);
	border-radius: 30px;
	border: 3px solid transparent;
	background-clip: padding-box;
}
::-webkit-scrollbar-thumb {
	background: var(--light-border-color);
	border-radius: 50px;
	border: 3px solid transparent;
	background-clip: padding-box;
}
::-webkit-scrollbar-corner {
	background: rgba(0, 0, 0, 0);
}