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

		--background: #100000;
		--background-hover: #202020;
		--foreground: #cbd5e1;
		--foreground-hover: hsla(0, 0%, 95%, 1);

		--gradient1: linear-gradient(to bottom right, #c9293b, #51184b);
		--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, #c9293b, #51184b);
		--gradient4: linear-gradient(to bottom right, #064a9a, #0a2027);
		--gradient5: radial-gradient(at 0% 24%, #51184b 0px, transparent 50%),
			radial-gradient(at 87% 78%, #6e204a 0px, transparent 50%),
			radial-gradient(at 0% 78%, #51184b 0px, transparent 50%),
			radial-gradient(at 77% 11%, #e30017 0px, transparent 50%),
			radial-gradient(at 86% 40%, hsla(224, 7%, 52%, 1) 0px, transparent 50%),
			radial-gradient(at 58% 1%, #c9293b 0px, transparent 50%),
			radial-gradient(at 53% 75%, #51184b 0px, transparent 50%);
		--gradient6: linear-gradient(to bottom right, #fbbf24, #fb7185);
		--gradient7: linear-gradient(to bottom right, #e30017, #c9293b);

		--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: #250302;
		--card-hover: #3b1e1e;
		--card-foreground: #f1f1f1;
		--card-foreground-hover: #c5b2b2;

		/* --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: #740000;
		--primary2: #270a0a;
		--accent: #a19d92;
		--accent2: #b2afaf;

		--primary-hover: rgb(87, 46, 46);
		--primary-gradient: linear-gradient(to right, rgb(111, 21, 21), rgb(87, 46, 46));
		--primary-foreground: #e1cbcb;
		--primary-foreground-hover: #b89494;

		/* --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: #454647;
		--border-hover: #fe4c5f;

		/* --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: #250302b3;
		--header-background-hover: rgb(87, 46, 46);
		--header-foreground: hsl(216, 12%, 84%);
		--header-foreground-hover: #9ca3af;

		--paragraph-foreground: #d1d5db;

		--form-box-background: #151515;

		--input: #242424;
		--input-active: #170202;
		--input-foreground: #cbd5e1;
		--input-hover: #242424;
		--input-select: #3b1e1e;

		--sidebar-background: #250302;
		--sidebar-background-hover: var(--primary);
		--sidebar-foreground: hsla(215 20.2% 65.1%);
		--sidebar-foreground-hover: hsla(0, 0%, 95%, 1);
		--sidebar-primary: #3b1e1e;
		--sidebar-primary-hover: #9a0606;
		--sidebar-primary-foreground: hsla(202, 21%, 45%, 1);
		--sidebar-primary-foreground-hover: hsla(0, 0%, 95%, 1);
		--sidebar-accent: rgb(111, 21, 21);
		--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: rgb(87, 46, 46);
		--sidebar-border-hover: rgb(111, 21, 21);
		--sidebar-ring: rgb(111, 21, 21);
		--sidebar-ring-hover: rgb(87, 46, 46);

		--submenu-background: #371f1f;
		--submenu-background-hover: #634b4b;

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

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

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