:root { --font: 'Open Sans', sans-serif; --font-light: 'Open Sans light', sans-serif; --font-title: 'Open Sans', sans-serif; --font-console: 'Ubuntu Mono', monospace; --animation-fast: .25s; --animation-medium: .5s; --animation-slow: .75s; --animation-super-slow: 1s; --surface-1: #d9d9d9; --on-surface-1: #000000; --surface-2: #cccccc; --on-surface-2: #000000; --surface-3: #bfbfbf; --on-surface-3: #000000; --surface-4: #b3b3b3; --on-surface-4: #000000; --surface-5: #a6a6a6; --on-surface-5: #000000; --surface-6: #999999; --on-surface-6: #000000; --background: #e6e6e6; --on-background: #000000; --primary-color:#4A5C92; --on-primary-color: #FFFFFF; --primary-container-color:#DBE1FF; --on-primary-container-color: #00174B; --secondary-color:#585E72; --on-secondary-color: #FFFFFF; --secondary-container-color:#EEEDF4; --on-secondary-container-color: #161B2C; --tertiary-color: #745471; --on-tertiary-color:#FFFFFF; --tertiary-container-color: #E3E2E9; --on-tertiary-container-color:#2B122B; --error-color:#BA1A1A; --on-error-color: #FFFFFF; --error-container-color:#FFDAD6; --on-error-container-color: #410002; margin: 0; padding:0; overflow-x: hidden; -webkit-tap-highlight-color: transparent; } :root[data-theme=light-you]{ --surface-1: #bcd6f5; --on-surface-1: #000000; --surface-2: #a6c8f2; --on-surface-2: #000000; --surface-3: #90baef; --on-surface-3: #000000; --surface-4: #79adec; --on-surface-4: #000000; --surface-5: #639fe8; --on-surface-5: #000000; --surface-6: #4d91e5; --on-surface-6: #000000; --background: #d2e4f9; --on-background: #000000 } :root[data-theme=dark-you]{ --surface-1: #0a2343; --on-surface-1: #ffffff; --surface-2: #0d2f59; --on-surface-2: #ffffff; --surface-3: #103b6f; --on-surface-3: #ffffff; --surface-4: #134786; --on-surface-4: #ffffff; --surface-5: #17529c; --on-surface-5: #ffffff; --surface-6: #1a5eb2; --on-surface-6: #ffffff; --background: #06182d; --on-background: #ffffff; } :root[data-theme=dark] { --surface-1: #262626; --on-surface-1: #ffffff; --surface-2: #333333; --on-surface-2: #ffffff; --surface-3: #404040; --on-surface-3: #ffffff; --surface-4: #4d4d4d; --on-surface-4: #ffffff; --surface-5: #595959; --on-surface-5: #ffffff; --surface-6: #666666; --on-surface-6: #ffffff; --background: #1a1a1a; --on-background: #ffffff }  @media (prefers-reduced-motion) {  }  html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; border: none; font-size: 100%; font: inherit; vertical-align: baseline; }  article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }  * { box-sizing: border-box; } *:focus { outline: var(--default-outline); } *[disabled]{ transition: none; animation:none; } button, input, select, textarea { border: none; } .box-center{ display: flex; justify-content: center; align-items: center; } .box-x-center{ display: flex; justify-content: center; } .box-x-start{ display: flex; justify-content: flex-start; } .box-x-end{ display: flex; justify-content: flex-end; } .box-x-around{ display:flex; justify-content: space-around; } .box-x-between{ display: flex; justify-content: space-between; } .box-y-center{ display: flex; align-items: center; } .box-y-start{ display: flex; align-items: flex-start; } .box-y-end{ display: flex; align-items: flex-end; } .box-wrap{ display: flex; flex-wrap: wrap; } .box-column{ display: flex; flex-direction: column; } .box-column-reverse{ display: flex; flex-direction: column-reverse; } .box-row{ display: flex; flex-direction: row; } .box-row-reverse{ display: flex; flex-direction: row-reverse; } .box-fraction{ --n: 1; width: calc(100% / var(--n)); } .primary { background: var(--primary-color); color: var(--on-primary-color); } .primary-container { border-radius: 1rem; background: var(--primary-container-color); color: var(--on-primary-container-color); } .secondary { background: var(--secondary-color); color: var(--on-secondary-color); } .secondary-container { border-radius: 1rem; background: var(--secondary-container-color); color: var(--on-secondary-container-color); } .tertiary { background: var(--tertiary-color); color: var(--on-tertiary-color); } .tertiary-container { border-radius: 1rem; background: var(--tertiary-container-color); color: var(--on-tertiary-container-color); } .error { background: var(--error-color); color: var(--on-error-color); } .error-container { border-radius: 1rem; background: var(--error-container-color); color: var(--on-error-container-color); } .surface-1 { background: var(--surface-1); color: var(--on-surface-1); border-radius: 1rem; } .surface-2 { background: var(--surface-2); color: var(--on-surface-3); border-radius: 1rem; } .surface-3 { background: var(--surface-3); color: var(--on-surface-3); border-radius: 1rem; } .surface-4 { background: var(--surface-4); color: var(--on-surface-4); border-radius: 1rem; } .surface-5 { background: var(--surface-5); color: var(--on-surface-5); border-radius: 1rem; } .surface-6 { background: var(--surface-6); color: var(--on-surface-6); border-radius: 1rem; } .text-left { text-align: left; } .text-right { text-align: right; } .text-center { text-align: center; } .text-justify { text-align: justify; } .bold , b, strong { font-weight: bold; } .italic, i, em { font-style: italic; } .no-copy * { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: var(--min-width); } .row { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; } .column { flex-basis: 100%; } @media screen and (min-width: 800px) { .column { flex: 1; } } .monochrome { --scale : 100; filter: grayscale(var(--scale)); } .blur { --scale : 100px; filter: blur(var(--scale)); } .saturate { --scale : 1.5; filter: saturate(var(--scale)); } .bright { --scale : 1.5; filter: brightness(var(--scale)); } button { padding: .65rem 1rem; margin: 0.5rem .5rem; border-radius: 6rem; box-shadow: none; cursor: pointer; font-size: 1rem; height: 3rem; min-width: fit-content; background: var(--surface-2); color: var(--on-surface-2); transition: transform var(--animation-fast) ease-in-out, filter var(--animation-fast) ease-in-out; } button:hover, button:focus { filter: brightness(.9); } :root[data-theme=dark] button:hover, :root[data-theme=dark] button:focus { filter: brightness(1.2); } button:active { transform: scale(.92); } a { color: var(--primary-color); text-decoration: none; } input { border-radius: 1rem; padding: .25rem .75rem; height: 3rem; margin: 0.5rem .5rem; background : var(--surface-2); color: var(--on-surface-2); outline: .15rem solid transparent; } input[type="checkbox"] { margin: 10px; } input:focus { transition: outline-color var(--animation-fast); outline: .15rem solid var(--primary-color); } textarea { border-radius: 1rem; padding: .75rem .75rem; margin: 0.5rem .5rem; background : var(--surface-2); color: var(--on-surface-2); outline: .15rem solid transparent; } textarea:focus { transition: outline-color var(--animation-fast); outline: .15rem solid var(--primary-color); } textarea::placeholder { color: var(--on-item-background-color); } h1 { font-size: 2rem; margin: 1rem 1rem; } h2 { font-size: 1.8rem; margin: 1rem 1rem; } h3 { font-size: 1.6rem; margin: 1rem 1rem; } h4 { font-size: 1.4rem; margin: 1rem 1rem; } h5 { font-size: 1.2rem; margin: 1rem 1rem; } h6 { font-size: 1rem; margin: 1rem 1rem; } html { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } body { position: absolute; width: 100%; height: 100%; margin: 0; padding: 0; background: var(--background); color: var(--on-background); font-family: var(--font); } label { cursor: pointer; } .markdown { display: flex; flex-direction: column; padding: 2rem 2rem; width: 100%; max-width: 75rem; color: var(--on-background); } :root[data-display="mobile"] .markdown { padding: 1rem 0.75rem; } .markdown h1, .markdown h2, .markdown h3, .markdown h4, .markdown h5, .markdown h6 { margin-top: 2rem; color: var(--on-background); filter: brightness(1); } .markdown p { color: var(--on-surface-2); } :root[data-display="mobile"] .markdown h1 { font-size: 1.6rem; margin: 1rem 1rem; } :root[data-display="mobile"] .markdown h2 { font-size: 1.4rem; margin: 1rem 1rem; } :root[data-display="mobile"] .markdown h3 { font-size: 1.2rem; margin: 1rem 1rem; } :root[data-display="mobile"] .markdown h4 { font-size: 1rem; margin: 1rem 1rem; } :root[data-display="mobile"] .markdown h5 { font-size: 0.8rem; margin: 1rem 1rem; } :root[data-display="mobile"] .markdown h6 { font-size: 0.6rem; margin: 1rem 1rem; } .markdown code, .markdown blockquote { position: relative; background-color: var(--surface-2); color: var(--on-surface-1); margin: 1rem; padding: 1rem; font-size: 1rem; border-radius: 0.35rem; font-family: var(--font-console); display: block; line-height: 135%; overflow-x: auto; } .markdown p code { display: inline-flex; margin: 0.2rem; padding: 0.4rem; } .markdown pre code { display: flex; user-select: text; cursor: text; } .markdown code button.copy-button { position: absolute; right: 0.3rem; top: 0.3rem; margin: 0; display: flex; justify-content: center; align-items: center; padding: 0.5rem; min-height: 0.5rem; height: 2rem; border-radius: 0.5rem; } .markdown code button.copy-button:active { transform: none; background: transparent; transition: background var(--animation-fast); } :root[data-display="mobile"] .markdown code *, :root[data-display="mobile"] .markdown blockquote * { font-size: 1rem; } .markdown blockquote { font-family: var(--font-light); font-style: italic; display: block; } .markdown blockquote p { font-weight: bolder; } :root[data-display="mobile"] .markdown blockquote p { font-weight: 380; } .markdown img { width: 100%; object-fit: cover; margin: 1rem 0; border-radius: 0.35rem; } .markdown p { font-size: 1.25rem; margin: 0.75rem 1rem; line-height: 135%; font-weight: 380; } :root[data-display="mobile"] .markdown p { font-size: 1rem; } .markdown hr { opacity: 0.035; border: 0.1rem solid var(--on-surface-1); width: 100%; border-radius: 1rem; } .markdown ul, .markdown ol { padding: 1rem; } .markdown ul li { display: flex; flex-direction: row; align-items: center; font-size: 1.25rem; margin-top: 0.7rem; } .markdown ol li { align-items: center; font-size: 1.25rem; margin-top: 0.5rem; margin-left: 1.5rem; } .markdown ol li { list-style: decimal !important; } .markdown ul li::before { --size: 0.5rem; content: "."; display: inline-block; width: var(--size); height: var(--size); margin-right: 1rem; color: transparent; border-radius: 0.35rem; background: var(--on-surface-1); } :root[data-display="mobile"] .markdown a { font-size: 1rem; line-height: 135%; } div#index-menu { background: var(--surface-2); width: 25rem; min-width: 25rem; height: 100%; padding: 1rem; overflow-y: auto; } :root[data-display="mobile"] div#index-menu { position: fixed; z-index: 9; right: 100%; width: 100%; height: calc(100% - 3rem); transition: right var(--animation-fast) ease-in; } :root[data-display="mobile"] div#index-menu.show { right: 0; } div#index-menu h1#title { display: none; padding-bottom: 1rem; border-bottom: 0.05rem solid var(--surface-3); } :root[data-display="mobile"] div#index-menu h1#title { display: block; } div#index-menu input#searchbar { width: 100%; margin: 0; margin-bottom: 1rem; background: var(--surface-3); } div#index-menu div.container div.item-container { transition: opacity var(--animation-fast); opacity: 1; } div#index-menu div.container.hidden div.item-container { display: none; } div#index-menu div.container.hidding div.item-container { display: flex; } div#index-menu a#index-link { display: flex; position: relative; flex-direction: row; justify-content: start; align-items: center; margin-top: 0.2rem; padding-top: 0.8rem; padding-left: 0; padding-bottom: 0.8rem; border-radius: 5rem; font-size: 1.25rem; color: var(--on-surface-1); cursor: pointer; transition: background var(--animation-fast); }  div#index-menu a#index-link.file::after { content: "."; display: block; position: absolute; left: 0.4rem; top: 0.45rem; width: var(--size); height: 2rem; color: transparent; border-radius: 0.35rem; transition: background var(--animation-fast); background: transparent; color: transparent; } div#index-menu a#index-link.selected::after { background: var(--primary-color); color: var(--primary-color); } div#index-menu a#index-link:focus { border: none; } div#index-menu a#index-link:not(.selected):hover::after, div#index-menu a#index-link:not(.selected):focus::after { background: var(--primary-color); color: var(--primary-color); opacity: 0.5; } div#index-menu div.container a#index-link svg { position: absolute; top: 0.5rem; right: 1rem; fill: var(--on-surface-1); transform: rotateZ(0deg); transition: transform var(--animation-fast); } div#index-menu div.container.hidden a#index-link svg { transform: rotateZ(-90deg); } header#top-bar { position: sticky; top: 0; padding: 0.5rem 1rem; width: 100%; height: 3rem; background: var(--surface-1); } :root[data-display="mobile"] header#top-bar { box-shadow: rgba(0, 0, 0, 0.05) 0px 0.1rem 0.15rem; } header#top-bar a#title { font-size: 1.25rem; color: var(--on-surface-3); } header#top-bar img#logo { height: 1.5rem; margin-right: 0.75rem; } header#top-bar div#icon-bar-id div { padding-left: 1rem; cursor: pointer; } header#top-bar div#icon-bar-id div svg { fill: var(--on-surface-1); width: 24px; } :root[data-display="desktop"] header#top-bar div#icon-bar-id div#menu-icon { display: none; } div#breadcrumb { width: 100%; height: 3rem; padding: 0rem 1rem; font-size: 1rem; border-bottom: 0.1rem solid var(--surface-2); } div#breadcrumb.hide { display: none; } div#breadcrumb a.br-section { margin: 1rem; color: var(--on-surface); cursor: pointer; padding: 0.3rem; border-radius: 0.35rem; } div#breadcrumb a.br-section.current { color: var(--primary-color); } div#breadcrumb div.br-section-next-icon svg { width: 24px; fill: var(--text-color); } footer#footer { margin-top: 2rem; padding: 1rem 2rem 6rem 2rem; width: 100%; max-width: 75rem; border-top: 0.1rem solid var(--surface-2); } :root[data-display="mobile"] footer#footer { padding: 1rem 1rem 1.5rem 1rem; } footer#footer p#text { font-size: 1rem; line-height: 135%; color: var(--surface-6); } .markdown div.index-page ul { display: flex; justify-content: center; flex-wrap: wrap; } :root[data-display="mobile"] .markdown div.index-page ul { flex-direction: column; } .markdown div.index-page h1 { text-align: center; } .markdown div.index-page li::before { content: ""; display: none; } .markdown div.index-page a { padding: 1rem; background: var(--surface-2); border-radius: 0.45rem; margin: 1rem; color: var(--on-surface-2); } :root[data-display="mobile"] .markdown div.index-page a { padding: 1rem; margin: 0.2rem 1rem; width: 100%; } view#home { width: 100%; height: 100%; font-size: 1.6rem; overflow: auto; } view#home h1#title { font-size: 6rem; } :root[data-display="mobile"] view#home h1#title { font-size: 3.5rem; } view#home h1#title img { height: 6rem; margin-right: 0.75rem; } :root[data-display="mobile"] view#home h1#title img { height: 4rem; } view#home h2#subtitle { font-size: 1.25rem; margin-bottom: 4rem; color: var(--on-surface-2); opacity: 0.65; } :root[data-display="mobile"] view#home h2#subtitle { font-size: 1rem; margin-bottom: 4rem; } view#home a#explore { background: var(--surface-2); padding: 1rem 2rem; border-radius: 5rem; font-size: 1rem; opacity: 0.85; color: var(--on-surface-2); } view#wiki { width: 100%; height: 100%;  overflow: auto; font-size: 1.6rem; transition: opacity var(--animation-medium); opacity: 0; } :root[data-display="mobile"] view#wiki { height: calc(100%); } :root { --background: #f2f2f2; --on-background: #444444; --surface-1: #dfdfdf; --on-surface-1: #4a4a4a; --surface-2: #e9e9e9; --on-surface-2: #333333; --surface-3: #bfbfbf; --on-surface-3: #3a3a3a; --surface-4: #b3b3b3; --on-surface-4: #222222; --surface-5: #a6a6a6; --on-surface-5: #2a2a2a; --surface-6: #999999; --on-surface-6: #111111; --text-color: #444444; --primary-color: #268a9f; --on-primary-color: #222; } :root[data-theme="dark"] { --surface-1: #262626; --on-surface-1: #eaeaea; --surface-2: #333333; --on-surface-2: #e9e9e9; --surface-3: #404040; --on-surface-3: #dadada; --surface-4: #4d4d4d; --on-surface-4: #e9e9e9; --surface-5: #595959; --on-surface-5: #cacaca; --surface-6: #666666; --on-surface-6: #c1c1c1; --background: #1a1a1a; --on-background: #e1e1e1; --text-color: #f0f0f0; --primary-color: #7fc3d2; --on-primary-color: #222; } body, view { background: var(--background); } :root[data-display="mobile"] body { display: flex; flex-direction: column; } :root[data-display="mobile"] body { flex-direction: column-reverse; } * { transition: none; } a:focus:not(:hover) { border-radius: 0.35rem; border: 0.15rem solid var(--primary-color); }