@layer theme, base, components, utilities;

@import "tailwindcss";

@theme {
	--color-main: #141520;
	--color-input: #161723;
	--color-panel: #202232;
	--color-block: #2b2e46;
	--color-bright: #333753;

	--color-white: #cdcfdf;

	--font-barlow-condensed-regular: BarlowCondensed-Regular;
	--font-barlow-condensed-bold: BarlowCondensed-Bold;
	--font-barlow-semicondensed-regular: BarlowSemiCondensed-Regular;
	--font-barlow-semicondensed-semibold: BarlowSemiCondensed-SemiBold;
}

@layer utilities {}

a {
	color: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-barlow-condensed-bold);
}

h1 {
	font-size: 48px;
}

h2 {
	font-size: 32px;
}

h2 {
	font-size: 24px;
}

h3 {
	font-size: 20px;
}

h4 {
	font-size: 18px;
}

h5 {
	font-size: 16px;
}

h6 {
	font-size: 14px;
}

p {
	font-size: 16px;
}

body {
	overflow: hidden;
	background-color: var(--color-main);
	color: var(--color-white);
	font-family: var(--font-barlow-semicondensed-regular);
	margin: 0;
}

main {
	overflow-y: auto;
}

main>div {
	width: 100%;
}

.loader {
	animation: loader 1.2s ease infinite;
	background-size: 400% 300%;
	background-image: linear-gradient(-90deg, var(--color-mantle) 0%, var(--color-mantle) 25%, var(--color-surface1) 50%, var(--color-mantle) 75%, var(--color-mantle) 100%);
	user-select: none;
}

.loader-text {
	animation: loader 1.2s ease infinite;
	background-size: 400% 300%;
	background-image: linear-gradient(-90deg, var(--color-mantle) 0%, var(--color-mantle) 25%, var(--color-surface1) 50%, var(--color-mantle) 75%, var(--color-mantle) 100%);
	user-select: none;
	color: #00000000;
	border-radius: 1000px;
}

@keyframes loader {
	0% {
		background-position: 100% 20%;
	}

	50% {
		background-position: 0% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}

.loader {
	width: 48px;
	height: 48px;
	border: 5px solid #FFF;
	border-bottom-color: transparent;
	border-radius: 50%;
	display: inline-block;
	box-sizing: border-box;
	animation: rotation 1s linear infinite;
}

@keyframes rotation {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

@font-face {
	font-family: 'BarlowCondensed-Bold';
	src: local('BarlowCondensed-Bold'), url(./fonts/BarlowCondensed-Bold.ttf) format('truetype');
}

@font-face {
	font-family: 'BarlowCondensed-Regular';
	src: local('BarlowCondensed-Regular'), url(./fonts/BarlowCondensed-Regular.ttf) format('truetype');
}

@font-face {
	font-family: 'BarlowSemiCondensed-Regular';
	src: local('BarlowSemiCondensed-Regular'), url(./fonts/BarlowSemiCondensed-Regular.ttf) format('truetype');
}

@font-face {
	font-family: 'BarlowSemiCondensed-SemiBold';
	src: local('BarlowSemiCondensed-Regular'), url(./fonts/BarlowSemiCondensed-SemiBold.ttf) format('truetype');
}