*, *::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-6a389: rgba(0, 0, 0, 0); --tn-c2aff: hsl(0 0% 0%); --tn-7b44e: hsl(0 0% 12%); --tn-4dbae: hsl(0 0% 30%); --tn-e0cb6: hsl(0 0% 50%); --tn-afc62: hsl(0 0% 80%); --tn-3a7be: hsl(0 0% 95%); --tn-a6f4d: hsl(0 0% 100%); --tn-348a5: light-dark( var(--tn-c2aff), var(--tn-a6f4d) ); --tn-132cc: light-dark( var(--tn-7b44e), var(--tn-afc62) ); --tn-0bea5: light-dark( var(--tn-4dbae), var(--tn-afc62) ); --tn-04363: light-dark( var(--tn-e0cb6), var(--tn-e0cb6) ); --tn-a354f: light-dark( var(--tn-afc62), var(--tn-4dbae) ); --tn-0b719: light-dark( var(--tn-3a7be), var(--tn-7b44e) ); --tn-62988: light-dark( var(--tn-a6f4d), var(--tn-c2aff) ); --tn-4f32a: hsl(210 80% 20%); --tn-f193f: hsl(210 80% 40%); --tn-2fe8c: hsl(210 80% 85%); --tn-7ecbd: light-dark( var(--tn-4f32a), var(--tn-2fe8c) ); --tn-48c26: light-dark( var(--tn-f193f), var(--tn-2fe8c) ); --tn-9459b: light-dark( var(--tn-2fe8c), var(--tn-4f32a) ); --tn-04df2: hsl(270 100% 50%); --tn-52be9: hsl(270 100% 70%); --tn-6904a: hsl(270 100% 90%); --tn-d2f91: light-dark( var(--tn-04df2), var(--tn-6904a) ); --tn-32bba: light-dark( var(--tn-52be9), var(--tn-6904a) ); --tn-74fa4: light-dark( var(--tn-6904a), var(--tn-04df2) ); --tn-c17c8: hsl(240 100% 27%); --tn-179f4: hsl(240 100% 50%); --tn-8e470: hsl(195 53% 79%); --tn-7a434: light-dark( var(--tn-c17c8), var(--tn-8e470) ); --tn-edf76: light-dark( var(--tn-179f4), var(--tn-8e470) ); --tn-9dd24: light-dark( var(--tn-8e470), var(--tn-c17c8) ); --tn-0df5a: hsl(120 100% 20%); --tn-7e0d9: hsl(120 100% 50%); --tn-c0515: hsl(120 73% 75%); --tn-56743: light-dark( var(--tn-0df5a), var(--tn-c0515) ); --tn-61636: light-dark( var(--tn-7e0d9), var(--tn-c0515) ); --tn-104ba: light-dark( var(--tn-c0515), var(--tn-0df5a) ); --tn-d2f89: hsl(55 100% 27%); --tn-6ed85: hsl(60 100% 50%); --tn-3529d: hsl(50 100% 95%); --tn-42525: light-dark( var(--tn-d2f89), var(--tn-3529d) ); --tn-735f9: light-dark( var(--tn-6ed85), var(--tn-3529d) ); --tn-b1f7c: light-dark( var(--tn-3529d), var(--tn-d2f89) ); --tn-4e715: hsl(0 100% 27%); --tn-7d151: hsl(0, 100%, 50%); --tn-8639d: hsl(0 100% 75%); --tn-862b7: light-dark( var(--tn-4e715), var(--tn-8639d) ); --tn-5f68d: light-dark( var(--tn-7d151), var(--tn-8639d) ); --tn-b67c2: light-dark( var(--tn-8639d), var(--tn-4e715) ); } .is-hoverable:hover { background-color: var(--tn-a354f); } .is-copyable { font-variant-ligatures: none; position: relative; } .is-copyable:hover { color: var(--tn-edf76); 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-132cc); background-color: var(--tn-62988); } .is-light { color: var(--tn-132cc); background-color: var(--tn-0b719); } .is-grey-light { color: var(--tn-132cc); background-color: var(--tn-a354f); } .is-grey { color: var(--tn-132cc); background-color: var(--tn-04363); } .is-grey-dark { color: var(--tn-62988); background-color: var(--tn-0bea5); } .is-dark { color: var(--tn-0b719); background-color: var(--tn-132cc); } .is-black { color: var(--tn-0b719); background-color: var(--tn-348a5); } .is-primary { color: var(--tn-62988); background-color: var(--tn-48c26); } .is-link { color: var(--tn-62988); background-color: var(--tn-32bba); } .is-info { color: var(--tn-62988); background-color: var(--tn-edf76); } .is-success { color: var(--tn-62988); background-color: var(--tn-61636); } .is-warning { color: var(--tn-62988); background-color: var(--tn-735f9); } .is-danger { color: var(--tn-62988); background-color: var(--tn-5f68d); } .is-primary-light { color: var(--tn-7ecbd); background-color: var(--tn-9459b); } .is-link-light { color: var(--tn-d2f91); background-color: var(--tn-74fa4); } .is-info-light { color: var(--tn-7a434); background-color: var(--tn-9dd24); } .is-success-light { color: var(--tn-56743); background-color: var(--tn-104ba); } .is-warning-light { color: var(--tn-42525); background-color: var(--tn-b1f7c); } .is-danger-light { color: var(--tn-862b7); background-color: var(--tn-b67c2); } .is-primary-dark { background-color: var(--tn-7ecbd); } .is-link-dark { background-color: var(--tn-d2f91); } .is-info-dark { background-color: var(--tn-7a434); } .is-success-dark { background-color: var(--tn-56743); } .is-warning-dark { background-color: var(--tn-42525); } .is-danger-dark { background-color: var(--tn-862b7); } .is-primary-inverted { background-color: var(--tn-62988); color: var(--tn-48c26); } .is-link-inverted { background-color: var(--tn-62988); color: var(--tn-32bba); } .is-info-inverted { background-color: var(--tn-62988); color: var(--tn-edf76); } .is-success-inverted { background-color: var(--tn-62988); color: var(--tn-61636); } .is-warning-inverted { background-color: var(--tn-62988); color: var(--tn-735f9); } .is-danger-inverted { background-color: var(--tn-62988); color: var(--tn-5f68d); } .is-primary-outlined { background-color: var(--tn-62988); color: var(--tn-48c26); border-style: solid; border-width: 2px; border-color: var(--tn-48c26); } .is-link-outlined { background-color: var(--tn-62988); color: var(--tn-32bba); border-style: solid; border-width: 2px; border-color: var(--tn-32bba); } .is-info-outlined { background-color: var(--tn-62988); color: var(--tn-edf76); border-style: solid; border-width: 2px; border-color: var(--tn-edf76); } .is-success-outlined { background-color: var(--tn-62988); color: var(--tn-61636); border-style: solid; border-width: 2px; border-color: var(--tn-61636); } .is-warning-outlined { background-color: var(--tn-62988); color: var(--tn-735f9); border-style: solid; border-width: 2px; border-color: var(--tn-735f9); } .is-danger-outlined { background-color: var(--tn-62988); color: var(--tn-5f68d); border-style: solid; border-width: 2px; border-color: var(--tn-5f68d); } .is-light-to-dark { height: 1em; position: relative; animation: light-to-dark 1s infinite; } @keyframes light-to-dark { 0% { color: var(--tn-04363); } 40% { color: var(--tn-04363); } 60% { color: var(--tn-a354f); } 100% { color: var(--tn-a354f); } } @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-e541d: 2em; --tn-081d0: 1em; justify-content: space-between; background-color: var(--tn-0b719); padding: var(--tn-e541d); } #footer svg { fill: var(--tn-132cc); } #footer > div { display: flex; align-items: center; padding: var(--tn-081d0); } #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-5dac5); 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-0b719); 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-5dac5); } main > header { width: 100%; background-color: var(--tn-9459b); margin-top: 0; margin-bottom: 0; padding: 2rem; border-style: solid; border-width: 1px; border-color: var(--tn-9459b); } time { font-size: 0.8rem; color: var(--tn-48c26); 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-48c26); background-color: var(--tn-9459b); } :root { --tn-1368d: light-dark( hsl(180deg, 33%, 38%), hsl(220 10% 70%) ); --tn-74229: light-dark(hsl(0 100% 50%), hsl(0 100% 70%)); --tn-f20af: light-dark( hsl(0 100% 27%), hsl(0 100% 77%) ); --tn-a257b: light-dark( hsl(300 100% 27%), hsl(300 100% 77%) ); --tn-5a90b: light-dark( hsl(241 69% 29%), hsl(241 69% 79%) ); --tn-972c4: light-dark( hsl(120 100% 25%), hsl(120 100% 75%) ); --tn-024af: light-dark( hsl(0 0% 27%), hsl(0 0% 77%) ); --tn-79ea3: light-dark( hsl(241 69% 29%), hsl(241 69% 79%) ); --tn-688d5: light-dark( hsl(300 100% 27%), hsl(300 100% 77%) ); --tn-867a9: light-dark( hsl(300 100% 25%), hsl(300 100% 75%) ); --tn-7735a: light-dark( hsl(222 100% 43%), hsl(222 100% 73%) ); --tn-99f45: light-dark( hsl(120 100% 25%), hsl(120 100% 75%) ); --tn-a3602: light-dark( hsl(71 56% 36%), hsl(71 56% 76%) ); --tn-23f93: light-dark( hsl(120 100% 25%), hsl(120 100% 75%) ); --tn-c7dc5: light-dark( hsl(222 100% 43%), hsl(222 100% 73%) ); --tn-04f7e: light-dark( hsl(0 100% 27%), hsl(0 100% 77%) ); --tn-13771: light-dark( hsl(60 100% 31%), hsl(60 100% 71%) ); --tn-e3eba: light-dark( hsl(240 100% 27%), hsl(320 90% 70%) ); --tn-b096f: light-dark(hsl(0 0% 40%), hsl(0 0% 70%)); --tn-3e371: light-dark( hsl(277 100% 57%), hsl(277 100% 77%) ); --tn-49d9d: light-dark(hsl(0 0% 40%), hsl(0 0% 70%)); --tn-a51eb: light-dark(hsl(0 70% 43%), hsl(0 70% 73%)); --tn-a0de5: light-dark( hsl(336 38% 57%), hsl(336 38% 77%) ); --tn-fb810: light-dark(hsl(0 70% 43%), hsl(0 70% 73%)); --tn-f51dc: 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-f51dc); } 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-1368d); font-style: italic; } div.highlight .err { border: 1px solid var(--tn-74229); } div.highlight .bp, div.highlight .k, div.highlight .kd, div.highlight .kp, div.highlight .kr, div.highlight .kt, div.highlight .kn { color: var(--tn-99f45); } div.highlight .ow { color: var(--tn-3e371); } div.highlight .o { color: var(--tn-49d9d); } div.highlight .ge { color: var(--tn-a257b); font-style: italic; } div.highlight .gd { color: var(--tn-f20af); } div.highlight .gr { color: var(--tn-74229); } div.highlight .gh { color: var(--tn-5a90b); } div.highlight .gi { color: var(--tn-972c4); } div.highlight .go { color: var(--tn-024af); } div.highlight .gp { color: var(--tn-79ea3); } div.highlight .gs { color: var(--tn-688d5); } div.highlight .gu { color: var(--tn-867a9); } div.highlight .gt { color: var(--tn-7735a); } div.highlight .na { color: var(--tn-a3602); } div.highlight .nb { color: var(--tn-23f93); } div.highlight .nc { color: var(--tn-c7dc5); } div.highlight .kc, div.highlight .no { color: var(--tn-04f7e); } div.highlight .ni { color: var(--tn-49d9d); } 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-e3eba); } div.highlight .nt, div.highlight .nl { color: var(--tn-13771); } div.highlight .w { color: var(--tn-f51dc); } div.highlight .il, div.highlight .m, div.highlight .mb, div.highlight .mf, div.highlight .mh, div.highlight .mi, div.highlight .mo { color: var(--tn-b096f); } 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-fb810); } div.highlight .sd { color: var(--tn-a51eb); font-style: italic; } div.highlight .sr { color: var(--tn-a0de5); } 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-9459b); } pre.is-text-file { margin-top: 3rem; margin-bottom: 3rem; border-style: solid; border-width: 1px; border-color: var(--tn-a354f); background-color: var(--tn-0b719); } pre.is-text-file > p { font-family: var(--tn-5dac5); } div.admonition { margin: 2rem; border-style: solid; } div.admonition > header { font-weight: var(--tn-68ec4); padding: 0.5rem; } div.admonition > div { padding: 0.5rem; } div.admonition.primary > header { color: var(--tn-48c26); background-color: var(--tn-9459b); } div.admonition.primary { color: var(--tn-48c26); border-color: var(--tn-48c26); } div.admonition.link > header { color: var(--tn-d2f91); background-color: var(--tn-74fa4); } div.admonition.link { color: var(--tn-32bba); border-color: var(--tn-32bba); } div.admonition.info > header { color: var(--tn-7a434); background-color: var(--tn-9dd24); } div.admonition.info { color: var(--tn-edf76); border-color: var(--tn-edf76); } div.admonition.success > header { color: var(--tn-56743); background-color: var(--tn-104ba); } div.admonition.success { color: var(--tn-0df5a); border-color: var(--tn-61636); } div.admonition.warning > header { color: var(--tn-42525); background-color: var(--tn-b1f7c); } div.admonition.warning { color: var(--tn-d2f89); border-color: var(--tn-735f9); } div.admonition.danger > header { color: var(--tn-862b7); background-color: var(--tn-b67c2); } div.admonition.danger { color: var(--tn-862b7); border-color: var(--tn-5f68d); } a { text-decoration: none; color: var(--tn-48c26); } a:hover { background-color: var(--tn-9459b); } a.is-disabled { background-color: var(--tn-a354f); cursor: not-allowed; } a.is-disabled:hover { background-color: var(--tn-a354f); } 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-0b719); border-style: solid; border-width: 1px; border-color: var(--tn-132cc); } 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-0b719); border: 1px solid var(--tn-04363); border-radius: 4px; } summary { cursor: pointer; font-weight: var(--tn-68ec4); } 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-9459b); margin-top: 2rem; margin-bottom: 2rem; } svg.box * { fill: var(--tn-132cc); font-size: 0.35rem; font-family: var(--tn-5dac5); } form.search { background-color: var(--tn-9459b); 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-7ecbd); } input[type="search"] { height: 2rem; width: 100%; background-color: var(--tn-0b719); border-style: solid; border-color: var(--tn-9459b); 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-7ecbd); } input[type="search"]:focus { border-color: var(--tn-48c26); outline-style: solid; outline-width: 3px; } input[type="search"]:focus:valid { border-color: var(--tn-61636); outline-color: var(--tn-61636); } input[type="search"]:focus:invalid { border-color: var(--tn-5f68d); outline-color: var(--tn-5f68d); } button[type="submit"] { position: absolute; right: 2px; top: 2px; bottom: 2px; border-width: 0; text-align: center; background-color: var(--tn-0b719); } 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-132cc); } input[type="search"]:focus:valid + button[type="submit"] svg { fill: var(--tn-56743); } input[type="search"]:focus:invalid + button[type="submit"] svg { fill: var(--tn-42525); } main table { border-collapse: collapse; border-color: var(--tn-a354f); 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-5dac5); } 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-0b719); } main table caption { font-weight: var(--tn-68ec4); 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-48c26); background-color: var(--tn-62988); } .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-62988); background-color: var(--tn-48c26); } .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-5a05d); color: var(--tn-62988); background-color: var(--tn-48c26); display: flex; justify-content: center; align-items: center; cursor: pointer; } .button > div { width: 1.2rem; } .button:hover { color: var(--tn-7ecbd); background-color: var(--tn-9459b); } .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-132cc); } 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-48c26); } nav.breadcrumbs > a > svg { fill: var(--tn-48c26); } nav.breadcrumbs > span > svg { fill: var(--tn-132cc); } nav.breadcrumbs > span.is-current { font-style: italic; } nav.breadcrumbs > a:hover { color: var(--tn-132cc); } 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-9459b); width: 100%; text-align: center; padding: 5px; } .flex-list { --tn-05c20: 1rem; --tn-cb76f: 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-cb76f) - var(--tn-05c20) ); max-width: calc( 100% / var(--tn-cb76f) - var(--tn-05c20) ); margin-bottom: calc(var(--tn-05c20)); margin-left: calc(var(--tn-05c20) / 2); margin-right: calc(var(--tn-05c20) / 2); } @media (min-width: 768px) { .flex-list > * { --tn-cb76f: 3; } } @media (min-width: 1024px) { .flex-list > * { --tn-cb76f: 4; } } @media (min-width: 1216px) { .flex-list > * { --tn-cb76f: 6; } } #left-bar { position: sticky; top: var(--tn-6189e); display: none; flex-direction: column; flex-grow: 0; height: 100%; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: var(--tn-7ecbd); padding: 0.5rem; font-weight: var(--tn-5a05d); background-color: var(--tn-62988); } #left-bar.is-active { display: flex; } #left-bar svg { fill: var(--tn-7ecbd); } #left-bar > a { display: flex; flex-direction: row; align-items: center; } #left-bar > a:hover { background-color: var(--tn-a354f); } #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-9459b); } #left-bar div.label { display: flex; align-items: center; flex-grow: 1; min-width: 14rem; text-transform: uppercase; color: var(--tn-132cc); } #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-68ec4); color: var(--tn-7ecbd); } #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-68ec4); 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-a354f); } .listing > .listing-item > .listing-item-content { color: var(--tn-132cc); 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-e72a6); } #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-9459b); color: var(--tn-7ecbd); border-color: var(--tn-7ecbd); } #messages .message.is-success { background-color: var(--tn-104ba); color: var(--tn-56743); border-color: var(--tn-56743); } #messages .message.is-warning { background-color: var(--tn-b1f7c); color: var(--tn-42525); border-color: var(--tn-42525); } #messages .message.is-error { background-color: var(--tn-b67c2); color: var(--tn-862b7); border-color: var(--tn-862b7); } #messages .message svg { fill: var(--tn-132cc); } 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-04363); background-color: var(--tn-0b719); } nav.pagination > div > span.is-disabled { color: var(--tn-04363); border-color: var(--tn-a354f); cursor: not-allowed; } nav.pagination > div > a.is-current, nav.pagination > div > a:hover { background-color: var(--tn-48c26); color: var(--tn-9459b); } nav.pagination svg { fill: var(--tn-132cc); } #right-bar { --tn-2217b: 0.5em; --tn-ff0a3: 1em; background-color: var(--tn-62988); padding: var(--tn-2217b); padding-bottom: 0; gap: var(--tn-ff0a3); min-width: 14rem; } #right-bar > div { display: flex; flex-direction: column; padding: var(--tn-ff0a3); 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-68ec4); border-top-left-radius: 0.35rem; border-top-right-radius: 0.35rem; color: var(--tn-7ecbd); background-color: var(--tn-9459b); } div.tabs div.tab-content { display: none; flex-grow: 1; order: 99; width: 100%; border-style: solid; border-width: 1px; border-color: var(--tn-9459b); } div.tabs input[type="radio"]:checked + label + div.tab-content { display: block; } div.tabs input[type="radio"]:checked + label { background-color: var(--tn-48c26); color: var(--tn-0b719); } #top-bar { display: flex; flex-direction: row; justify-content: space-between; align-items: center; background-color: var(--tn-0b719); padding-left: 1rem; padding-right: 1rem; z-index: 10; } #top-bar svg { fill: var(--tn-348a5); } #top-bar a.brand { display: flex; align-items: center; height: var(--tn-56c84); background-color: transparent; margin-top: var(--tn-25bc0); margin-bottom: var(--tn-25bc0); margin-left: var(--tn-5d889); margin-right: var(--tn-5d889); padding-top: var(--tn-54d55); padding-bottom: var(--tn-54d55); padding-left: var(--tn-6cba5); padding-right: var(--tn-6cba5); } #top-bar .brand > span { margin-left: 0.5rem; margin-right: 0.5rem; color: var(--tn-348a5); font-size: 1.5rem; } #top-bar form.search { display: none; margin-top: var(--tn-25bc0); margin-bottom: var(--tn-25bc0); } #top-bar div.toggle { display: block; height: 3rem; transition: transform 0.35s; margin-top: var(--tn-25bc0); margin-bottom: var(--tn-25bc0); } #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-5dac5); } div.is-buffer-line { display: flex; align-items: baseline; } div.is-buffer-line:hover { background-color: var(--tn-a354f); } div.is-buffer-line span.dspc { color: var(--tn-04363); } span.is-selection { background-color: var(--tn-74fa4); } span.is-match { background-color: var(--tn-7a434); color: var(--tn-0b719); } @keyframes blinking-cursor-neutral { 0% { color: var(--tn-a354f); background-color: var(--tn-a354f); } 40% { color: var(--tn-a354f); background-color: var(--tn-0b719); } 60% { color: var(--tn-a354f); background-color: var(--tn-0b719); } 100% { color: var(--tn-a354f); background-color: var(--tn-0b719); } } @keyframes blinking-cursor-neutral-insert { 0% { color: var(--tn-a354f); border-left-color: var(--tn-a354f); } 40% { color: var(--tn-a354f); border-left-color: var(--tn-a354f); } 60% { color: var(--tn-a354f); border-left-color: var(--tn-0b719); } 100% { color: var(--tn-a354f); border-left-color: var(--tn-0b719); } } @keyframes blinking-cursor-before { 0% { color: var(--tn-104ba); background-color: var(--tn-61636); } 40% { color: var(--tn-104ba); background-color: var(--tn-61636); } 60% { color: var(--tn-56743); background-color: var(--tn-104ba); } 100% { color: var(--tn-56743); background-color: var(--tn-104ba); } } @keyframes blinking-cursor-before-insert { 0% { color: var(--tn-56743); border-left-color: var(--tn-61636); } 40% { color: var(--tn-56743); border-left-color: var(--tn-61636); } 60% { color: var(--tn-56743); border-left-color: var(--tn-104ba); } 100% { color: var(--tn-56743); border-left-color: var(--tn-104ba); } } @keyframes blinking-cursor-after { 0% { color: var(--tn-5f68d); background-color: var(--tn-b67c2); } 40% { color: var(--tn-5f68d); background-color: var(--tn-b67c2); } 60% { color: var(--tn-b67c2); background-color: var(--tn-5f68d); } 100% { color: var(--tn-b67c2); background-color: var(--tn-5f68d); } } @keyframes blinking-cursor-after-insert { 0% { color: var(--tn-5f68d); border-left-color: var(--tn-b67c2); } 40% { color: var(--tn-5f68d); border-left-color: var(--tn-b67c2); } 60% { color: var(--tn-5f68d); border-left-color: var(--tn-5f68d); } 100% { color: var(--tn-5f68d); border-left-color: var(--tn-5f68d); } } @keyframes blinking-cursor-before-after { 0% { color: var(--tn-5f68d); background-color: var(--tn-b67c2); } 40% { color: var(--tn-5f68d); background-color: var(--tn-b67c2); } 60% { color: var(--tn-56743); background-color: var(--tn-104ba); } 100% { color: var(--tn-56743); background-color: var(--tn-104ba); } } @keyframes blinking-cursor-before-after-insert { 0% { color: var(--tn-5f68d); border-left-color: var(--tn-5f68d); } 40% { color: var(--tn-5f68d); border-left-color: var(--tn-5f68d); } 60% { color: var(--tn-56743); border-left-color: var(--tn-61636); } 100% { color: var(--tn-56743); border-left-color: var(--tn-61636); } } div.is-terminal div.is-buffer-line .is-cursor { font-weight: var(--tn-68ec4); 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-7ecbd); background-color: var(--tn-a354f); } 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-e72a6); font-family: var(--tn-5dac5); border-style: solid; border-radius: 0.25rem; border-width: 1px; border-color: var(--tn-48c26); color: var(--tn-7ecbd); background-color: var(--tn-9459b); } 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-04363); background-color: var(--tn-a354f); } 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-5dac5); background-color: var(--tn-132cc); color: var(--tn-0b719); } main div.is-terminal div.is-status-line .is-mode.is-mode-normal { background-color: var(--tn-48c26); } main div.is-terminal div.is-status-line .is-mode.is-mode-insert { background-color: var(--tn-32bba); } main div.is-terminal div.is-status-line .is-mode.is-mode-visual { background-color: var(--tn-edf76); } 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-a354f); color: var(--tn-132cc); font-family: var(--tn-5dac5); } main div.is-terminal { display: flex; flex-direction: column; max-width: 100%; position: relative; overflow: hidden; padding: 2px; background-color: var(--tn-0b719); border-style: solid; border-width: 1px; border-color: var(--tn-a354f); } 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-0b719); 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-5dac5); } .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-132cc); } span.is-function { font-weight: var(--tn-5a05d); } :root { --tn-21f57: sans-serif; --tn-5dac5: monospace; --tn-4aaa6: 900; --tn-68ec4: 700; --tn-5a05d: 500; --tn-e72a6: 400; --tn-398d5: 300; --tn-f82cd: 100; } @media (min-width: 768px) { :root { --tn-21f57: "Roboto", sans-serif; --tn-5dac5: "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-21f57); } .is-monospace { font-family: var(--tn-5dac5); } h1, h2, h3, h4, h5, h6 { color: var(--tn-7ecbd); font-weight: var(--tn-e72a6); line-height: 1.2; } h1 { text-align: center; font-weight: var(--tn-68ec4); 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-48c26); } .has-text-color-dark { color: var(--tn-132cc); } .has-text-color-grey-light { color: var(--tn-a354f); } .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-62988); color: var(--tn-132cc); } :root { --tn-4e667: 0.25rem; --tn-99c75: 0.0625rem; --tn-4f7ac: 0.2s ease-in-out; --tn-4840f: 768px; --tn-07955: 769px; --tn-29360: 1024px; --tn-04145: 1216px; --tn-ee55a: 1408px; --tn-c6fde: 2rem; --tn-8d9c1: 2rem; --tn-517a0: 14px; --tn-c9da3: 18px; --tn-56c84: 60px; --tn-25bc0: 10px; --tn-5d889: 5px; --tn-54d55: 5px; --tn-6cba5: 5px; --tn-6189e: 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-6189e); width: 100%; z-index: 2; } #layout { display: flex; flex-direction: column; justify-content: space-between; } #left-bar { display: none; position: sticky; top: var(--tn-6189e); 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-c6fde); margin-right: var(--tn-c6fde); margin-bottom: var(--tn-8d9c1); } #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-081d0); } @media (min-width: 768px) { :root { --tn-c6fde: 2rem; } #left-bar { display: flex; } #layout { flex-direction: row; } } @media (min-width: 1024px) { :root { font-size: 16px; --tn-517a0: 16px; --tn-c9da3: 20px; --tn-c6fde: 3rem; } } @media (min-width: 1216px) { :root { font-size: 18px; --tn-517a0: 18px; --tn-c9da3: 22px; --tn-c6fde: 4rem; } } @media (min-width: 1408px) { :root { --tn-c6fde: 6rem; } } div.ad-display-horizontal { width: 100%; min-height: 50px; } #tips { display: flex; flex-direction: column; justify-content: flex-start; width: 100%; margin-top: 4rem; padding: 0; } #tips > a.tip { display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 1rem; width: 100%; } #tips > a.tip > div.main { display: flex; align-items: center; } #tips > a.tip > div.main > div.icon { display: flex; align-items: center; width: 2rem; } #tips svg { fill: var(--tn-48c26); } #tips > a.tip > div.main > div.label { text-align: left; flex-grow: 1; margin-left: 1rem; min-width: 24rem; } #tips > a.tip > div.tags { display: none; } #tips > a.tip > div.tags > span.tag { background-color: transparent; color: var(--tn-48c26); font-size: 0.7rem; } @media (width >= 1024px) { #tips > a.tip { flex-direction: row; padding-top: 0; padding-bottom: 0; } #tips > a.tip > div.tags { display: block; } } 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-5dac5); font-weight: 600; color: var(--tn-7ecbd); } span.commands-index-heading, div.commands-index-card-listing > a:hover { background-color: var(--tn-9459b); } div.commands-index-card-topic:hover { background-color: var(--tn-0b719); } 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-04363); } div.commands-index-headings, div.commands-index-card-listing > a { border-bottom-style: solid; border-width: 1px; border-color: var(--tn-04363); } #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-7ecbd); color: var(--tn-7ecbd); } #neovim-cheatsheet div.toc > a.button:hover { background-color: var(--tn-9459b); filter: drop-shadow(0 0 0.5rem var(--tn-9459b)); } #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-a354f); padding: 1rem; } #neovim-cheatsheet div.entry { display: flex; justify-content: space-between; align-content: center; } #neovim-cheatsheet div.entry:hover { background-color: var(--tn-0b719); } #neovim-cheatsheet div.entry.heading { text-align: center; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: var(--tn-a354f); 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; } #error div.line > a { margin-left: 2rem; padding-left: 0.5rem; padding-right: 0.5rem; } #search div.search-container, #search div.pagination-container { display: flex; width: 100%; justify-content: center; } #search form.search { width: 50%; padding: 5px; } #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-48c26); } #home div.links div.label { margin-left: 0.5rem; display: flex; justify-content: center; align-items: center; } #home-hero { height: 85vh; 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-7ecbd); color: var(--tn-7ecbd); } #home-hero nav.simple-nav a.button:hover { background-color: var(--tn-9459b); filter: drop-shadow(0 0 0.5rem var(--tn-9459b)); } #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; } }