@layer base {
	:root {
		--white: hsla(0 0% 100%);
		--black: hsla(0 0% 0%);

		--background: hsla(222.2 84% 4.9%);
		--background-hover: hsla(213, 31%, 26%, 1);
		--foreground: #cbd5e1;
		--foreground-hover: hsla(0, 0%, 95%, 1);

		--gradient1: linear-gradient(to bottom right, #fbbf24, #fb7185);
		--gradient2: radial-gradient(closest-side at center, #1f2937 0%, transparent 120%), radial-gradient(at 29% 66%, hsla(223, 100%, 65%, .14) 0px, transparent 50%), radial-gradient(at 47% 51%, hsla(210, 100%, 69%, .29) 0px, transparent 50%), radial-gradient(at 34% 34%, hsla(240, 100%, 87%, .35) 0px, transparent 50%), radial-gradient(at 74% 32%, hsla(280, 100%, 75%, .26) 0px, transparent 50%), radial-gradient(at 57% 66%, hsla(22, 100%, 77%, .19) 0px, transparent 50%), radial-gradient(at 42% 84%, hsla(240, 100%, 70%, .15) 0px, transparent 50%), radial-gradient(at 59% 10%, hsla(343, 100%, 76%, .17) 0px, transparent 50%);
		--gradient3: linear-gradient(to bottom right, #8b5cf6, #0ea5e9);
		--gradient4: linear-gradient(to bottom right, #064a9a, #0a2027);
		--gradient5: radial-gradient(at 0% 24%, hsla(212, 87%, 25%, 1) 0px, transparent 50%),
			radial-gradient(at 87% 78%, hsla(211, 85%, 19%, 1) 0px, transparent 50%),
			radial-gradient(at 0% 78%, hsla(214, 77%, 13%, 1) 0px, transparent 50%),
			radial-gradient(at 77% 11%, hsla(216, 52%, 21%, 1) 0px, transparent 50%),
			radial-gradient(at 86% 40%, hsla(224, 7%, 52%, 1) 0px, transparent 50%),
			radial-gradient(at 58% 1%, hsla(214, 19%, 39%, 1) 0px, transparent 50%),
			radial-gradient(at 53% 75%, hsla(210, 0%, 53%, 1) 0px, transparent 50%);

		--glow1: 0 2px 4px hsla(0, 0%, 0%, 0.5), 0 0 20px rgb(95 96 231), 0 0 80px rgb(61 63 71), inset -1px -1px 0 hsla(0, 0%, 0%, 0.3), inset 1px 1px 0 hsla(0, 0%, 100%, 0.3);

		--card: #0f172a;
		--card-hover: #1e293b;
		--card-foreground: #94a3b8;
		--card-foreground-hover: #cbd5e1;

		/* --popover: hsla(213, 68%, 26%, 1);
		--popover-hover: hsla(213, 31%, 26%, 1);
		--popover-foreground: hsla(202, 21%, 45%, 1);
		--popover-foreground-hover: hsla(0, 0%, 95%, 1); */

		--primary: #064a9a;
		--primary2: #0a2027;
		--accent: #a19d92;
		--accent2: #afb2b2;

		--primary-hover: hsla(213, 31%, 26%, 1);
		--primary-gradient: linear-gradient(to right, hsla(213, 68%, 26%, 1), hsla(213, 31%, 26%, 1));
		--primary-foreground: #cbd5e1;
		--primary-foreground-hover: #94a3b8;

		/* --secondary: hsla(213, 31%, 26%, 1);
		--secondary-foreground: hsla(202, 21%, 45%, 1);
		--secondary-hover: hsla(213, 68%, 26%, 1);
		--secondary-gradient: linear-gradient(to right, hsla(213, 31%, 26%, 1), hsla(213, 68%, 26%, 1));
		--secondary-foreground-hover: hsla(0, 0%, 95%, 1); */

		/* --muted: hsla(202, 21%, 45%, 1);
		--muted-foreground: hsla(0, 0%, 95%, 1);
		--muted-hover: hsla(213, 31%, 26%, 1);
		--muted-gradient: linear-gradient(to right, hsla(202, 21%, 45%, 1), hsla(213, 31%, 26%, 1));
		--muted-foreground-hover: hsla(213, 68%, 26%, 1); */

		/* --accent: hsla(213, 68%, 26%, 1);
		--accent-foreground: hsla(202, 21%, 45%, 1);
		--accent-hover: hsla(213, 31%, 26%, 1);
		--accent-gradient: linear-gradient(to right, hsla(213, 68%, 26%, 1), hsla(213, 31%, 26%, 1));
		--accent-foreground-hover: hsla(0, 0%, 95%, 1); */

		--border: hsla(213, 31%, 26%, 1);
		--border-hover: hsla(213, 68%, 26%, 1);

		/* --ring: hsla(213, 68%, 26%, 1);
		--ring-hover: hsla(213, 31%, 26%, 1);
		--ring-active: hsla(202, 21%, 45%, 1); */

		--header-header-background: #020617;
		--header-background: hsla(222, 47%, 11%, 0.702);
		--header-background-hover: hsla(213, 31%, 26%, 1);
		--header-foreground: hsl(216, 12%, 84%);
		--header-foreground-hover: #9ca3af;

		--paragraph-foreground: #d1d5db;

		--form-box-background: hsla(222.2 47.4% 11.2%);

		--input: #64748b28;
		--input-active: #020617;
		--input-foreground: #cbd5e1;
		--input-hover: #020617;
		--input-select: #1e293b;

		--sidebar-background: hsla(222.2 47.4% 11.2%);
		--sidebar-background-hover: var(--primary);
		--sidebar-foreground: hsla(215 20.2% 65.1%);
		--sidebar-foreground-hover: hsla(0, 0%, 95%, 1);
		--sidebar-primary: #1e293b;
		--sidebar-primary-hover: #064a9a;
		--sidebar-primary-foreground: hsla(202, 21%, 45%, 1);
		--sidebar-primary-foreground-hover: hsla(0, 0%, 95%, 1);
		--sidebar-accent: hsla(213, 68%, 26%, 1);
		--sidebar-accent-hover: hsla(213, 31%, 26%, 1);
		--sidebar-accent-foreground: hsla(202, 21%, 45%, 1);
		--sidebar-accent-foreground-hover: hsla(0, 0%, 95%, 1);
		--sidebar-border: hsla(213, 31%, 26%, 1);
		--sidebar-border-hover: hsla(213, 68%, 26%, 1);
		--sidebar-ring: hsla(213, 68%, 26%, 1);
		--sidebar-ring-hover: hsla(213, 31%, 26%, 1);

		--submenu-background: #1f2937;
		--submenu-background-hover: #4b5563;

		--destructive: hsla(0 62.8% 30.6%);
		--destructive-foreground: hsla(210 40% 98%);

		--chart-1: hsla(220 70% 50%);
		--chart-2: hsla(160 60% 45%);
		--chart-3: hsla(30 80% 55%);
		--chart-4: hsla(280 65% 60%);
		--chart-5: hsla(340 75% 55%);

		--chart-1-hover: hsla(200, 100%, 60%, 1);
		--chart-2-hover: hsla(120, 80%, 60%, 1);
		--chart-3-hover: hsla(30, 100%, 60%, 1);
		--chart-4-hover: hsla(0, 100%, 60%, 1);
		--chart-5-hover: hsla(280, 100%, 60%, 1);


		--box-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
		--box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
		--box-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
		--box-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
		--box-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

		--rounded-0: 0px;
		--rounded-sm: 0.125rem;
		--rounded: 0.25rem;
		--rounded-md: 0.375rem;
		--rounded-lg: 0.5rem;
		--rounded-xl: 0.75rem;
		--rounded-2xl: 1rem;
		--rounded-3xl: 1.5rem;
		--rounded-full: 9999px;
	}
}


* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-moz-tap-highlight-color: rgba(0, 0, 0, 0);
	-ms-tap-highlight-color: rgba(0, 0, 0, 0);
	-o-tap-highlight-color: rgba(0, 0, 0, 0);
	/* scrollbar-color:
		color-mix(in oklch, currentColor 35%, transparent) transparent; */
}

*:before,
*:after {
	box-sizing: inherit;
}

:focus {
	outline: none;
}

:invalid,
:required,
:valid {
	border: 0;
	outline: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

::selection {
	background: var(--primary-foreground);
	color: var(--primary);
}

html {
	height: 100%;
	background: var(--background);
	color-scheme: dark;
}

body {
	font-family: 'barlow', sans-serif;
	font-size: 16px;
	line-height: 20px;
	width: 100%;
	height: 100%;
	background-color: var(--background);
	color: var(--foreground);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7);
	display: none;
	justify-content: center;
	align-items: center;
	z-index: 1000;
}

.modal {
	position: relative;
	background: white;
	border-radius: 8px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
	overflow: hidden;
	display: inline-block;
}

.modal img {
	display: block;
	max-width: 100%;
	border-radius: 8px;
}

input:not([type="range"]),
textarea,
select,
option,
button {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	border: none;
	background: none;
	outline: none;
	line-height: inherit;
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	-o-appearance: none;
	appearance: none;
}

input:not([type="range"]) {
	text-overflow: ellipsis;
	overflow: hidden;
}

select,
select option {
	background: var(--input);
	color: var(--input-foreground);
	padding: 10px;
}

::placeholder {
	color: inherit;
	opacity: 0.5;
}

a {
	text-decoration: none;
	color: inherit;
}

mark {
	background: none;
	color: inherit;
}

img,
figure,
iframe {
	display: block;
}

img {
	color: transparent !important;
	text-shadow: none !important;
}

img.cover {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

br+br,
.clear {
	clear: both;
}

.ease,
a {
	transition: all 250ms ease;
}

.easeSlow {
	transition: all 500ms ease;
}

.easeNone {
	transition: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "oxanium";
}

h1 {
	font-size: 1.875em;
	line-height: 20px;
}

h2 {
	font-size: 1.563em;
	line-height: 20px;
}

h3 {
	font-size: 1.25em;
	line-height: 20px;
}

h4 {
	font-size: 1.125em;
	line-height: 20px;
}

h5 {
	font-size: 1em;
	line-height: 20px;
}

h6 {
	font-size: 0.875em;
	line-height: 20px;
}

.asiaxgame {
	position: relative;
	display: block;
	width: 100%;
	min-height: 100%;
	/* max-width: 1800px; */
	margin: auto;
	overflow: hidden;
	background-size: 3em 10em;
	background-color: var(--background);
	opacity: 1;
}

.main {
	position: relative;
	float: left;
	width: 100%;
	padding: 0 0 0 280px;
	transition: all 250ms ease;
}

.main.active {
	padding: 0 0 0 0;
}

.main-layout {
	position: relative;
	float: left;
	width: 100%;
}

.main-layout.padding10 {
	padding: 10px;
}

.main-layout.width300 {
	width: 300px;
}

.main-layout.width-300 {
	width: calc(100% - 300px);
}

.main-layout.width480max {
	float: none;
	width: 100%;
	max-width: 480px;
	margin: auto;
}

.auth-button-section {
	display: none;
}

@media screen and (max-width:1400px) {
	body {
		font-size: 14px;
	}

	.main,
	.main.active {
		padding: 0 0 0 0;
	}
}

@media screen and (max-width:1200px) {
	.main-layout.padding10 {
		padding: 5px;
	}

	.main-layout.width300 {
		width: 100%;
	}

	.main-layout.width-300 {
		width: 100%;
	}
}

@media screen and (max-width:756px) {
	#auth-buttons {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 1rem;
	}

	#auth-buttons a {
		padding: 1rem;
		width: 100%;
		text-align: center;
	}

	#auth-buttons a:nth-child(1) {
		background-color: var(--primary);
	}

	#auth-buttons a:nth-child(2) {
		color: var(--header-foreground);
		background-image: var(--gradient5);
	}
}