:root {
	--font-family			: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
	--font-size				: 16px;
	--header-height			: 90px;
	--line-height			: 26px;
	--link-color			: var(--primary-color);
	--navbar-width			: 360px;
	--page-background-color	: #ffffff;
	--page-foreground-color	: #2f4153;
	--page-max-width		: 760px;
	--primary-color			: #049EF4;
	--separator-color		: #dedede;
	--side-nav-background	: #fbfbfb;
	--side-nav-foreground	: var(--page-foreground-color);
	--spacing-medium		: 10px;
	--table-color			: #eeeeee;
	--title-font-size		: calc(var(--font-size) + 12px);
	--code-background		: #F5F5F5;
	--code-border			: #ccc;
	--header-background		: #fbfbfb;
}

[data-theme="light"]
{
	--page-background-color	: #ffffff;
	--page-foreground-color	: #2f4153;
	--primary-color			: #5D5DFF;
	--separator-color		: #dedede;
	--side-nav-background	: #fbfbfb;
	--table-color			: #eeeeee;
	--code-background		: #F5F5F5;
	--code-border			: #ccc;
	--header-background		: #fbfbfb;
	--header-title			: var(--page-foreground-color);
}

[data-theme="dark"]
{
	--page-background-color	: #1a1a1a;
	--page-foreground-color	: #efefef;
	--primary-color			: #9999FF;
	--separator-color		: #404040;
	--side-nav-background	: #252525;
	--table-color			: #333333;
	--code-background		: #2a2a2a;
	--code-border			: #555555;
	--header-background		: #252525;
	--header-title			: #ffffff;
}

:root {
	--gc-black				: #010103;
	--gc-deep-indigo		: #2f335d;
	--gc-indigo				: #49528c;
	--gc-slate-blue			: #5d67a0;
	--gc-controller-purple	: #707ab2;
	--gc-soft-lavender		: #8b91c9;
	--gc-light-lavender		: #adb3de;
	--gc-frosted-ui			: #e5ecf6;
	--gc-title				: #fcfcfc;
	--gc-orange				: #f2af4c;
	--gc-red				: #d82930;


}

[data-theme="cube"]
{
	--page-background-color	: var(--gc-deep-indigo);
	--page-foreground-color	: var(--gc-frosted-ui);
	--primary-color			: var(--gc-orange);
	--separator-color		: var(--gc-slate-blue);
	--side-nav-background	: var(--gc-indigo);
	--table-color			: var(--gc-slate-blue);
	--code-background		: var(--gc-slate-blue);
	--code-border			: var(--gc-controller-purple);
	--header-background		: var(--gc-slate-blue);
	--header-title			: var(--gc-title);
}

* {
	scrollbar-width		: thin;
	scrollbar-color		: var(--separator-color) transparent;
}

html,
body {
	scrollbar-width		: thin;
	scrollbar-color		: var(--separator-color) transparent;
}

*::-webkit-scrollbar {
	width				: 12px;
	height				: 12px;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
	width				: 12px;
	height				: 12px;
}

*::-webkit-scrollbar-track {
	background			: transparent;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
	background			: transparent;
}

*::-webkit-scrollbar-thumb {
	background-color	: var(--separator-color);
	border-radius		: 6px;
	border				: 2px solid transparent;
	background-clip		: padding-box;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
	background-color	: var(--separator-color);
	border-radius		: 6px;
	border				: 2px solid transparent;
	background-clip		: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
	background-color	: var(--primary-color);
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
	background-color	: var(--primary-color);
}

[data-theme="light"] *,
[data-theme="light"] html,
[data-theme="light"] body {
	scrollbar-color		: #cccccc transparent;
}

[data-theme="light"] *::-webkit-scrollbar-thumb,
[data-theme="light"] html::-webkit-scrollbar-thumb,
[data-theme="light"] body::-webkit-scrollbar-thumb {
	background-color	: #cccccc;
}

[data-theme="light"] *::-webkit-scrollbar-thumb:hover,
[data-theme="light"] html::-webkit-scrollbar-thumb:hover,
[data-theme="light"] body::-webkit-scrollbar-thumb:hover {
	background-color	: var(--primary-color);
}

[data-theme="dark"] *,
[data-theme="dark"] html,
[data-theme="dark"] body {
	scrollbar-color		: #555555 transparent;
}

[data-theme="dark"] *::-webkit-scrollbar-thumb,
[data-theme="dark"] html::-webkit-scrollbar-thumb,
[data-theme="dark"] body::-webkit-scrollbar-thumb {
	background-color	: #555555;
}

[data-theme="dark"] *::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] html::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] body::-webkit-scrollbar-thumb:hover {
	background-color	: var(--primary-color);
}

[data-theme="cube"] *,
[data-theme="cube"] html,
[data-theme="cube"] body {
	scrollbar-color		: var(--gc-controller-purple) transparent;
}

[data-theme="cube"] *::-webkit-scrollbar-thumb,
[data-theme="cube"] html::-webkit-scrollbar-thumb,
[data-theme="cube"] body::-webkit-scrollbar-thumb {
	background-color	: var(--gc-controller-purple);
}

[data-theme="cube"] *::-webkit-scrollbar-thumb:hover,
[data-theme="cube"] html::-webkit-scrollbar-thumb:hover,
[data-theme="cube"] body::-webkit-scrollbar-thumb:hover {
	background-color	: var(--gc-orange);
}

@media screen and (max-width: 350px)
{
	.title {
		display: none !important;
	}
}

@media screen and (max-width: 900px)
{
	.navbar {
		display			: none;
		transform		: translateX(-100%);
		z-index			: 1000;
		box-shadow		: 2px 0 10px rgba(0, 0, 0, 0.1);
	}

	.navbar.open {
		display			: flex;
		transform		: translateX(0);
	}

	.navbar-guide {
		display			: none !important;
	}

	.main {
		margin-left		: 0px !important;
	}

	.header {
	/* width			: 100% !important; */
		width 			: unset !important;
		left			: 0 !important;
		top				: 0 !important;
		right			: 0 !important;
		border-right	: 0 !important;
		z-index			: 1001;
		gap				: 0px !important;
		max-width		: 100vw !important;
		box-sizing		: border-box !important;
	}

	.brand {
		flex-shrink		: 1;
		min-width		: 0;
		max-width		: calc(100% - 100px);
	}

	.controls .menu {
		display			: block !important;
	}

	.navbar-backdrop {
		display			: none;
		position		: fixed;
		top				: 0;
		left			: 0;
		width			: 100%;
		height			: 100%;
		background		: rgba(0, 0, 0, 0.5);
		z-index			: 999;
		opacity			: 0;
		transition		: opacity 0.3s ease-in-out;
	}

	body.menu-open .navbar-backdrop {
		display			: block;
		opacity			: 1;
	}

	.page td:first-child {
	    width: auto !important;
	}

	.page td:last-child {
    	padding-left: 6px !important;
	}
}

@media screen and (max-width: 400px)
{
	:root {
		--font-size		: 14px;
		--line-height	: 22px;
	}
}

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

* {
	font-family			: var(--font-family);
	box-sizing			: border-box;
}

html {
	font-size			: calc(var(--font-size) - 1px);
	line-height			: calc(var(--line-height) - 1px);
}

h1 {
	overflow-wrap		: anywhere;
	font-weight			: 600;
	font-size			: 225%;
}

h2 {
	overflow-wrap		: anywhere;
	font-weight			: normal;
}

a:link, a:visited, a:hover, a:focus, a:active {
	color				: var(--link-color);
	font-weight			: 500;
	background			: none;
	text-decoration		: none;
}

pre {
	border				: solid 1px var(--code-border);
	padding				: 20px;
	overflow-x			: auto;
	white-space			: pre-wrap;
	max-width			: 100%;
}

code {
	display				: inline-block;
	vertical-align		: middle;
	border-radius		: 4px;
	padding				: 0px 5px;
	background			: var(--code-background);
}

body.container {
	margin				: 0;
	padding				: 0;
}

.container {
	display				: flex;
	min-height			: 100vh;
	flex-direction		: column;
	background-color	: var(--page-background-color);
	color				: var(--page-foreground-color);
}

.main {
	flex				: 1;
	margin-left			: var(--navbar-width);
	padding				: var(--header-height) 0;
}

.page {
	padding				: 20px;
	padding-bottom		: 60px;
	max-width			: var(--page-max-width);
	margin				: 0 auto;
}

.page h2 {
	line-height			: 36px;
	font-weight			: normal;
	margin-top			: 28px;
	margin-bottom		: -8px;
	padding-top			: 10px;
	border-top			: dotted 1px var(--separator-color);
}

.page #methods,
.page #properties {
	font-weight			: 600;
	font-size			: 225%;
	line-height			: 36px;
	margin-block-start	: 1.0em;
	margin-block-end	: 1.0em;
	margin-inline-start	: 0px;
	margin-inline-end	: 0px;
/*	opacity				: 0.3;*/
}

.page table {
	overflow-wrap		: anywhere;
	padding				: 10px;
	border				: solid 1px var(--separator-color);
	width				: 100%;
}

.page tbody {
	table-layout		: fixed;
	appearance			: auto;
	border-collapse		: collapse;
	max-width			: 100%;
}

.page tr:not(tr:last-child) {
	border-bottom		: 1px solid var(--table-color);
}

.page td {
	vertical-align		: top;
	padding				: 8px 6px;
}

.page td:first-child {
	width				: 150px;
	word-break			: keep-all;
	white-space			: nowrap;
	font-weight			: 600;
}

.page td:nth-child(2) {
	max-width			: 300px;
}

.page td:last-child {
	padding-left		: 20px;
}


div.header {
	height				: var(--header-height);
	width				: var(--navbar-width);
	background			: var(--header-background);
	border-right		: 1px solid var(--separator-color);
	border-bottom		: 1px solid var(--separator-color);
	position			: fixed;
	padding				: 20px;
	top					: 0;
	left				: 0;
	display				: flex;
	flex-direction		: row;
	gap					: 20px;
	justify-content		: space-between;
	user-select			: none ;
}

div.controls {
	display				: flex;
	flex-direction		: row;
	gap					: 10px;
	align-items			: center;
}

.controls .theme,
.controls .menu {
	width				: 32px;
	height				: 32px;
	aspect-ratio		: 1;
	cursor				: pointer;
	background-size		: contain;
	background-repeat	: no-repeat;
	background-position	: center;
	transition			: opacity 0.2s ease;
	display				: inline-block;
	opacity				: 0.5;
}

.controls .menu {
	display				: none;
}


.controls .theme:hover,
.controls .menu:hover {
	opacity				: 0.8;
}

[data-theme="light"] .controls .menu {
	background-image	: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16' stroke='%232f4153' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

[data-theme="dark"] .controls .menu {
	background-image	: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16' stroke='%23e0e0e0' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

[data-theme="cube"] .controls .menu {
	background-image	: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16' stroke='%23d9e0fa' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

[data-theme="light"] .controls .theme {
	background-image	: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='4' fill='none' stroke='%232f4153' stroke-width='1.5'/%3E%3Cpath d='M12 2v2.5M12 19.5v2.5M2 12h2.5M19.5 12h2.5M5.64 5.64l1.77 1.77M16.59 16.59l1.77 1.77M5.64 18.36l1.77-1.77M16.59 7.41l1.77-1.77' stroke='%232f4153' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

[data-theme="dark"] .controls .theme {
	background-image	: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z' fill='none' stroke='%23e0e0e0' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

[data-theme="cube"] .controls .theme {
	background-image	: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='%23d9e0fa' stroke-width='1.5' d='M4.75 8L12 4l7.25 4v8L12 20l-7.25-4V8Z'/%3E%3Cpath fill='none' stroke='%23d9e0fa' stroke-width='1.5' d='M12 12l7.25-4M12 12L4.75 8M12 12v8'/%3E%3C/svg%3E");
}




div.brand {
	display				: flex;
	flex-direction		: row;
	gap					: 20px;
}

.brand .logo {
	height				: 100%;
}

.brand .title {
	display				: flex;
	flex-direction		: column;
	justify-content		: center;
}

.brand .project {
	color				: var(--header-title);
	white-space			: nowrap;
	font-size			: var(--title-font-size);
	font-weight			: 600;
}

.brand .tagline {
	font-size			: 80%;
	white-space			: nowrap;
}

.navbar {
	position			: fixed;
	top					: var(--header-height);
	left				: 0;
	width				: var(--navbar-width);
	padding				: 20px;
	display				: flex;
	flex-direction		: column;
	overflow-y			: auto;
	height				: calc(100vh - var(--header-height));
	background			: var(--side-nav-background);
	border-right		: 1px solid var(--separator-color);
	gap					: 6px;
	scrollbar-width		: thin;
}

.navbar ul {
	list-style			: none outside none;
	margin				: 0px;
	padding				: 0px;
}

.navbar li {
	margin-left			: 20px;
}

.navbar h2 {
	display				: flex;
	justify-content		: end;
	margin				: 0;
	padding				: 10px;
	padding-top			: 0px;
	margin-bottom		: 10px;
	font-size			: calc(var(--font-size) + 4px);
	border-bottom		: solid 1px var(--separator-color);
	color				: var(--side-nav-foreground);
}

.navbar a {
	color				: var(--side-nav-foreground);
	font-weight			: normal;
	font-size			: 115%;
	text-decoration		: none;
	padding				: 0px;
	margin				: 0px;
	outline				: none;
}

.navbar li:has(a.active) {
	padding-left		: 0px;
}

.navbar a.active {
	color				: var(--link-color);
	font-weight			: 600;
/* line-height			: 200%; */
}

.navbar a:hover {
	transition			: color .1s ease-in-out;
	color				: var(--link-color);
}