*, *::before, *::after { box-sizing: border-box; } * { margin: 0; } body { line-height: 1.5; -webkit-font-smoothing: antialiased; } img, picture, video, canvas { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } #root, #__next { isolation: isolate; } :root { color-scheme: light dark; --tn-dda58: rgba(0, 0, 0, 0); --tn-70bf6: hsl(0 0% 0%); --tn-1d5e3: hsl(0 0% 12%); --tn-8bc15: hsl(0 0% 30%); --tn-8e7ee: hsl(0 0% 50%); --tn-bcef7: hsl(0 0% 80%); --tn-6f028: hsl(0 0% 95%); --tn-407fd: hsl(0 0% 100%); --tn-aa513: light-dark( var(--tn-70bf6), var(--tn-407fd) ); --tn-eceec: light-dark( var(--tn-1d5e3), var(--tn-bcef7) ); --tn-a7841: light-dark( var(--tn-8bc15), var(--tn-bcef7) ); --tn-419bd: light-dark( var(--tn-8e7ee), var(--tn-8e7ee) ); --tn-2cc12: light-dark( var(--tn-bcef7), var(--tn-8bc15) ); --tn-1e192: light-dark( var(--tn-6f028), var(--tn-1d5e3) ); --tn-50734: light-dark( var(--tn-407fd), var(--tn-70bf6) ); --tn-b82f6: hsl(210 80% 20%); --tn-1f99e: hsl(210 80% 40%); --tn-d11d1: hsl(210 80% 85%); --tn-888f9: light-dark( var(--tn-b82f6), var(--tn-d11d1) ); --tn-08a52: light-dark( var(--tn-1f99e), var(--tn-d11d1) ); --tn-7d8ee: light-dark( var(--tn-d11d1), var(--tn-b82f6) ); --tn-4d521: hsl(270 100% 50%); --tn-e129f: hsl(270 100% 70%); --tn-c2853: hsl(270 100% 90%); --tn-3dce3: light-dark( var(--tn-4d521), var(--tn-c2853) ); --tn-98127: light-dark( var(--tn-e129f), var(--tn-c2853) ); --tn-3554e: light-dark( var(--tn-c2853), var(--tn-4d521) ); --tn-3b4cd: hsl(240 100% 27%); --tn-edf69: hsl(240 100% 50%); --tn-95155: hsl(195 53% 79%); --tn-ca680: light-dark( var(--tn-3b4cd), var(--tn-95155) ); --tn-e8db9: light-dark( var(--tn-edf69), var(--tn-95155) ); --tn-b4338: light-dark( var(--tn-95155), var(--tn-3b4cd) ); --tn-16075: hsl(120 100% 20%); --tn-37bef: hsl(120 100% 50%); --tn-59731: hsl(120 73% 75%); --tn-fe021: light-dark( var(--tn-16075), var(--tn-59731) ); --tn-7d36f: light-dark( var(--tn-37bef), var(--tn-59731) ); --tn-9029e: light-dark( var(--tn-59731), var(--tn-16075) ); --tn-1c856: hsl(55 100% 27%); --tn-9eb75: hsl(60 100% 50%); --tn-a2379: hsl(50 100% 95%); --tn-f169c: light-dark( var(--tn-1c856), var(--tn-a2379) ); --tn-81dfc: light-dark( var(--tn-9eb75), var(--tn-a2379) ); --tn-51582: light-dark( var(--tn-a2379), var(--tn-1c856) ); --tn-8a05a: hsl(0 100% 27%); --tn-8e682: hsl(0, 100%, 50%); --tn-94634: hsl(0 100% 75%); --tn-15cca: light-dark( var(--tn-8a05a), var(--tn-94634) ); --tn-c2d9e: light-dark( var(--tn-8e682), var(--tn-94634) ); --tn-070cd: light-dark( var(--tn-94634), var(--tn-8a05a) ); } .is-hoverable:hover { background-color: var(--tn-2cc12); } .is-copyable { font-variant-ligatures: none; position: relative; } .is-copyable:hover { color: var(--tn-e8db9); cursor: copy; } .is-copyable:hover::after { position: absolute; top: 10px; right: 10px; content: url(/static/img/symbols/content_copy.svg); } .is-white { color: var(--tn-eceec); background-color: var(--tn-50734); } .is-light { color: var(--tn-eceec); background-color: var(--tn-1e192); } .is-grey-light { color: var(--tn-eceec); background-color: var(--tn-2cc12); } .is-grey { color: var(--tn-eceec); background-color: var(--tn-419bd); } .is-grey-dark { color: var(--tn-50734); background-color: var(--tn-a7841); } .is-dark { color: var(--tn-1e192); background-color: var(--tn-eceec); } .is-black { color: var(--tn-1e192); background-color: var(--tn-aa513); } .is-primary { color: var(--tn-50734); background-color: var(--tn-08a52); } .is-link { color: var(--tn-50734); background-color: var(--tn-98127); } .is-info { color: var(--tn-50734); background-color: var(--tn-e8db9); } .is-success { color: var(--tn-50734); background-color: var(--tn-7d36f); } .is-warning { color: var(--tn-50734); background-color: var(--tn-81dfc); } .is-danger { color: var(--tn-50734); background-color: var(--tn-c2d9e); } .is-primary-light { color: var(--tn-888f9); background-color: var(--tn-7d8ee); } .is-link-light { color: var(--tn-3dce3); background-color: var(--tn-3554e); } .is-info-light { color: var(--tn-ca680); background-color: var(--tn-b4338); } .is-success-light { color: var(--tn-fe021); background-color: var(--tn-9029e); } .is-warning-light { color: var(--tn-f169c); background-color: var(--tn-51582); } .is-danger-light { color: var(--tn-15cca); background-color: var(--tn-070cd); } .is-primary-dark { background-color: var(--tn-888f9); } .is-link-dark { background-color: var(--tn-3dce3); } .is-info-dark { background-color: var(--tn-ca680); } .is-success-dark { background-color: var(--tn-fe021); } .is-warning-dark { background-color: var(--tn-f169c); } .is-danger-dark { background-color: var(--tn-15cca); } .is-primary-inverted { background-color: var(--tn-50734); color: var(--tn-08a52); } .is-link-inverted { background-color: var(--tn-50734); color: var(--tn-98127); } .is-info-inverted { background-color: var(--tn-50734); color: var(--tn-e8db9); } .is-success-inverted { background-color: var(--tn-50734); color: var(--tn-7d36f); } .is-warning-inverted { background-color: var(--tn-50734); color: var(--tn-81dfc); } .is-danger-inverted { background-color: var(--tn-50734); color: var(--tn-c2d9e); } .is-primary-outlined { background-color: var(--tn-50734); color: var(--tn-08a52); border-style: solid; border-width: 2px; border-color: var(--tn-08a52); } .is-link-outlined { background-color: var(--tn-50734); color: var(--tn-98127); border-style: solid; border-width: 2px; border-color: var(--tn-98127); } .is-info-outlined { background-color: var(--tn-50734); color: var(--tn-e8db9); border-style: solid; border-width: 2px; border-color: var(--tn-e8db9); } .is-success-outlined { background-color: var(--tn-50734); color: var(--tn-7d36f); border-style: solid; border-width: 2px; border-color: var(--tn-7d36f); } .is-warning-outlined { background-color: var(--tn-50734); color: var(--tn-81dfc); border-style: solid; border-width: 2px; border-color: var(--tn-81dfc); } .is-danger-outlined { background-color: var(--tn-50734); color: var(--tn-c2d9e); border-style: solid; border-width: 2px; border-color: var(--tn-c2d9e); } .is-light-to-dark { height: 1em; position: relative; animation: light-to-dark 1s infinite; } @keyframes light-to-dark { 0% { color: var(--tn-419bd); } 40% { color: var(--tn-419bd); } 60% { color: var(--tn-2cc12); } 100% { color: var(--tn-2cc12); } } @keyframes bounce-in-up { from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { opacity: 0; transform: translate3d(0, 3000px, 0) scaleY(5); } 60% { opacity: 1; transform: translate3d(0, -20px, 0) scaleY(0.9); } 75% { transform: translate3d(0, 10px, 0) scaleY(0.95); } 90% { transform: translate3d(0, -5px, 0) scaleY(0.985); } to { transform: translate3d(0, 0, 0); } } .animated { animation-duration: 0.5s; animation-fill-mode: both; } .bounce-in-up { animation-name: bounce-in-up; } .p1 { padding: 1rem; } .p2 { padding: 0.5rem; } .p3 { padding: 0.33rem; } .p4 { padding: 0.25rem; } #footer { --tn-99b47: 2em; --tn-5d334: 1em; justify-content: space-between; background-color: var(--tn-1e192); padding: var(--tn-99b47); } #footer svg { fill: var(--tn-eceec); } #footer > div { display: flex; align-items: center; padding: var(--tn-5d334); } #footer > div.ad-wide { min-width: 100px; flex-grow: 1; background-color: red; } #footer > div > span { padding: 0.25rem; } #footer div.icon { height: 1.6rem; } @media (min-width: 768px) { #footer { flex-direction: row; } #footer > div.inner { flex-direction: row; } } section, div.section, section.section { margin-top: 2rem; margin-bottom: 2rem; } main .is-full-width { width: 100%; } main .is-half-width { width: 50%; } div.container { width: 100%; padding-top: 1rem; padding-bottom: 1rem; } code, samp, kbd { font-family: var(--tn-4b052); white-space: nowrap; padding-left: 0.15rem; padding-right: 0.15rem; } pre { position: relative; padding: 1rem; margin-bottom: 2rem; max-width: 100%; overflow: auto; background-color: var(--tn-1e192); font-variant-ligatures: none; } pre:hover { cursor: copy; } pre:hover::after { position: absolute; top: 10px; right: 10px; content: url(/static/img/symbols/content_copy.svg); } pre code { border: 0; padding: 0; margin: 0; white-space: break-spaces; } pre code span { font-size: 0.9rem; font-family: var(--tn-4b052); } main > header { width: 100%; background-color: var(--tn-7d8ee); margin-top: 0; margin-bottom: 0; padding: 2rem; border-style: solid; border-width: 1px; border-color: var(--tn-7d8ee); } time { font-size: 0.8rem; color: var(--tn-08a52); width: 100%; text-align: right; margin-top: -1.25rem; margin-right: 0.75rem; margin-bottom: 2rem; } main > article { width: 100%; min-height: 20rem; } main > article p { text-align: justify; } main > article div.image { margin: 4rem; } main > article, main > article p, main > article ul, main > article ol { margin-bottom: 2rem; } main > article li { line-height: 1.5rem; margin-bottom: 0.5rem; } main > article li > p { margin-bottom: 0; } main > article blockquote { margin-left: 0.5rem; padding: 0.5rem; border-left-style: solid; border-left-width: 3px; border-left-color: var(--tn-08a52); background-color: var(--tn-7d8ee); } :root { --tn-92395: light-dark( hsl(180deg, 33%, 38%), hsl(220 10% 70%) ); --tn-03161: light-dark(hsl(0 100% 50%), hsl(0 100% 70%)); --tn-0c36a: light-dark( hsl(0 100% 27%), hsl(0 100% 77%) ); --tn-e2fbb: light-dark( hsl(300 100% 27%), hsl(300 100% 77%) ); --tn-9d6a6: light-dark( hsl(241 69% 29%), hsl(241 69% 79%) ); --tn-6d4e7: light-dark( hsl(120 100% 25%), hsl(120 100% 75%) ); --tn-ece2e: light-dark( hsl(0 0% 27%), hsl(0 0% 77%) ); --tn-20fe8: light-dark( hsl(241 69% 29%), hsl(241 69% 79%) ); --tn-b2c1a: light-dark( hsl(300 100% 27%), hsl(300 100% 77%) ); --tn-32b2c: light-dark( hsl(300 100% 25%), hsl(300 100% 75%) ); --tn-56388: light-dark( hsl(222 100% 43%), hsl(222 100% 73%) ); --tn-6c1e8: light-dark( hsl(120 100% 25%), hsl(120 100% 75%) ); --tn-82be9: light-dark( hsl(71 56% 36%), hsl(71 56% 76%) ); --tn-4f006: light-dark( hsl(120 100% 25%), hsl(120 100% 75%) ); --tn-186c7: light-dark( hsl(222 100% 43%), hsl(222 100% 73%) ); --tn-69639: light-dark( hsl(0 100% 27%), hsl(0 100% 77%) ); --tn-dfae1: light-dark( hsl(60 100% 31%), hsl(60 100% 71%) ); --tn-d76d5: light-dark( hsl(240 100% 27%), hsl(320 90% 70%) ); --tn-74417: light-dark(hsl(0 0% 40%), hsl(0 0% 70%)); --tn-2cab7: light-dark( hsl(277 100% 57%), hsl(277 100% 77%) ); --tn-97b11: light-dark(hsl(0 0% 40%), hsl(0 0% 70%)); --tn-6b049: light-dark(hsl(0 70% 43%), hsl(0 70% 73%)); --tn-4e5e0: light-dark( hsl(336 38% 57%), hsl(336 38% 77%) ); --tn-ad502: light-dark(hsl(0 70% 43%), hsl(0 70% 73%)); --tn-e68f7: light-dark(hsl(0 0% 93%), hsl(0 0% 93%)); } div.highlight { margin-top: 2rem; margin-bottom: 2rem; } div.highlight > pre { border-style: solid; border-width: 1px; border-color: var(--tn-e68f7); } div.highlight .hll { background-color: #ffffcc; } div.highlight .c, div.highlight .c1, div.highlight .cm, div.highlight .ch, div.highlight .cp, div.highlight .cpf, div.highlight .cs { color: var(--tn-92395); font-style: italic; } div.highlight .err { border: 1px solid var(--tn-03161); } div.highlight .bp, div.highlight .k, div.highlight .kd, div.highlight .kp, div.highlight .kr, div.highlight .kt, div.highlight .kn { color: var(--tn-6c1e8); } div.highlight .ow { color: var(--tn-2cab7); } div.highlight .o { color: var(--tn-97b11); } div.highlight .ge { color: var(--tn-e2fbb); font-style: italic; } div.highlight .gd { color: var(--tn-0c36a); } div.highlight .gr { color: var(--tn-03161); } div.highlight .gh { color: var(--tn-9d6a6); } div.highlight .gi { color: var(--tn-6d4e7); } div.highlight .go { color: var(--tn-ece2e); } div.highlight .gp { color: var(--tn-20fe8); } div.highlight .gs { color: var(--tn-b2c1a); } div.highlight .gu { color: var(--tn-32b2c); } div.highlight .gt { color: var(--tn-56388); } div.highlight .na { color: var(--tn-82be9); } div.highlight .nb { color: var(--tn-4f006); } div.highlight .nc { color: var(--tn-186c7); } div.highlight .kc, div.highlight .no { color: var(--tn-69639); } div.highlight .ni { color: var(--tn-97b11); } div.highlight .ne, div.highlight .nd, div.highlight .nf, div.highlight .nn, div.highlight .nv, div.highlight .py, div.highlight .vc, div.highlight .vg, div.highlight .vi { color: var(--tn-d76d5); } div.highlight .nt, div.highlight .nl { color: var(--tn-dfae1); } div.highlight .w { color: var(--tn-e68f7); } div.highlight .il, div.highlight .m, div.highlight .mb, div.highlight .mf, div.highlight .mh, div.highlight .mi, div.highlight .mo { color: var(--tn-74417); } div.highlight .s, div.highlight .sb, div.highlight .sh, div.highlight .si, div.highlight .se, div.highlight .ss, div.highlight .sx, div.highlight .s1, div.highlight .s2, div.highlight .sc { color: var(--tn-ad502); } div.highlight .sd { color: var(--tn-6b049); font-style: italic; } div.highlight .sr { color: var(--tn-4e5e0); } span.is-inner-link { cursor: not-allowed; } a:has(> kbd), a.is-inner-link { font-weight: 600; text-decoration: underline; } a:has(> kbd):hover, a.is-inner-link:hover { background-color: var(--tn-7d8ee); } pre.is-text-file { margin-top: 3rem; margin-bottom: 3rem; border-style: solid; border-width: 1px; border-color: var(--tn-2cc12); background-color: var(--tn-1e192); } pre.is-text-file > p { font-family: var(--tn-4b052); } div.admonition { margin: 2rem; border-style: solid; } div.admonition > header { font-weight: var(--tn-9c02c); padding: 0.5rem; } div.admonition > div { padding: 0.5rem; } div.admonition.primary > header { color: var(--tn-08a52); background-color: var(--tn-7d8ee); } div.admonition.primary { color: var(--tn-08a52); border-color: var(--tn-08a52); } div.admonition.link > header { color: var(--tn-3dce3); background-color: var(--tn-3554e); } div.admonition.link { color: var(--tn-98127); border-color: var(--tn-98127); } div.admonition.info > header { color: var(--tn-ca680); background-color: var(--tn-b4338); } div.admonition.info { color: var(--tn-e8db9); border-color: var(--tn-e8db9); } div.admonition.success > header { color: var(--tn-fe021); background-color: var(--tn-9029e); } div.admonition.success { color: var(--tn-16075); border-color: var(--tn-7d36f); } div.admonition.warning > header { color: var(--tn-f169c); background-color: var(--tn-51582); } div.admonition.warning { color: var(--tn-1c856); border-color: var(--tn-81dfc); } div.admonition.danger > header { color: var(--tn-15cca); background-color: var(--tn-070cd); } div.admonition.danger { color: var(--tn-15cca); border-color: var(--tn-c2d9e); } a { text-decoration: none; color: var(--tn-08a52); } a:hover { background-color: var(--tn-7d8ee); } a.is-disabled { background-color: var(--tn-2cc12); cursor: not-allowed; } a.is-disabled:hover { background-color: var(--tn-2cc12); } main dl { display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; padding-top: 0.5rem; padding-bottom: 0.5rem; margin-bottom: 2rem; background-color: var(--tn-1e192); border-style: solid; border-width: 1px; border-color: var(--tn-eceec); } main dl > dt { flex-basis: 40%; text-align: center; } main dl > dd { flex-basis: 60%; flex-grow: 1; } main dl > dd, main dl > dt { padding: 0.25rem; } details { padding: 0.6rem 1rem; background: var(--tn-1e192); border: 1px solid var(--tn-419bd); border-radius: 4px; } summary { cursor: pointer; font-weight: var(--tn-9c02c); } details[open] { padding-bottom: 0.75rem; } details[open] summary { margin-bottom: 6px; } details[open] > *:last-child { margin-bottom: 0; } hr { border: 1px; border-style: solid; border-color: var(--tn-7d8ee); margin-top: 2rem; margin-bottom: 2rem; } svg.box * { fill: var(--tn-eceec); font-size: 0.35rem; font-family: var(--tn-4b052); } form.search { background-color: var(--tn-7d8ee); margin: 0.35rem; padding: 3px; } form.search div.input-group { position: relative; display: flex; flex-direction: row; width: 100%; border-style: solid; border-width: 2px; border-color: var(--tn-888f9); } input[type="search"] { height: 2rem; width: 100%; background-color: var(--tn-1e192); border-style: solid; border-color: var(--tn-7d8ee); border-width: 1px; box-shadow: none; box-sizing: border-box; outline: 0; padding: 6px 10px; -webkit-appearance: none; -moz-appearance: none; appearance: none; } input[type="search"]::placeholder { opacity: 0.5; color: var(--tn-888f9); } input[type="search"]:focus { border-color: var(--tn-08a52); outline-style: solid; outline-width: 3px; } input[type="search"]:focus:valid { border-color: var(--tn-7d36f); outline-color: var(--tn-7d36f); } input[type="search"]:focus:invalid { border-color: var(--tn-c2d9e); outline-color: var(--tn-c2d9e); } button[type="submit"] { position: absolute; right: 2px; top: 2px; bottom: 2px; border-width: 0; text-align: center; background-color: var(--tn-1e192); } input[type="search"]:focus:valid + button[type="submit"] { cursor: pointer; } input[type="search"]:focus:invalid + button[type="submit"] { cursor: not-allowed; } form.search svg { fill: var(--tn-eceec); } input[type="search"]:focus:valid + button[type="submit"] svg { fill: var(--tn-fe021); } input[type="search"]:focus:invalid + button[type="submit"] svg { fill: var(--tn-f169c); } main table { border-collapse: collapse; border-color: var(--tn-2cc12); width: 100%; } main table tfoot, main table thead { border-width: 3px; } main table tr { border-bottom-width: 1px; } main table tr, main table thead { border-bottom-style: solid; } main table tfoot { border-top-style: solid; } main table td, main table th { text-align: center; padding: 0.35rem; font-size: 90%; } main table td *, main table th * { } main table.is-monospace td, main table.is-monospace th { font-family: var(--tn-4b052); } main table.is-compact td, main table.is-compact th { padding: 0.1rem; } main table tr:hover, main table.is-striped tr:nth-child(even) { background-color: var(--tn-1e192); } main table caption { font-weight: var(--tn-9c02c); margin-bottom: 0.5rem; } main table { margin-bottom: 2rem; } .tags { display: flex; margin-top: 1rem; margin-bottom: 1rem; justify-content: center; align-items: center; } .tags > .tag { font-size: 0.85rem; padding-top: 0.1rem; padding-bottom: 0.1rem; padding-left: 0.3rem; padding-right: 0.3rem; } .tags.are-small { margin-top: 0.5rem; margin-bottom: 0.5rem; } .tags.are-small > .tag { font-size: 0.7rem; } .tags.are-large { margin-top: 2rem; margin-bottom: 2rem; } .tags.are-large > .tag { font-size: 1rem; padding-top: 0.2rem; padding-bottom: 0.2rem; } .tags.are-outlined > .tag { color: var(--tn-08a52); background-color: var(--tn-50734); } .tags.are-right { justify-content: flex-end; } .tags.are-left { justify-content: flex-start; } .tag { padding-top: 0.1rem; padding-bottom: 0.1rem; padding-left: 0.5rem; padding-right: 0.5rem; margin-left: 0.2rem; margin-right: 0.2rem; border-style: solid; border-width: 1px; border-radius: 0.1rem; color: var(--tn-50734); background-color: var(--tn-08a52); } .button { padding-left: 0.5rem; padding-right: 0.5rem; padding-top: 0.2rem; padding-bottom: 0.2rem; margin: 0.25rem; border-style: none; border-radius: 0.375rem; font-weight: var(--tn-8cdf9); color: var(--tn-50734); background-color: var(--tn-08a52); display: flex; justify-content: center; align-items: center; cursor: pointer; } .button > div { width: 1.2rem; } .button:hover { color: var(--tn-888f9); background-color: var(--tn-7d8ee); } .button.is-rounded, .button.is-left { border-top-left-radius: 2rem; border-bottom-left-radius: 2rem; padding-left: 0.5rem; } .button.is-rounded, .button.is-right { border-top-right-radius: 2rem; border-bottom-right-radius: 2rem; padding-right: 0.5rem; } .button.is-round { border-radius: 50%; } .button.is-disabled { cursor: not-allowed; } nav.bottom-bar { display: flex; justify-content: space-between; width: 100%; } nav.bottom-bar.empty { margin-bottom: 0; } nav.bottom-bar > div { display: flex; flex-grow: 1; } nav.bottom-bar > div.previous-topic { flex-direction: row; } nav.bottom-bar > div.next-topic { flex-direction: row-reverse; } nav.bottom-bar > div.previous-topic svg, nav.bottom-bar > div.next-topic svg { fill: var(--tn-eceec); } nav.bottom-bar a { height: 2rem; padding: 0.25rem; border-style: solid; border-width: 2px; display: flex; flex-direction: row; align-items: center; } nav.bottom-bar a.is-left { border-top-left-radius: 2rem; border-bottom-left-radius: 2rem; padding-right: 0.5rem; } nav.bottom-bar a.is-right { border-top-right-radius: 2rem; border-bottom-right-radius: 2rem; padding-left: 0.5rem; } nav.breadcrumbs { display: flex; justify-content: flex-start; align-items: center; margin-top: 2rem; margin-bottom: 2rem; width: 100%; } nav.breadcrumbs > a, nav.breadcrumbs > span { padding: 0.25rem; text-transform: uppercase; font-size: 0.9rem; height: 1.8rem; } nav.breadcrumbs > a { color: var(--tn-08a52); } nav.breadcrumbs > a > svg { fill: var(--tn-08a52); } nav.breadcrumbs > span > svg { fill: var(--tn-eceec); } nav.breadcrumbs > span.is-current { font-style: italic; } nav.breadcrumbs > a:hover { color: var(--tn-eceec); } div.flex-grid { display: flex; flex-wrap: wrap; width: 100%; justify-content: center; } div.flex-grid > div.flex-grid-row { padding: 2px; } @media (min-width: 768px) { div.flex-grid.is-2 > div.flex-grid-row { width: 50%; } } @media (min-width: 1024px) { div.flex-grid.is-3 > div.flex-grid-row { width: 33.33%; } div.flex-grid.is-4 > div.flex-grid-row { width: 50%; } } @media (min-width: 1216px) { div.flex-grid.is-4 > div.flex-grid-row { width: 25%; } } div.flex-grid .flex-grid-item { display: flex; flex-direction: column; background-color: var(--tn-7d8ee); width: 100%; text-align: center; padding: 5px; } .flex-list { --tn-c2b49: 1rem; --tn-94d80: 2; display: flex; flex-direction: row; justify-content: flex-start; width: 100%; flex-wrap: wrap; align-items: center; } .flex-list > * { flex-grow: 1; flex-basis: calc( 100% / var(--tn-94d80) - var(--tn-c2b49) ); max-width: calc( 100% / var(--tn-94d80) - var(--tn-c2b49) ); margin-bottom: calc(var(--tn-c2b49)); margin-left: calc(var(--tn-c2b49) / 2); margin-right: calc(var(--tn-c2b49) / 2); } @media (min-width: 768px) { .flex-list > * { --tn-94d80: 3; } } @media (min-width: 1024px) { .flex-list > * { --tn-94d80: 4; } } @media (min-width: 1216px) { .flex-list > * { --tn-94d80: 6; } } #left-bar { position: sticky; top: var(--tn-acbd9); display: none; flex-direction: column; flex-grow: 0; height: 100%; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: var(--tn-888f9); padding: 0.5rem; font-weight: var(--tn-8cdf9); background-color: var(--tn-50734); } #left-bar.is-active { display: flex; } #left-bar svg { fill: var(--tn-888f9); } #left-bar > a { display: flex; flex-direction: row; align-items: center; } #left-bar > a:hover { background-color: var(--tn-2cc12); } #left-bar > a.menu { margin-bottom: 0.5rem; } #left-bar > a.menu:not(:first-of-type) { margin-top: 0.5rem; } #left-bar > a.chapter + a.menu { margin-top: 2rem; } #left-bar > a.section { margin-left: 2rem; } #left-bar > a.page { margin-left: 2rem; } #left-bar > a.menu-open, #left-bar > a.chapter-open:not(:has(~ a.section-open)), #left-bar > a.section-open:not(:has(~ a.page-open)), #left-bar > a.page-open { background-color: var(--tn-7d8ee); } #left-bar div.label { display: flex; align-items: center; flex-grow: 1; min-width: 14rem; text-transform: uppercase; color: var(--tn-eceec); } #left-bar div.icon { display: flex; justify-content: center; align-items: center; height: 1.6rem; width: 3rem; } #left-bar > a.menu > div.label { padding-top: 0.35rem; padding-bottom: 0.35rem; padding-left: 0.5rem; } #left-bar > a.chapter > div.label { padding-top: 0.35rem; padding-bottom: 0.35rem; } #left-bar > a.section > div.label { padding-top: 0.25rem; padding-bottom: 0.25rem; padding-left: 1rem; } #left-bar > a.page > div.label { padding-top: 0.15rem; padding-bottom: 0.15rem; padding-left: 2rem; } #left-bar > a.menu > div.label > span { font-weight: var(--tn-9c02c); color: var(--tn-888f9); } #left-bar > a.chapter > div.label > span { font-size: 1.2rem; } #left-bar > a.section > div.label > span { font-size: 1.05rem; } #left-bar > a.page > div.label > span { font-size: 1rem; } #left-bar > a.page-open > div.label > span { font-weight: var(--tn-9c02c); font-style: italic; } @media (min-width: 768px) { #left-bar { border-bottom-style: none; } #left-bar > a { border-top-right-radius: 1.5rem; border-bottom-right-radius: 1.5rem; } #left-bar > a.chapter > div.label > span { font-size: 1rem; } #left-bar > a.section > div.label > span { font-size: 0.95rem; } #left-bar > a.page > div.label > span { font-size: 0.9rem; } } .listing { display: flex; flex-direction: column; } .listing > .listing-item { padding: 0.5rem; border-bottom-style: solid; border-bottom-width: 0.5px; border-bottom-color: var(--tn-2cc12); } .listing > .listing-item > .listing-item-content { color: var(--tn-eceec); text-align: justify; } #messages { position: fixed; bottom: 0; right: 0; height: auto; width: 20rem; display: flex; flex-direction: column-reverse; gap: 1rem; z-index: 10; padding: 0.5rem; } #messages .message { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding-left: 0.5rem; padding-top: 1rem; padding-bottom: 1rem; border-left-style: solid; border-left-width: 4px; } #messages .message > * { font-size: 0.8rem; } #messages .message span.close { display: flex; justify-content: center; align-items: center; cursor: pointer; margin-right: 0.5rem; width: 1.4rem; border-radius: 50%; font-weight: var(--tn-612d3); } #messages .message span.close:hover { transition-property: transform; transition-duration: 0.5s; transition-timing-function: ease-in-out; transform: rotate(180deg); } #messages .message.is-primary { background-color: var(--tn-7d8ee); color: var(--tn-888f9); border-color: var(--tn-888f9); } #messages .message.is-success { background-color: var(--tn-9029e); color: var(--tn-fe021); border-color: var(--tn-fe021); } #messages .message.is-warning { background-color: var(--tn-51582); color: var(--tn-f169c); border-color: var(--tn-f169c); } #messages .message.is-error { background-color: var(--tn-070cd); color: var(--tn-15cca); border-color: var(--tn-15cca); } #messages .message svg { fill: var(--tn-eceec); } nav.pagination { height: 2.4rem; width: 100%; display: flex; align-items: stretch; justify-content: space-between; margin-top: 2rem; margin-bottom: 2rem; } nav.pagination > div { display: flex; } nav.pagination > div.nav-left { justify-content: flex-start; } nav.pagination > div.nav-center { justify-content: center; } nav.pagination > div.nav-right { justify-content: flex-end; } nav.pagination > div > a, nav.pagination > div > span { display: flex; align-items: center; justify-content: center; min-width: 2rem; text-align: center; padding: 0.25rem; margin: 0.25rem; } nav.pagination > div > a, nav.pagination > div > span { border-style: solid; border-width: 1px; border-color: var(--tn-419bd); background-color: var(--tn-1e192); } nav.pagination > div > span.is-disabled { color: var(--tn-419bd); border-color: var(--tn-2cc12); cursor: not-allowed; } nav.pagination > div > a.is-current, nav.pagination > div > a:hover { background-color: var(--tn-08a52); color: var(--tn-7d8ee); } nav.pagination svg { fill: var(--tn-eceec); } #right-bar { --tn-c4ca5: 0.5em; --tn-8f6c7: 1em; background-color: var(--tn-50734); padding: var(--tn-c4ca5); padding-bottom: 0; gap: var(--tn-8f6c7); min-width: 14rem; } #right-bar > div { display: flex; flex-direction: column; padding: var(--tn-8f6c7); text-align: center; } div.tabs { display: flex; flex-wrap: wrap; margin-bottom: 2rem; } div.tabs input[type="radio"] { display: none; } div.tabs label { cursor: pointer; display: inline-block; margin-right: 2px; min-width: 2rem; padding: 0.5rem; text-align: center; font-weight: var(--tn-9c02c); border-top-left-radius: 0.35rem; border-top-right-radius: 0.35rem; color: var(--tn-888f9); background-color: var(--tn-7d8ee); } div.tabs div.tab-content { display: none; flex-grow: 1; order: 99; width: 100%; border-style: solid; border-width: 1px; border-color: var(--tn-7d8ee); } div.tabs input[type="radio"]:checked + label + div.tab-content { display: block; } div.tabs input[type="radio"]:checked + label { background-color: var(--tn-08a52); color: var(--tn-1e192); } #top-bar { display: flex; flex-direction: row; justify-content: space-between; align-items: center; background-color: var(--tn-1e192); padding-left: 1rem; padding-right: 1rem; z-index: 10; } #top-bar svg { fill: var(--tn-aa513); } #top-bar a.brand { display: flex; align-items: center; height: var(--tn-dd023); background-color: transparent; margin-top: var(--tn-b5d2a); margin-bottom: var(--tn-b5d2a); margin-left: var(--tn-0b4a5); margin-right: var(--tn-0b4a5); padding-top: var(--tn-1f391); padding-bottom: var(--tn-1f391); padding-left: var(--tn-387f3); padding-right: var(--tn-387f3); } #top-bar .brand > span { margin-left: 0.5rem; margin-right: 0.5rem; color: var(--tn-aa513); font-size: 1.5rem; } #top-bar form.search { display: none; margin-top: var(--tn-b5d2a); margin-bottom: var(--tn-b5d2a); } #top-bar div.toggle { display: block; height: 3rem; transition: transform 0.35s; margin-top: var(--tn-b5d2a); margin-bottom: var(--tn-b5d2a); } #top-bar div.toggle.is-active { transform: rotate(180deg); } @media (min-width: 768px) { #top-bar form.search { display: block; } #top-bar div.toggle { display: none; } } div.is-buffer-content { display: flex; flex-direction: column; padding-top: 1rem; padding-bottom: 1rem; padding-left: 0.5rem; padding-right: 0.5rem; min-height: 9rem; } div.is-buffer-content * { font-family: var(--tn-4b052); } div.is-buffer-line { display: flex; align-items: baseline; } div.is-buffer-line:hover { background-color: var(--tn-2cc12); } div.is-buffer-line span.dspc { color: var(--tn-419bd); } span.is-selection { background-color: var(--tn-3554e); } span.is-match { background-color: var(--tn-ca680); color: var(--tn-1e192); } @keyframes blinking-cursor-neutral { 0% { color: var(--tn-2cc12); background-color: var(--tn-2cc12); } 40% { color: var(--tn-2cc12); background-color: var(--tn-1e192); } 60% { color: var(--tn-2cc12); background-color: var(--tn-1e192); } 100% { color: var(--tn-2cc12); background-color: var(--tn-1e192); } } @keyframes blinking-cursor-neutral-insert { 0% { color: var(--tn-2cc12); border-left-color: var(--tn-2cc12); } 40% { color: var(--tn-2cc12); border-left-color: var(--tn-2cc12); } 60% { color: var(--tn-2cc12); border-left-color: var(--tn-1e192); } 100% { color: var(--tn-2cc12); border-left-color: var(--tn-1e192); } } @keyframes blinking-cursor-before { 0% { color: var(--tn-9029e); background-color: var(--tn-7d36f); } 40% { color: var(--tn-9029e); background-color: var(--tn-7d36f); } 60% { color: var(--tn-fe021); background-color: var(--tn-9029e); } 100% { color: var(--tn-fe021); background-color: var(--tn-9029e); } } @keyframes blinking-cursor-before-insert { 0% { color: var(--tn-fe021); border-left-color: var(--tn-7d36f); } 40% { color: var(--tn-fe021); border-left-color: var(--tn-7d36f); } 60% { color: var(--tn-fe021); border-left-color: var(--tn-9029e); } 100% { color: var(--tn-fe021); border-left-color: var(--tn-9029e); } } @keyframes blinking-cursor-after { 0% { color: var(--tn-c2d9e); background-color: var(--tn-070cd); } 40% { color: var(--tn-c2d9e); background-color: var(--tn-070cd); } 60% { color: var(--tn-070cd); background-color: var(--tn-c2d9e); } 100% { color: var(--tn-070cd); background-color: var(--tn-c2d9e); } } @keyframes blinking-cursor-after-insert { 0% { color: var(--tn-c2d9e); border-left-color: var(--tn-070cd); } 40% { color: var(--tn-c2d9e); border-left-color: var(--tn-070cd); } 60% { color: var(--tn-c2d9e); border-left-color: var(--tn-c2d9e); } 100% { color: var(--tn-c2d9e); border-left-color: var(--tn-c2d9e); } } @keyframes blinking-cursor-before-after { 0% { color: var(--tn-c2d9e); background-color: var(--tn-070cd); } 40% { color: var(--tn-c2d9e); background-color: var(--tn-070cd); } 60% { color: var(--tn-fe021); background-color: var(--tn-9029e); } 100% { color: var(--tn-fe021); background-color: var(--tn-9029e); } } @keyframes blinking-cursor-before-after-insert { 0% { color: var(--tn-c2d9e); border-left-color: var(--tn-c2d9e); } 40% { color: var(--tn-c2d9e); border-left-color: var(--tn-c2d9e); } 60% { color: var(--tn-fe021); border-left-color: var(--tn-7d36f); } 100% { color: var(--tn-fe021); border-left-color: var(--tn-7d36f); } } div.is-terminal div.is-buffer-line .is-cursor { font-weight: var(--tn-9c02c); animation-duration: 1s; animation-iteration-count: infinite; } div.is-terminal div.is-buffer-line .is-insert { border-left-style: solid; border-left-width: 2px; } div.is-terminal div.is-buffer-line .is-cursor.is-neutral { animation-name: blinking-cursor-neutral; } div.is-terminal div.is-buffer-line .is-cursor.is-neutral.is-insert { animation-name: blinking-cursor-neutral-insert; } div.is-terminal .is-cursor.is-before { animation-name: blinking-cursor-before; } div.is-terminal .is-cursor.is-before.is-insert { animation-name: blinking-cursor-before-insert; } div.is-terminal .is-cursor.is-after { animation-name: blinking-cursor-after; } div.is-terminal .is-cursor.is-after.is-insert { animation-name: blinking-cursor-after-insert; } div.is-terminal .is-cursor.is-before.is-after { animation-name: blinking-cursor-before-after; } div.is-terminal .is-cursor.is-before.is-after.is-insert { animation-name: blinking-cursor-before-after-insert; } main div.is-terminal > div.is-header { display: flex; flex-direction: row; align-items: center; min-height: 2rem; padding: 0.5rem; color: var(--tn-888f9); background-color: var(--tn-2cc12); } main div.is-terminal > div.is-header > div.is-header-keys { display: flex; flex-direction: row; margin-left: 1rem; } main div.is-terminal > div.is-header span.is-header-key { padding-left: 0.35rem; padding-right: 0.35rem; font-weight: var(--tn-612d3); font-family: var(--tn-4b052); border-style: solid; border-radius: 0.25rem; border-width: 1px; border-color: var(--tn-08a52); color: var(--tn-888f9); background-color: var(--tn-7d8ee); } main div.is-terminal div.is-status-line { display: flex; align-items: baseline; justify-content: space-between; left: 2px; right: 2px; border-style: solid; border-width: 1px; border-color: var(--tn-419bd); background-color: var(--tn-2cc12); } main div.is-terminal div.is-status-line span.fill-space { flex-grow: 1; } main div.is-terminal div.is-status-line .is-mode { padding-left: 0.35rem; padding-right: 0.35rem; font-family: var(--tn-4b052); background-color: var(--tn-eceec); color: var(--tn-1e192); } main div.is-terminal div.is-status-line .is-mode.is-mode-normal { background-color: var(--tn-08a52); } main div.is-terminal div.is-status-line .is-mode.is-mode-insert { background-color: var(--tn-98127); } main div.is-terminal div.is-status-line .is-mode.is-mode-visual { background-color: var(--tn-e8db9); } main div.is-terminal div.is-status-line .is-progress, main div.is-terminal div.is-status-line .is-position { padding-left: 0.25rem; padding-right: 0.25rem; margin-left: 0.25rem; margin-right: 0.25rem; background-color: var(--tn-2cc12); color: var(--tn-eceec); font-family: var(--tn-4b052); } main div.is-terminal { display: flex; flex-direction: column; max-width: 100%; position: relative; overflow: hidden; padding: 2px; background-color: var(--tn-1e192); border-style: solid; border-width: 1px; border-color: var(--tn-2cc12); } main div.is-terminal:has(+ p) { margin-bottom: 2rem; } main div.is-terminal * { font-size: 0.9rem; } main div.is-terminal + div.is-terminal { margin-top: 4rem; } main div.is-terminal div.is-window { max-height: 100%; max-width: 100%; z-index: 10; position: absolute; left: 1px; right: 1px; bottom: 1px; height: 10rem; border-top: 2px solid grey; background-color: var(--tn-1e192); transition: max-height 0.3s ease-in-out; } main div.is-buffer-content:hover ~ div.is-window { max-height: 2rem; } main div.is-terminal div.is-window div.is-window-content { max-width: 60ch; } main div.is-window * { display: flex; flex-direction: column; font-family: var(--tn-4b052); } :root { --tn-481a0: #222222; --tn-a093d: #444444; --tn-fb26b: #aaaaaa; --tn-63c7a: #444444; --tn-9157e: #444444; --tn-e8765: #aaaaaa; --tn-581cc: var(--tn-1e192); --tn-c01a7: #444444; --tn-61ff5: #44ff44; --tn-73962: #aaaaaa; --tn-f0f5b: #ff4444; --tn-012a2: #aaaaaa; --tn-9d200: green; --tn-31177: yellow; } div.command-line-terminal-centered { display: flex; justify-content: center; width: 100%; margin-top: 2rem; margin-bottom: 2rem; } div.is-command-line-terminal { display: flex; flex-direction: column; position: relative; overflow: hidden; width: 100%; border-style: solid; border-width: 2px; border-color: var(--tn-481a0); } div.is-command-line-terminal > div.is-header { display: flex; flex-direction: row; align-items: center; min-height: 2rem; padding: 0.5rem; color: var(--tn-a093d); background-color: var(--tn-fb26b); } div.is-command-line-terminal > div.is-header > div.is-header-keys { display: flex; flex-direction: row; margin-left: 1rem; } div.is-command-line-terminal > div.is-header span.is-header-key { padding-left: 0.35rem; padding-right: 0.35rem; font-weight: regular; font-family: var(--tn-5acf1); border-style: solid; border-radius: 0.25rem; border-width: 1px; border-color: var(--tn-9157e); color: var(--tn-63c7a); background-color: var(--tn-e8765); } div.is-command-line-terminal div.is-buffer { display: flex; flex-direction: column; padding: 0.5rem; min-height: 9rem; background-color: var(--tn-581cc); } div.is-command-line-terminal div.is-buffer * { font-family: var(--tn-5acf1); } div.is-command-line-terminal div.is-buffer-line { display: flex; width: 100%; align-items: baseline; padding-left: 0.5rem; padding-right: 0.5rem; } div.is-command-line-terminal div.is-buffer-line-content { padding: 1px; padding-left: 10px; padding-right: 10px; font-size: 1rem; white-space: pre; background-color: var(--tn-810cf); } div.is-command-line-terminal div.is-buffer-line-content:hover { background-color: var( --tn-9d200 ); } div.is-command-line-terminal div.is-buffer-line-content span.dspc { display: inline-block; width: 1ch; color: var(--tn-31177); } div.is-command-line-terminal div.is-buffer-line-content span.dspc::before { content: "·"; } @keyframes blinking-cursor-neutral { 0% { color: var(--tn-9f086); background-color: var(--tn-efbbe); } 40% { color: var(--tn-9f086); background-color: var(--tn-efbbe); } 60% { color: var(--tn-efbbe); background-color: var(--tn-9f086); } 100% { color: var(--tn-efbbe); background-color: var(--tn-9f086); } } @keyframes blinking-cursor-before { 0% { color: var(--tn-73962); background-color: var(--tn-61ff5); } 40% { color: var(--tn-73962); background-color: var(--tn-61ff5); } 60% { color: var(--tn-61ff5); background-color: var(--tn-73962); } 100% { color: var(--tn-61ff5); background-color: var(--tn-73962); } } @keyframes blinking-cursor-after { 0% { color: var(--tn-f0f5b); background-color: var(--tn-012a2); } 40% { color: var(--tn-f0f5b); background-color: var(--tn-012a2); } 60% { color: var(--tn-012a2); background-color: var(--tn-f0f5b); } 100% { color: var(--tn-012a2); background-color: var(--tn-f0f5b); } } div.is-command-line-terminal div.is-buffer-line .is-cursor { font-weight: bold); animation-duration: 1s; animation-iteration-count: infinite; } div.is-command-line-terminal .is-cursor.is-before { animation-name: blinking-cursor-before; } div.is-command-line-terminal .is-cursor.is-after { animation-name: blinking-cursor-after; } .no-wrap { white-space: nowrap; } .has-one-line { text-overflow: ellipsis; overflow: hidden; white-space: normal; } .ms-icon { display: flex; justify-content: center; width: 1.3rem; margin: auto; } .ms-icon svg { fill: var(--tn-eceec); } span.is-function { font-weight: var(--tn-8cdf9); } :root { --tn-51c1c: sans-serif; --tn-4b052: monospace; --tn-9056d: 900; --tn-9c02c: 700; --tn-8cdf9: 500; --tn-612d3: 400; --tn-7fe0e: 300; --tn-b4eb6: 100; } @media (min-width: 768px) { :root { --tn-51c1c: "Roboto", sans-serif; --tn-4b052: "Roboto Mono", monospace; } } @font-face { font-family: "Roboto"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/Roboto-Regular.woff2) format("woff2"); } @font-face { font-family: "Roboto"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/Roboto-Medium.woff2) format("woff2"); } @font-face { font-family: "Roboto"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/Roboto-Bold.woff2) format("woff2"); } @font-face { font-family: "Roboto"; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/Roboto-Italic.woff2) format("woff2"); } @font-face { font-family: "Roboto"; font-style: italic; font-weight: 700; font-display: swap; src: url(../fonts/Roboto-BoldItalic.woff2) format("woff2"); } @font-face { font-family: "Roboto Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/RobotoMono-Regular.woff2) format("woff2"); } * { font-family: var(--tn-51c1c); } .is-monospace { font-family: var(--tn-4b052); } h1, h2, h3, h4, h5, h6 { color: var(--tn-888f9); font-weight: var(--tn-612d3); line-height: 1.2; } h1 { text-align: center; font-weight: var(--tn-9c02c); font-size: 1.6rem; margin-top: 1rem; margin-bottom: 1rem; } h2 { font-size: 1.6rem; margin-top: 1rem; margin-bottom: 1rem; } h3 { font-size: 1.3rem; margin-top: 1rem; margin-bottom: 1rem; margin-left: 1rem; font-style: italic; } h4 { font-size: 1rem; margin-top: 0.5rem; margin-bottom: 0.5rem; margin-left: 2rem; text-decoration: underline; } h5, h6 { font-size: 1.1rem; margin-top: 0.5rem; margin-bottom: 0.5rem; margin-left: 3rem; } .is-capitalized { text-transform: capitalize; } .is-uppercase { text-transform: uppercase; } .has-font-size-small { font-size: 0.8rem; } .has-font-size-medium { font-size: 1rem; } .has-font-size-large { font-size: 1.5rem; } .has-font-size-x-large { font-size: 2rem; } .has-font-size-xx-large { font-size: 3rem; } .has-text-color-primary { color: var(--tn-08a52); } .has-text-color-dark { color: var(--tn-eceec); } .has-text-color-grey-light { color: var(--tn-2cc12); } .has-text-align-left { text-align: left; } .has-text-align-right { text-align: right; } .has-text-align-center { text-align: center; } .has-text-align-justify { text-align: justify; } #layout { background-color: var(--tn-50734); color: var(--tn-eceec); } :root { --tn-dc08c: 0.25rem; --tn-bac09: 0.0625rem; --tn-95f87: 0.2s ease-in-out; --tn-f69d9: 768px; --tn-df148: 769px; --tn-9b0b6: 1024px; --tn-9e464: 1216px; --tn-8bc99: 1408px; --tn-8f45f: 2rem; --tn-71b29: 2rem; --tn-8ec13: 14px; --tn-e1270: 18px; --tn-dd023: 60px; --tn-b5d2a: 10px; --tn-0b4a5: 5px; --tn-1f391: 5px; --tn-387f3: 5px; --tn-acbd9: 80px; font-size: 14px; line-height: 18px; } html { scroll-behavior: smooth; scroll-padding-top: 6rem; } body { display: flex; flex-direction: column; margin: 0; position: relative; } #top-bar { position: sticky; top: 0; height: var(--tn-acbd9); width: 100%; z-index: 2; } #layout { display: flex; flex-direction: column; justify-content: space-between; } #left-bar { display: none; position: sticky; top: var(--tn-acbd9); flex-direction: column; flex-grow: 0; height: 100%; } main { flex-grow: 1; display: flex; flex-direction: column; align-items: center; min-height: 100vh; max-width: 1024px; margin-left: var(--tn-8f45f); margin-right: var(--tn-8f45f); margin-bottom: var(--tn-71b29); } #right-bar { display: flex; flex-grow: 0; flex-direction: column; height: 100%; } #footer { min-height: 12em; display: flex; flex-direction: row; justify-content: space-between; gap: var(--tn-5d334); } @media (min-width: 768px) { :root { --tn-8f45f: 2rem; } #left-bar { display: flex; } #layout { flex-direction: row; } } @media (min-width: 1024px) { :root { font-size: 16px; --tn-8ec13: 16px; --tn-e1270: 20px; --tn-8f45f: 3rem; } } @media (min-width: 1216px) { :root { font-size: 18px; --tn-8ec13: 18px; --tn-e1270: 22px; --tn-8f45f: 4rem; } } @media (min-width: 1408px) { :root { --tn-8f45f: 6rem; } } div.ad-display-horizontal { width: 100%; min-height: 50px; } #error div.line, #error div.is-buffer-line { padding-bottom: 0.25rem; } #error div.line > a { margin-left: 2rem; padding-left: 0.5rem; padding-right: 0.5rem; } #neovim-cheatsheet div.toc { display: flex; justify-content: center; flex-wrap: wrap; flex-grow: 1; gap: 0.5rem; margin-top: 2rem; margin-bottom: 2rem; } #neovim-cheatsheet div.toc > a.button { background-color: transparent; border-style: solid; border-width: 1px; border-color: var(--tn-888f9); color: var(--tn-888f9); } #neovim-cheatsheet div.toc > a.button:hover { background-color: var(--tn-7d8ee); filter: drop-shadow(0 0 0.5rem var(--tn-7d8ee)); } #neovim-cheatsheet div.sections { width: 100%; } #neovim-cheatsheet div.section-heading { display: flex; } #neovim-cheatsheet div.section-heading a { padding-left: 0.5rem; padding-right: 0.5rem; border-radius: 0.375rem; } #neovim-cheatsheet div.entries { display: flex; flex-direction: column; border-style: solid; border-width: 1px; border-color: var(--tn-2cc12); padding: 1rem; } #neovim-cheatsheet div.entry { display: flex; justify-content: space-between; align-content: center; } #neovim-cheatsheet div.entry:hover { background-color: var(--tn-1e192); } #neovim-cheatsheet div.entry.heading { text-align: center; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: var(--tn-2cc12); margin: 0; margin-bottom: 0.5rem; font-weight: 600; } #neovim-cheatsheet div.entry > * { text-align: center; width: 100%; padding-top: 0.25rem; padding-bottom: 0.25rem; } #neovim-cheatsheet div.entry > .command { flex-basis: 15rem; } #neovim-cheatsheet div.entry > .mode { flex-basis: 4rem; min-width: 4rem; } #neovim-cheatsheet div.section > div.more-info { padding: 0.5rem; font-style: italic; text-align: right; } div.commands-index { display: flex; flex-direction: column; width: 100%; } div.heading { width: 100%; margin: 1rem; text-align: center; } div.commands-index-headings { display: flex; flex-direction: row; justify-content: center; gap: 2px; width: 100%; } div.commands-index-headings > span.commands-index-heading { flex-grow: 1; flex-basis: 100%; text-align: center; font-weight: 600; padding: 0.5rem; } div.commands-index-card { display: flex; flex-direction: row; width: 100%; padding-top: 0.25rem; padding-bottom: 0.25rem; } div.commands-index-card-topic { display: flex; justify-content: center; align-items: center; flex-grow: 1; flex-basis: 100%; border-style: solid; border-color: grey; border-width: 1px; margin-left: 0.25rem; margin-right: 0.25rem; } div.commands-index-card-topic > span { font-family: var(--tn-4b052); font-weight: 600; color: var(--tn-888f9); } span.commands-index-heading, div.commands-index-card-listing > a:hover { background-color: var(--tn-7d8ee); } div.commands-index-card-topic:hover { background-color: var(--tn-1e192); } div.commands-index-card-listing { display: flex; flex-direction: column; flex-basis: 100%; flex-grow: 2; } div.commands-index-card-listing > a { padding: 0.5rem; } div.commands-index-card-listing > a:first-child { border-top-style: solid; border-width: 1px; border-color: var(--tn-419bd); } div.commands-index-headings, div.commands-index-card-listing > a { border-bottom-style: solid; border-width: 1px; border-color: var(--tn-419bd); } #home > section { margin: 0; width: 100%; padding: 2rem; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; background-size: cover; background-attachment: fixed; background-image: linear-gradient( light-dark(hsl(0 0% 100%/ 0.9), hsl(0 0% 10% / 0.9)), light-dark(hsl(0 0% 80% / 0.9), hsl(0 0% 20% / 0.9)) ), url("/static/img/stock/02.webp"); } #home > section.reverse { flex-direction: column-reverse; } #home > section.primary { background-image: linear-gradient( light-dark(hsl(240 50% 95%/ 0.9), hsl(240 10% 10% / 0.9)), light-dark(hsl(240 50% 80% / 0.9), hsl(240 30% 10% / 0.9)) ), url("/static/img/stock/02.webp"); } #home > section h1, #home > section h2 { font-size: 1.6rem; font-weight: 900; text-align: center; margin-top: 2rem; margin-bottom: 2rem; } #home div.desc { display: flex; flex-direction: column; text-align: justify; max-width: 36rem; font-size: 1.2rem; } #home div.desc > p { text-align: justify; margin-bottom: 2rem; } #home div.links { display: flex; flex-direction: column; min-width: 28rem; margin-top: 2rem; margin-bottom: 2rem; } #home div.links > a { display: flex; color: primary; align-items: center; padding: 0.5rem; margin-left: auto; margin-right: auto; margin-top: 0.5rem; margin-bottom: 0.5rem; } #home div.links div.icon { display: flex; justify-content: center; align-items: center; width: 2rem; } #home div.links div.icon svg { fill: var(--tn-08a52); } #home div.links div.label { margin-left: 0.5rem; display: flex; justify-content: center; align-items: center; } #home-hero { height: 75vh; display: flex; flex-direction: column; align-items: center; } #home-hero .title { font-size: 3rem; } #home-hero .search-container { width: 80%; } #home-hero nav.simple-nav { width: 80%; display: flex; justify-content: space-between; } #home-hero nav.simple-nav a.button { background-color: transparent; border-style: solid; border-width: 1px; border-color: var(--tn-888f9); color: var(--tn-888f9); } #home-hero nav.simple-nav a.button:hover { background-color: var(--tn-7d8ee); filter: drop-shadow(0 0 0.5rem var(--tn-7d8ee)); } #home-neovim { min-height: 60vh; } #home-terminal { min-height: 60vh; } #home-lua { min-height: 60vh; } @media (width >= 768px) { #home-hero .search-container { width: 24rem; } } @media (width >= 1024px) { #home-hero .search-container { width: 28rem; } #home > section:not(#home-hero) { flex-direction: row; align-items: flex-start; } #home section div.links { margin: 0; } #home-hero nav.simple-nav { width: 60%; } } @media (width >= 1216px) { #home-hero .search-container { width: 32rem; } } #search div.search-container, #search div.pagination-container { display: flex; width: 100%; justify-content: center; } #search form.search { width: 50%; padding: 5px; } #blog { justify-content: flex-start; width: 100%; padding: 0; } #blog > a.post { display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 1rem; width: 100%; } #blog > a.post > div.main { display: flex; align-items: center; } #blog > a.post > div.main > div.icon { display: flex; align-items: center; width: 2rem; } #blog svg { fill: var(--tn-08a52); } #blog > a.post > div.main > div.label { text-align: left; flex-grow: 1; margin-left: 1rem; min-width: 24rem; } #blog > a.post > div.tags { display: none; } #blog > a.post > div.tags > span.tag { background-color: transparent; color: var(--tn-08a52); font-size: 0.7rem; } @media (width >= 1024px) { #blog > a.post { flex-direction: row; padding-top: 0; padding-bottom: 0; } #blog > a.post > div.tags { display: block; } }