*, *::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-46659: rgba(0, 0, 0, 0); --tn-20cce: hsl(0 0% 0%); --tn-c858c: hsl(0 0% 12%); --tn-21e26: hsl(0 0% 30%); --tn-1000f: hsl(0 0% 50%); --tn-74d8d: hsl(0 0% 80%); --tn-33e97: hsl(0 0% 95%); --tn-9f603: hsl(0 0% 100%); --tn-3b240: light-dark( var(--tn-20cce), var(--tn-9f603) ); --tn-97741: light-dark( var(--tn-c858c), var(--tn-74d8d) ); --tn-2a439: light-dark( var(--tn-21e26), var(--tn-74d8d) ); --tn-11239: light-dark( var(--tn-1000f), var(--tn-1000f) ); --tn-6aa09: light-dark( var(--tn-74d8d), var(--tn-21e26) ); --tn-6c198: light-dark( var(--tn-33e97), var(--tn-c858c) ); --tn-9356f: light-dark( var(--tn-9f603), var(--tn-20cce) ); --tn-81cf4: hsl(210 80% 20%); --tn-ade58: hsl(210 80% 40%); --tn-42585: hsl(210 80% 85%); --tn-e2c0c: light-dark( var(--tn-81cf4), var(--tn-42585) ); --tn-77145: light-dark( var(--tn-ade58), var(--tn-42585) ); --tn-c36d4: light-dark( var(--tn-42585), var(--tn-81cf4) ); --tn-92558: hsl(270 100% 50%); --tn-f8d93: hsl(270 100% 70%); --tn-961e7: hsl(270 100% 90%); --tn-91c38: light-dark( var(--tn-92558), var(--tn-961e7) ); --tn-d4156: light-dark( var(--tn-f8d93), var(--tn-961e7) ); --tn-dc054: light-dark( var(--tn-961e7), var(--tn-92558) ); --tn-1d85b: hsl(240 100% 27%); --tn-eee21: hsl(240 100% 50%); --tn-4d7bd: hsl(195 53% 79%); --tn-b31b6: light-dark( var(--tn-1d85b), var(--tn-4d7bd) ); --tn-947da: light-dark( var(--tn-eee21), var(--tn-4d7bd) ); --tn-89c98: light-dark( var(--tn-4d7bd), var(--tn-1d85b) ); --tn-e5462: hsl(120 100% 20%); --tn-4c3fb: hsl(120 100% 50%); --tn-b8100: hsl(120 73% 75%); --tn-093f2: light-dark( var(--tn-e5462), var(--tn-b8100) ); --tn-baf6d: light-dark( var(--tn-4c3fb), var(--tn-b8100) ); --tn-474c9: light-dark( var(--tn-b8100), var(--tn-e5462) ); --tn-ed0d5: hsl(55 100% 27%); --tn-74f4d: hsl(60 100% 50%); --tn-0bec1: hsl(50 100% 95%); --tn-1cd68: light-dark( var(--tn-ed0d5), var(--tn-0bec1) ); --tn-bbd5f: light-dark( var(--tn-74f4d), var(--tn-0bec1) ); --tn-eb967: light-dark( var(--tn-0bec1), var(--tn-ed0d5) ); --tn-3b29c: hsl(0 100% 27%); --tn-e1364: hsl(0, 100%, 50%); --tn-522d9: hsl(0 100% 75%); --tn-a39f8: light-dark( var(--tn-3b29c), var(--tn-522d9) ); --tn-d0b87: light-dark( var(--tn-e1364), var(--tn-522d9) ); --tn-aec88: light-dark( var(--tn-522d9), var(--tn-3b29c) ); } .is-hoverable:hover { background-color: var(--tn-6aa09); } .is-copyable { font-variant-ligatures: none; position: relative; } .is-copyable:hover { color: var(--tn-947da); 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-97741); background-color: var(--tn-9356f); } .is-light { color: var(--tn-97741); background-color: var(--tn-6c198); } .is-grey-light { color: var(--tn-97741); background-color: var(--tn-6aa09); } .is-grey { color: var(--tn-97741); background-color: var(--tn-11239); } .is-grey-dark { color: var(--tn-9356f); background-color: var(--tn-2a439); } .is-dark { color: var(--tn-6c198); background-color: var(--tn-97741); } .is-black { color: var(--tn-6c198); background-color: var(--tn-3b240); } .is-primary { color: var(--tn-9356f); background-color: var(--tn-77145); } .is-link { color: var(--tn-9356f); background-color: var(--tn-d4156); } .is-info { color: var(--tn-9356f); background-color: var(--tn-947da); } .is-success { color: var(--tn-9356f); background-color: var(--tn-baf6d); } .is-warning { color: var(--tn-9356f); background-color: var(--tn-bbd5f); } .is-danger { color: var(--tn-9356f); background-color: var(--tn-d0b87); } .is-primary-light { color: var(--tn-e2c0c); background-color: var(--tn-c36d4); } .is-link-light { color: var(--tn-91c38); background-color: var(--tn-dc054); } .is-info-light { color: var(--tn-b31b6); background-color: var(--tn-89c98); } .is-success-light { color: var(--tn-093f2); background-color: var(--tn-474c9); } .is-warning-light { color: var(--tn-1cd68); background-color: var(--tn-eb967); } .is-danger-light { color: var(--tn-a39f8); background-color: var(--tn-aec88); } .is-primary-dark { background-color: var(--tn-e2c0c); } .is-link-dark { background-color: var(--tn-91c38); } .is-info-dark { background-color: var(--tn-b31b6); } .is-success-dark { background-color: var(--tn-093f2); } .is-warning-dark { background-color: var(--tn-1cd68); } .is-danger-dark { background-color: var(--tn-a39f8); } .is-primary-inverted { background-color: var(--tn-9356f); color: var(--tn-77145); } .is-link-inverted { background-color: var(--tn-9356f); color: var(--tn-d4156); } .is-info-inverted { background-color: var(--tn-9356f); color: var(--tn-947da); } .is-success-inverted { background-color: var(--tn-9356f); color: var(--tn-baf6d); } .is-warning-inverted { background-color: var(--tn-9356f); color: var(--tn-bbd5f); } .is-danger-inverted { background-color: var(--tn-9356f); color: var(--tn-d0b87); } .is-primary-outlined { background-color: var(--tn-9356f); color: var(--tn-77145); border-style: solid; border-width: 2px; border-color: var(--tn-77145); } .is-link-outlined { background-color: var(--tn-9356f); color: var(--tn-d4156); border-style: solid; border-width: 2px; border-color: var(--tn-d4156); } .is-info-outlined { background-color: var(--tn-9356f); color: var(--tn-947da); border-style: solid; border-width: 2px; border-color: var(--tn-947da); } .is-success-outlined { background-color: var(--tn-9356f); color: var(--tn-baf6d); border-style: solid; border-width: 2px; border-color: var(--tn-baf6d); } .is-warning-outlined { background-color: var(--tn-9356f); color: var(--tn-bbd5f); border-style: solid; border-width: 2px; border-color: var(--tn-bbd5f); } .is-danger-outlined { background-color: var(--tn-9356f); color: var(--tn-d0b87); border-style: solid; border-width: 2px; border-color: var(--tn-d0b87); } .is-light-to-dark { height: 1em; position: relative; animation: light-to-dark 1s infinite; } @keyframes light-to-dark { 0% { color: var(--tn-11239); } 40% { color: var(--tn-11239); } 60% { color: var(--tn-6aa09); } 100% { color: var(--tn-6aa09); } } @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-1ca3f: 2em; --tn-5906d: 1em; justify-content: space-between; background-color: var(--tn-6c198); padding: var(--tn-1ca3f); } #footer svg { fill: var(--tn-97741); } #footer > div { display: flex; align-items: center; padding: var(--tn-5906d); } #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-592e9); 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-6c198); 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-592e9); } main > header { width: 100%; background-color: var(--tn-c36d4); margin-top: 0; margin-bottom: 0; padding: 2rem; border-style: solid; border-width: 1px; border-color: var(--tn-c36d4); } time { font-size: 0.8rem; color: var(--tn-77145); 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: 2rem; } main > article blockquote { margin-left: 0.5rem; padding: 0.5rem; border-left-style: solid; border-left-width: 3px; border-left-color: var(--tn-77145); background-color: var(--tn-c36d4); } :root { --tn-4d383: light-dark( hsl(180deg, 33%, 38%), hsl(220 10% 70%) ); --tn-c831b: light-dark(hsl(0 100% 50%), hsl(0 100% 70%)); --tn-868ba: light-dark( hsl(0 100% 27%), hsl(0 100% 77%) ); --tn-63787: light-dark( hsl(300 100% 27%), hsl(300 100% 77%) ); --tn-32319: light-dark( hsl(241 69% 29%), hsl(241 69% 79%) ); --tn-0b95d: light-dark( hsl(120 100% 25%), hsl(120 100% 75%) ); --tn-8f0b4: light-dark( hsl(0 0% 27%), hsl(0 0% 77%) ); --tn-b2a40: light-dark( hsl(241 69% 29%), hsl(241 69% 79%) ); --tn-9c1bd: light-dark( hsl(300 100% 27%), hsl(300 100% 77%) ); --tn-ab74d: light-dark( hsl(300 100% 25%), hsl(300 100% 75%) ); --tn-a3f31: light-dark( hsl(222 100% 43%), hsl(222 100% 73%) ); --tn-43180: light-dark( hsl(120 100% 25%), hsl(120 100% 75%) ); --tn-b9614: light-dark( hsl(71 56% 36%), hsl(71 56% 76%) ); --tn-680b7: light-dark( hsl(120 100% 25%), hsl(120 100% 75%) ); --tn-fa74b: light-dark( hsl(222 100% 43%), hsl(222 100% 73%) ); --tn-0c1fd: light-dark( hsl(0 100% 27%), hsl(0 100% 77%) ); --tn-688f1: light-dark( hsl(60 100% 31%), hsl(60 100% 71%) ); --tn-cb2f1: light-dark( hsl(240 100% 27%), hsl(320 90% 70%) ); --tn-4e7b6: light-dark(hsl(0 0% 40%), hsl(0 0% 70%)); --tn-a232e: light-dark( hsl(277 100% 57%), hsl(277 100% 77%) ); --tn-92c5a: light-dark(hsl(0 0% 40%), hsl(0 0% 70%)); --tn-2be8f: light-dark(hsl(0 70% 43%), hsl(0 70% 73%)); --tn-34eea: light-dark( hsl(336 38% 57%), hsl(336 38% 77%) ); --tn-b83b5: light-dark(hsl(0 70% 43%), hsl(0 70% 73%)); --tn-01dff: 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-01dff); } 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-4d383); font-style: italic; } div.highlight .err { border: 1px solid var(--tn-c831b); } div.highlight .bp, div.highlight .k, div.highlight .kd, div.highlight .kp, div.highlight .kr, div.highlight .kt, div.highlight .kn { color: var(--tn-43180); } div.highlight .ow { color: var(--tn-a232e); } div.highlight .o { color: var(--tn-92c5a); } div.highlight .ge { color: var(--tn-63787); font-style: italic; } div.highlight .gd { color: var(--tn-868ba); } div.highlight .gr { color: var(--tn-c831b); } div.highlight .gh { color: var(--tn-32319); } div.highlight .gi { color: var(--tn-0b95d); } div.highlight .go { color: var(--tn-8f0b4); } div.highlight .gp { color: var(--tn-b2a40); } div.highlight .gs { color: var(--tn-9c1bd); } div.highlight .gu { color: var(--tn-ab74d); } div.highlight .gt { color: var(--tn-a3f31); } div.highlight .na { color: var(--tn-b9614); } div.highlight .nb { color: var(--tn-680b7); } div.highlight .nc { color: var(--tn-fa74b); } div.highlight .kc, div.highlight .no { color: var(--tn-0c1fd); } div.highlight .ni { color: var(--tn-92c5a); } 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-cb2f1); } div.highlight .nt, div.highlight .nl { color: var(--tn-688f1); } div.highlight .w { color: var(--tn-01dff); } div.highlight .il, div.highlight .m, div.highlight .mb, div.highlight .mf, div.highlight .mh, div.highlight .mi, div.highlight .mo { color: var(--tn-4e7b6); } 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-b83b5); } div.highlight .sd { color: var(--tn-2be8f); font-style: italic; } div.highlight .sr { color: var(--tn-34eea); } 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-c36d4); } pre.is-text-file { margin-top: 3rem; margin-bottom: 3rem; border-style: solid; border-width: 1px; border-color: var(--tn-6aa09); background-color: var(--tn-6c198); } pre.is-text-file > p { font-family: var(--tn-592e9); } div.admonition { margin: 2rem; border-style: solid; } div.admonition > header { font-weight: var(--tn-98ee9); padding: 0.5rem; } div.admonition > div { padding: 0.5rem; } div.admonition.primary > header { color: var(--tn-77145); background-color: var(--tn-c36d4); } div.admonition.primary { color: var(--tn-77145); border-color: var(--tn-77145); } div.admonition.link > header { color: var(--tn-91c38); background-color: var(--tn-dc054); } div.admonition.link { color: var(--tn-d4156); border-color: var(--tn-d4156); } div.admonition.info > header { color: var(--tn-b31b6); background-color: var(--tn-89c98); } div.admonition.info { color: var(--tn-947da); border-color: var(--tn-947da); } div.admonition.success > header { color: var(--tn-093f2); background-color: var(--tn-474c9); } div.admonition.success { color: var(--tn-e5462); border-color: var(--tn-baf6d); } div.admonition.warning > header { color: var(--tn-1cd68); background-color: var(--tn-eb967); } div.admonition.warning { color: var(--tn-ed0d5); border-color: var(--tn-bbd5f); } div.admonition.danger > header { color: var(--tn-a39f8); background-color: var(--tn-aec88); } div.admonition.danger { color: var(--tn-a39f8); border-color: var(--tn-d0b87); } a { text-decoration: none; color: var(--tn-77145); } a:hover { background-color: var(--tn-c36d4); } a.is-disabled { background-color: var(--tn-6aa09); cursor: not-allowed; } a.is-disabled:hover { background-color: var(--tn-6aa09); } 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-6c198); border-style: solid; border-width: 1px; border-color: var(--tn-97741); } 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-6c198); border: 1px solid var(--tn-11239); border-radius: 4px; } summary { cursor: pointer; font-weight: var(--tn-98ee9); } 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-c36d4); margin-top: 2rem; margin-bottom: 2rem; } svg.box * { fill: var(--tn-97741); font-size: 0.35rem; font-family: var(--tn-592e9); } form.search { background-color: var(--tn-c36d4); 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-e2c0c); } input[type="search"] { height: 2rem; width: 100%; background-color: var(--tn-6c198); border-style: solid; border-color: var(--tn-c36d4); 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-e2c0c); } input[type="search"]:focus { border-color: var(--tn-77145); outline-style: solid; outline-width: 3px; } input[type="search"]:focus:valid { border-color: var(--tn-baf6d); outline-color: var(--tn-baf6d); } input[type="search"]:focus:invalid { border-color: var(--tn-d0b87); outline-color: var(--tn-d0b87); } button[type="submit"] { position: absolute; right: 2px; top: 2px; bottom: 2px; border-width: 0; text-align: center; background-color: var(--tn-6c198); } 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-97741); } input[type="search"]:focus:valid + button[type="submit"] svg { fill: var(--tn-093f2); } input[type="search"]:focus:invalid + button[type="submit"] svg { fill: var(--tn-1cd68); } main table { border-collapse: collapse; border-color: var(--tn-6aa09); 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-592e9); } 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-6c198); } main table caption { font-weight: var(--tn-98ee9); 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-77145); background-color: var(--tn-9356f); } .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-9356f); background-color: var(--tn-77145); } .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-886e7); color: var(--tn-9356f); background-color: var(--tn-77145); display: flex; justify-content: center; align-items: center; cursor: pointer; } .button > div { width: 1.2rem; } .button:hover { color: var(--tn-e2c0c); background-color: var(--tn-c36d4); } .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-97741); } 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-77145); } nav.breadcrumbs > a > svg { fill: var(--tn-77145); } nav.breadcrumbs > span > svg { fill: var(--tn-97741); } nav.breadcrumbs > span.is-current { font-style: italic; } nav.breadcrumbs > a:hover { color: var(--tn-97741); } 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-c36d4); width: 100%; text-align: center; padding: 5px; } .flex-list { --tn-2d37d: 1rem; --tn-dacc3: 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-dacc3) - var(--tn-2d37d) ); max-width: calc( 100% / var(--tn-dacc3) - var(--tn-2d37d) ); margin-bottom: calc(var(--tn-2d37d)); margin-left: calc(var(--tn-2d37d) / 2); margin-right: calc(var(--tn-2d37d) / 2); } @media (min-width: 768px) { .flex-list > * { --tn-dacc3: 3; } } @media (min-width: 1024px) { .flex-list > * { --tn-dacc3: 4; } } @media (min-width: 1216px) { .flex-list > * { --tn-dacc3: 6; } } #left-bar { position: sticky; top: var(--tn-a22c4); display: none; flex-direction: column; flex-grow: 0; height: 100%; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: var(--tn-e2c0c); padding: 0.5rem; font-weight: var(--tn-886e7); background-color: var(--tn-9356f); } #left-bar.is-active { display: flex; } #left-bar svg { fill: var(--tn-e2c0c); } #left-bar > a { display: flex; flex-direction: row; align-items: center; } #left-bar > a:hover { background-color: var(--tn-6aa09); } #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-c36d4); } #left-bar div.label { display: flex; align-items: center; flex-grow: 1; min-width: 14rem; text-transform: uppercase; color: var(--tn-97741); } #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-98ee9); color: var(--tn-e2c0c); } #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-98ee9); 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-6aa09); } .listing > .listing-item > .listing-item-content { color: var(--tn-97741); 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-bab9d); } #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-c36d4); color: var(--tn-e2c0c); border-color: var(--tn-e2c0c); } #messages .message.is-success { background-color: var(--tn-474c9); color: var(--tn-093f2); border-color: var(--tn-093f2); } #messages .message.is-warning { background-color: var(--tn-eb967); color: var(--tn-1cd68); border-color: var(--tn-1cd68); } #messages .message.is-error { background-color: var(--tn-aec88); color: var(--tn-a39f8); border-color: var(--tn-a39f8); } #messages .message svg { fill: var(--tn-97741); } 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-11239); background-color: var(--tn-6c198); } nav.pagination > div > span.is-disabled { color: var(--tn-11239); border-color: var(--tn-6aa09); cursor: not-allowed; } nav.pagination > div > a.is-current, nav.pagination > div > a:hover { background-color: var(--tn-77145); color: var(--tn-c36d4); } nav.pagination svg { fill: var(--tn-97741); } #right-bar { --tn-66356: 0.5em; --tn-04667: 1em; background-color: var(--tn-9356f); padding: var(--tn-66356); padding-bottom: 0; gap: var(--tn-04667); min-width: 14rem; } #right-bar > div { display: flex; flex-direction: column; flex-grow: 1; padding: var(--tn-04667); 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-98ee9); border-top-left-radius: 0.35rem; border-top-right-radius: 0.35rem; color: var(--tn-e2c0c); background-color: var(--tn-c36d4); } div.tabs div.tab-content { display: none; flex-grow: 1; order: 99; width: 100%; border-style: solid; border-width: 1px; border-color: var(--tn-c36d4); } div.tabs input[type="radio"]:checked + label + div.tab-content { display: block; } div.tabs input[type="radio"]:checked + label { background-color: var(--tn-77145); color: var(--tn-6c198); } #top-bar { display: flex; flex-direction: row; justify-content: space-between; align-items: center; background-color: var(--tn-6c198); padding-left: 1rem; padding-right: 1rem; z-index: 10; } #top-bar svg { fill: var(--tn-3b240); } #top-bar a.brand { display: flex; align-items: center; height: var(--tn-abd7c); background-color: transparent; margin-top: var(--tn-ca849); margin-bottom: var(--tn-ca849); margin-left: var(--tn-c4c24); margin-right: var(--tn-c4c24); padding-top: var(--tn-afbee); padding-bottom: var(--tn-afbee); padding-left: var(--tn-46f01); padding-right: var(--tn-46f01); } #top-bar .brand > span { margin-left: 0.5rem; margin-right: 0.5rem; color: var(--tn-3b240); font-size: 1.5rem; } #top-bar form.search { display: none; margin-top: var(--tn-ca849); margin-bottom: var(--tn-ca849); } #top-bar div.toggle { display: block; height: 3rem; transition: transform 0.35s; margin-top: var(--tn-ca849); margin-bottom: var(--tn-ca849); } #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-592e9); } div.is-buffer-line { display: flex; align-items: baseline; } div.is-buffer-line:hover { background-color: var(--tn-6aa09); } div.is-buffer-line span.dspc { color: var(--tn-11239); } span.is-selection { background-color: var(--tn-dc054); } span.is-match { background-color: var(--tn-b31b6); color: var(--tn-6c198); } @keyframes blinking-cursor-neutral { 0% { color: var(--tn-6aa09); background-color: var(--tn-6aa09); } 40% { color: var(--tn-6aa09); background-color: var(--tn-6c198); } 60% { color: var(--tn-6aa09); background-color: var(--tn-6c198); } 100% { color: var(--tn-6aa09); background-color: var(--tn-6c198); } } @keyframes blinking-cursor-neutral-insert { 0% { color: var(--tn-6aa09); border-left-color: var(--tn-6aa09); } 40% { color: var(--tn-6aa09); border-left-color: var(--tn-6aa09); } 60% { color: var(--tn-6aa09); border-left-color: var(--tn-6c198); } 100% { color: var(--tn-6aa09); border-left-color: var(--tn-6c198); } } @keyframes blinking-cursor-before { 0% { color: var(--tn-474c9); background-color: var(--tn-baf6d); } 40% { color: var(--tn-474c9); background-color: var(--tn-baf6d); } 60% { color: var(--tn-093f2); background-color: var(--tn-474c9); } 100% { color: var(--tn-093f2); background-color: var(--tn-474c9); } } @keyframes blinking-cursor-before-insert { 0% { color: var(--tn-093f2); border-left-color: var(--tn-baf6d); } 40% { color: var(--tn-093f2); border-left-color: var(--tn-baf6d); } 60% { color: var(--tn-093f2); border-left-color: var(--tn-474c9); } 100% { color: var(--tn-093f2); border-left-color: var(--tn-474c9); } } @keyframes blinking-cursor-after { 0% { color: var(--tn-d0b87); background-color: var(--tn-aec88); } 40% { color: var(--tn-d0b87); background-color: var(--tn-aec88); } 60% { color: var(--tn-aec88); background-color: var(--tn-d0b87); } 100% { color: var(--tn-aec88); background-color: var(--tn-d0b87); } } @keyframes blinking-cursor-after-insert { 0% { color: var(--tn-d0b87); border-left-color: var(--tn-aec88); } 40% { color: var(--tn-d0b87); border-left-color: var(--tn-aec88); } 60% { color: var(--tn-d0b87); border-left-color: var(--tn-d0b87); } 100% { color: var(--tn-d0b87); border-left-color: var(--tn-d0b87); } } @keyframes blinking-cursor-before-after { 0% { color: var(--tn-d0b87); background-color: var(--tn-aec88); } 40% { color: var(--tn-d0b87); background-color: var(--tn-aec88); } 60% { color: var(--tn-093f2); background-color: var(--tn-474c9); } 100% { color: var(--tn-093f2); background-color: var(--tn-474c9); } } @keyframes blinking-cursor-before-after-insert { 0% { color: var(--tn-d0b87); border-left-color: var(--tn-d0b87); } 40% { color: var(--tn-d0b87); border-left-color: var(--tn-d0b87); } 60% { color: var(--tn-093f2); border-left-color: var(--tn-baf6d); } 100% { color: var(--tn-093f2); border-left-color: var(--tn-baf6d); } } div.is-terminal div.is-buffer-line .is-cursor { font-weight: var(--tn-98ee9); 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-e2c0c); background-color: var(--tn-6aa09); } 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-bab9d); font-family: var(--tn-592e9); border-style: solid; border-radius: 0.25rem; border-width: 1px; border-color: var(--tn-77145); color: var(--tn-e2c0c); background-color: var(--tn-c36d4); } 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-11239); background-color: var(--tn-6aa09); } 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-592e9); background-color: var(--tn-97741); color: var(--tn-6c198); } main div.is-terminal div.is-status-line .is-mode.is-mode-normal { background-color: var(--tn-77145); } main div.is-terminal div.is-status-line .is-mode.is-mode-insert { background-color: var(--tn-d4156); } main div.is-terminal div.is-status-line .is-mode.is-mode-visual { background-color: var(--tn-947da); } 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-6aa09); color: var(--tn-97741); font-family: var(--tn-592e9); } main div.is-terminal { display: flex; flex-direction: column; max-width: 100%; position: relative; overflow: hidden; padding: 2px; background-color: var(--tn-6c198); border-style: solid; border-width: 1px; border-color: var(--tn-6aa09); } 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-6c198); 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-592e9); } .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-97741); } span.is-function { font-weight: var(--tn-886e7); } :root { --tn-82e5a: sans-serif; --tn-592e9: monospace; --tn-12320: 900; --tn-98ee9: 700; --tn-886e7: 500; --tn-bab9d: 400; --tn-9e575: 300; --tn-4ec85: 100; } @media (min-width: 768px) { :root { --tn-82e5a: "Roboto", sans-serif; --tn-592e9: "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-82e5a); } .is-monospace { font-family: var(--tn-592e9); } h1, h2, h3, h4, h5, h6 { color: var(--tn-e2c0c); font-weight: var(--tn-bab9d); line-height: 1.2; } h1 { text-align: center; font-weight: var(--tn-98ee9); 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-77145); } .has-text-color-dark { color: var(--tn-97741); } .has-text-color-grey-light { color: var(--tn-6aa09); } .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-9356f); color: var(--tn-97741); } :root { --tn-d354c: 0.25rem; --tn-1b26f: 0.0625rem; --tn-47850: 0.2s ease-in-out; --tn-c496d: 768px; --tn-5a9ef: 769px; --tn-ff17c: 1024px; --tn-b52c8: 1216px; --tn-77165: 1408px; --tn-c5b85: 2rem; --tn-6110a: 2rem; --tn-25e29: 14px; --tn-14d31: 18px; --tn-abd7c: 60px; --tn-ca849: 10px; --tn-c4c24: 5px; --tn-afbee: 5px; --tn-46f01: 5px; --tn-a22c4: 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-a22c4); width: 100%; z-index: 2; } #layout { display: flex; flex-direction: column; justify-content: space-between; } #left-bar { display: none; position: sticky; top: var(--tn-a22c4); 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-c5b85); margin-right: var(--tn-c5b85); margin-bottom: var(--tn-6110a); } #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-5906d); } @media (min-width: 768px) { :root { --tn-c5b85: 2rem; } #left-bar { display: flex; } #layout { flex-direction: row; } } @media (min-width: 1024px) { :root { font-size: 16px; --tn-25e29: 16px; --tn-14d31: 20px; --tn-c5b85: 3rem; } } @media (min-width: 1216px) { :root { font-size: 18px; --tn-25e29: 18px; --tn-14d31: 22px; --tn-c5b85: 4rem; } } @media (min-width: 1408px) { :root { --tn-c5b85: 6rem; } } div.ad-display-horizontal { width: 100%; min-height: 50px; } ins.adsbygoogle { display: block; } #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-77145); } #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-77145); 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-592e9); font-weight: 600; color: var(--tn-e2c0c); } span.commands-index-heading, div.commands-index-card-listing > a:hover { background-color: var(--tn-c36d4); } div.commands-index-card-topic:hover { background-color: var(--tn-6c198); } 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-11239); } div.commands-index-headings, div.commands-index-card-listing > a { border-bottom-style: solid; border-width: 1px; border-color: var(--tn-11239); } #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-e2c0c); color: var(--tn-e2c0c); } #neovim-cheatsheet div.toc > a.button:hover { background-color: var(--tn-c36d4); filter: drop-shadow(0 0 0.5rem var(--tn-c36d4)); } #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-6aa09); padding: 1rem; } #neovim-cheatsheet div.entry { display: flex; justify-content: space-between; align-content: center; } #neovim-cheatsheet div.entry:hover { background-color: var(--tn-6c198); } #neovim-cheatsheet div.entry.heading { text-align: center; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: var(--tn-6aa09); 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-77145); } #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-e2c0c); color: var(--tn-e2c0c); } #home-hero nav.simple-nav a.button:hover { background-color: var(--tn-c36d4); filter: drop-shadow(0 0 0.5rem var(--tn-c36d4)); } #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; } }