@font-face { font-family: 'title'; font-style: normal; font-display: swap; src: url(../assets/variable.ttf) format('truetype'); }
@font-face { font-family: 'body'; font-style: normal; font-display: swap; src: url(../assets/variable.ttf) format('truetype'); }
@font-face { font-family: 'doc'; font-style: normal; font-weight: 300; font-display: swap; src: url(../assets/doc300.woff2) format('woff2'); }
@font-face { font-family: 'doc'; font-style: normal; font-weight: 400; font-display: swap; src: url(../assets/doc400.woff2) format('woff2'); }
@font-face { font-family: 'doc'; font-style: normal; font-weight: 600; font-display: swap; src: url(../assets/doc600.woff2) format('woff2'); }

:root {
	--black: #000000;
	--white: #ffffff;
	--blue: #747caa;
	--green: #99ac1b;
	--yellow: #ebb100;
	--orange: #d86c39;
	--pink: #d75d7f;
	font-size: 16px;
	font-family: body;
	font-weight: 400;
	color: var(--black);
	background-color: var(--white);
}

html, body { padding: 0; margin: 0; min-width: 60rem; width: 100vw; min-height: 100vh; font-size: 1rem; }

body {
	background-color: var(--white);
	text-align: left;
	overflow-x: hidden;
}
h1, h2, h3 { margin: 0; font-family: doc; font-weight: 300; color: var(--black); padding: 1rem 0; }
h1 { font-size: 2rem; padding-top: 3rem; }
h2 { font-size: 1.7rem; border-top: 1px solid #ddd; padding-top: 3rem; margin-top: 3rem; }
h3 { font-size: 1.3rem; margin-top: 3rem; }
h2 + h3 { margin-top: 0; }

header {
	background-color: var(--white);
	position: relative; padding: 1rem 2rem; box-sizing: border-box;
	border-image: linear-gradient(51deg, var(--blue) 20%, var(--green) 35%, var(--yellow) 50%, var(--orange) 65%, var(--pink) 80%) 1;
	border-bottom-width: 2px; border-bottom-style: solid;
}
header img { height: 3rem; vertical-align: middle; }
header p { display: inline-block; vertical-align: middle; margin: 0 1rem; padding: 0; }
header p:first-of-type  { font-size: 2rem; font-family: title; font-style: normal; position: relative; z-index: 0; text-transform: uppercase; font-weight: 200; }
header p:last-of-type { font-size: 1rem; font-family: body; letter-spacing: 0.4rem; text-transform: uppercase; }
header a { border: 0; outline: 0; color: var(--black); text-decoration: none; }

nav { position: fixed; left: 0; bottom: 0; top: calc(5rem + 4px); width: 15rem; border-right: 1px solid #ddd; overflow-y: auto;
	font-size: 0.8rem; box-sizing: border-box; padding: 2rem 0; font-family: doc; letter-spacing: 0.02rem; background: #fafafa; }
nav a { display: block; padding: 0.7rem 2rem; text-decoration: none; color: var(--black); transition: background-color 0.3s; }
nav a:hover { background-color: #0002; }
nav a.current { color: var(--white); background-color: var(--blue) !important; }
nav a.l1 { padding-left: 2rem; }
nav a.l2 { padding-left: 3.5rem; }

main { 
	position: fixed; top: calc(5rem + 4px); left: 15rem; right: 0; bottom: 0; overflow-y: auto; 
	font-size: 0.9rem; color: #000c; letter-spacing: 0.02rem; line-height: 1.2rem; background-color: #fafafa; }
main section { padding: 2rem 5rem; min-height: 100vh; box-sizing: border-box; font-family: doc; background-color: #fff; 
	box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); margin-bottom: 3rem; padding-bottom: 5rem; }
main section code:not([class*="language-"]) { 
	font-style: normal; color: var(--blue); display: inline-block; padding: 0.2rem 0.3rem; background-color: #0001;
	border-radius: 0.2rem; font-family: monospace; font-size: 0.75rem;
}
main section strong { font-weight: 600; color: var(--blue); }
main section em { font-style: normal; color: var(--pink); }
main section ul { padding: 0; list-style-position: inside; }
main section ol { padding: 0; list-style-position: inside; }
main section li { margin-top: 1.2rem; }
main section li p { padding-left: 2rem; }
main section li::before { content: ""; padding-left: 1rem; }
main section li > strong { padding-left: 1rem; display: inline-block; }
main section pre { margin: 2rem 0 !important; }
main a { color: inherit; font-weight: 600; text-decoration: none; }
main a:hover { text-decoration: underline; }

main .light { color: #0004; }

p.warning { border-radius: 0.5rem; padding: 1rem 2rem; margin: 2rem 0; color: #0008; background-color: #d75d7f40; }
p.tip { border-radius: 0.5rem; padding: 1rem 2rem; margin: 2rem 0; color: #0008; background-color: #99ac1b40; }
p.example { border-radius: 0.5rem; padding: 1rem 2rem; margin: 2rem 0; color: #000a; background-color: #eee; font-family: monospace; white-space: pre; overflow: auto; }
p.todo { border-radius: 0.5rem; padding: 1rem 2rem; margin: 2rem 0; color: #000a; background-color: #ebb10040; }

img.screen { max-width: 100%; width: 40rem; }

main table.double { width: 100%; border-collapse: collapse; border-spacing: 0; }
main table.double th { padding: 0.5rem; font-weight: 600; background-color: #f0f0f0; border: 1px solid #0003; width: 20%; white-space: nowrap; text-align: center; }
main table.double td { padding: 0.5rem; border: 1px solid #0003; width: 20%; white-space: nowrap; text-align: center; }
main table.double td:first-of-type { font-weight: 600; background-color: #f0f0f0 !important; text-align: right !important; }
main table.double tr:nth-child(even) td { background-color: #fafafa; }

main table.double.keywords td:last-child { white-space: normal; width: 100%; }
main table.double.keywords td:last-child code { margin-top: 0.2rem; margin-right: 0.2rem; }

main table.members { width: 100%; border-collapse: collapse; border-spacing: 0; }
main table.members td { padding: 0.5rem; border: 1px solid #0003; }
main table.members tr:nth-child(even) td { background-color: #fafafa; }
main table.members td:first-of-type { font-family: monospace; white-space: nowrap; }
main table.members td.static::before { 
	content: 'static'; font-style: normal; color: var(--blue); display: inline-block; padding: 0.2rem 0.3rem; background-color: #0001;
	border-radius: 0.2rem; font-family: monospace; font-size: 0.75rem; margin-right: 0.5rem;
}

main section hr { border: 0; border-top: 1px solid #ddd; margin: 5rem 0; height: 0; width: 100%; }