.highlight table td { padding: 5px; }

.highlight table pre { margin: 0; }

.highlight, .highlight .w { color: var(--code-fg); background-color: var(--code-bg); }

/* Errors */
.highlight .err { color: var(--code-error); background-color: var(--code-bg); font-weight: bold; }

/* Comments */
.highlight .c, .highlight .ch, .highlight .cd, .highlight .cm, .highlight .c1, .highlight .cs { color: var(--code-comment); font-style: italic; }

/* Preprocessor */
.highlight .cp { color: var(--code-namespace); font-weight: bold; }

/* Keywords */
.highlight .k, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kv { color: var(--code-keyword); }

.highlight .kd { color: var(--code-keyword-alt); }

.highlight .kt { color: var(--code-type); }

.highlight .kc { color: var(--code-constant); }

/* Operators & punctuation */
.highlight .o, .highlight .ow, .highlight .p, .highlight .pi { color: var(--code-operator); font-weight: bold; }

/* Strings */
.highlight .s, .highlight .sb, .highlight .sc, .highlight .dl, .highlight .sd, .highlight .s2, .highlight .sh, .highlight .sx, .highlight .s1, .highlight .si, .highlight .sr, .highlight .cpf { color: var(--code-string); font-style: italic; }

.highlight .se { color: var(--code-string-escape); }

.highlight .sa { color: var(--code-keyword); }

/* Names */
.highlight .nn, .highlight .nc { color: var(--code-namespace); }

.highlight .no, .highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mx { color: var(--code-constant); }

.highlight .na { color: var(--code-attribute); }

.highlight .ss { color: var(--code-symbol); }

/* Diff */
.highlight .gi { color: var(--code-added); background-color: var(--code-bg); }

.highlight .gd { color: var(--code-removed); background-color: var(--code-bg); }

.highlight .gh { color: var(--code-added); font-weight: bold; }

body { padding: 50px; }

.wrapper { display: flex; margin: 0 auto; }

kbd { background-color: var(--kbd-bg); border: 1px solid var(--kbd-border); border-bottom-color: var(--kbd-border-bottom); border-radius: 3px; box-shadow: inset 0 -1px 0 var(--kbd-border-bottom); color: var(--kbd-text); display: inline-block; font-size: 11px; line-height: 10px; padding: 3px 5px; vertical-align: middle; }

header { display: block; z-index: 10; position: fixed; top: 50px; left: 50px; width: 270px; margin-right: 24px; -webkit-font-smoothing: subpixel-antialiased; }

header ul li { cursor: pointer; list-style: none; padding: 8px; margin: 0; border-radius: 10px; }

header ul li:hover { background: var(--header-hover-bg); }

nav { display: block; z-index: 9; position: fixed; top: 50px; right: 50px; width: 200px; -webkit-font-smoothing: subpixel-antialiased; margin-bottom: 24px; }

nav ul { list-style-type: disc; margin-bottom: 0; }

nav li { margin: 0; padding: 0; }

section { display: block; position: relative; left: 296px; width: calc(100% - 270px - 200px - 50px); max-width: calc(100% - 270px - 200px - 50px); min-width: calc(100% - 270px - 200px - 50px); }

button.clean { cursor: pointer; font-size: 20px; border-radius: 50%; background: transparent; border: none; }

#toggle-theme { z-index: 90; position: fixed; top: 0; right: 0; padding: 8px; }

#toggle-menu { z-index: 90; display: none; position: fixed; top: 0; left: 0; padding: 8px; }

#btn-scroll-up { transition: 0.2s !important; z-index: 9; display: none; opacity: 0; position: fixed; bottom: 0; right: 0; padding: 8px; }

#btn-playground { z-index: 90; position: fixed; top: 4px; right: 48px; padding: 8px; }

a.docnav { display: block; font-size: min(2vw, 14px); border-radius: 8px; text-align: center; background: var(--code-comment); padding: 2em 3em 1.2em 3em; margin-bottom: 2em; }

a.docnav:hover, a.docnav:focus { background: var(--code-string); text-shadow: none; }

a.docnav h4, h5 { margin: 0 0 0.8em 0; font-size: 1.17em; }

a.docnav h4 { color: var(--heading-color); }

@media print, screen and (max-width: 960px) { header { left: -100vw; background: var(--bg-color); top: 0; width: 100vw; height: 100vh; padding: 50px; }
  header.expanded { left: 0; }
  nav { position: relative; width: 100%; top: unset; right: unset; }
  section { max-width: 100%; min-width: unset; width: unset; left: 0; }
  #toggle-menu { display: block; } }