/*! modern-normalize v0.6.0 | MIT License | https://github.com/sindresorhus/modern-normalize */ /* Document ======== */ /** Use a better box model (opinionated). */ *, *::before, *::after { box-sizing: border-box; } /** Use a more readable tab size (opinionated). */ :root { -moz-tab-size: 4; tab-size: 4; } /** 1. Correct the line height in all browsers. 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ======== */ /** Remove the margin in all browsers. */ body { margin: 0; } /** Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */ body { font-family: system-ui, -apple-system, /* Firefox supports this but not yet `system-ui` */ 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; } /* Grouping content ================ */ /** Add the correct height in Firefox. */ hr { height: 0; } /* Text-level semantics ==================== */ /** Add the correct text decoration in Chrome, Edge, and Safari. */ abbr[title] { text-decoration: underline dotted; } /** Add the correct font weight in Edge and Safari. */ b, strong { font-weight: bolder; } /** 1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) 2. Correct the odd 'em' font sizing in all browsers. */ code, kbd, samp, pre { font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** Add the correct font size in all browsers. */ small { font-size: 80%; } /** Prevent 'sub' and 'sup' elements from affecting the line height in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Forms ===== */ /** 1. Change the font styles in all browsers. 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** Remove the inheritance of text transform in Edge and Firefox. 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** Correct the inability to style clickable types in iOS and Safari. */ button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; } /** Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type='button']::-moz-focus-inner, [type='reset']::-moz-focus-inner, [type='submit']::-moz-focus-inner { border-style: none; padding: 0; } /** Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type='button']:-moz-focusring, [type='reset']:-moz-focusring, [type='submit']:-moz-focusring { outline: 1px dotted ButtonText; } /** Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers. */ legend { padding: 0; } /** Add the correct vertical alignment in Chrome and Firefox. */ progress { vertical-align: baseline; } /** Correct the cursor style of increment and decrement buttons in Safari. */ [type='number']::-webkit-inner-spin-button, [type='number']::-webkit-outer-spin-button { height: auto; } /** 1. Correct the odd appearance in Chrome and Safari. 2. Correct the outline style in Safari. */ [type='search'] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** Remove the inner padding in Chrome and Safari on macOS. */ [type='search']::-webkit-search-decoration { -webkit-appearance: none; } /** 1. Correct the inability to style clickable types in iOS and Safari. 2. Change font properties to 'inherit' in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive =========== */ /* Add the correct display in Chrome and Safari. */ summary { display: list-item; } html { height: 100%; line-height: 1.4; } h1, h2, h3 { line-height: 1.15; } body { min-height: 100%; overflow-wrap: break-word; } main { flex-grow: 1; } img { max-width: 100%; max-height: 100vh; } table { display: block; overflow-x: auto; } pre { padding: 1rem; overflow-x: auto; line-height: 1.15; } code { padding: 0.25rem; } pre code { padding: unset; } kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; max-width: calc(100% - 0.1rem * 2); min-height: 1.5rem; padding: 0 0.25rem; margin: 0 0.1rem; overflow: hidden; } kbd kbd { min-width: unset; min-height: unset; padding: 0; margin: 0; } kbd kbd:not(:first-child) { padding-left: 0.25rem; } kbd kbd:not(:last-child) { padding-right: 0.25rem; } iframe { width: 100%; border: none; } dialog { max-height: calc(100% - 1rem); overflow-y: auto; border: none; } audio, video, embed, object { width: 100%; } [type="range"], meter, progress { display: block; width: 100%; height: 2.25rem; } [type="color"] { height: 2.25rem; vertical-align: top; } td, th, details, button, [type="button"], [type="reset"], [type="submit"] { padding: 0.5rem; } input:not([type]), [type="email"], [type="hidden"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="url"] { display: block; width: 100%; height: 2.25rem; padding: 0.5rem; } [type="file"] { display: block; width: 100%; height: 2.25rem; /* Works in Chrome (but poorly), doesn't work in Firefox */ padding-top: 0.35rem; } [type="date"], [type="datetime-local"], [type="time"], [type="month"], [type="week"] { display: block; width: 100%; height: 2.25rem; /* 0.4rem is a hack for mobile Chrome */ padding: 0.4rem 0.5rem; } output { display: block; width: 100%; } textarea { display: block; width: 100%; min-height: 8em; padding: 0.5rem; } select { display: block; width: 100%; min-height: 2.25rem; /* "padding: 0.5rem;" messes up the height of selects */ padding: 0.45rem 0.5rem; } summary { padding: 0.5rem; margin: -0.5rem; } [type="image"] { vertical-align: bottom; } fieldset { padding: 0.75rem; } label > [type="color"] { margin-left: 0.25rem; } label { display: flex; flex-wrap: wrap; align-items: center; width: 100%; margin-top: 1rem; } legend + label { margin-top: 0; } [type="checkbox"] + label, [type="radio"] + label { display: inline-flex; width: unset; vertical-align: text-bottom; } /* stylelint-disable-next-line plugin/stylelint-group-selectors */ blockquote > p:first-child, fieldset > label:first-child { margin-top: 0; } label > [type="checkbox"], label > [type="radio"] { min-height: 1rem; margin-right: 0.25rem; } blockquote { padding: 1rem 2rem; margin-right: 0; margin-left: 0; } blockquote > p:last-child { margin-bottom: 0; } footer { margin-top: 1rem; } figure > figcaption { text-align: center; } body > footer { padding-bottom: 1rem; } figure { margin-right: 0; margin-left: 0; text-align: center; } /* stylelint-disable-next-line selector-max-universal */ figure > * { text-align: initial; } dt { font-weight: bold; } dd { margin-bottom: 1rem; } li { margin-top: 0.5rem; margin-bottom: 0.5rem; } picture { display: block; text-align: center; } abbr { cursor: help; } button, summary, [type="button"], [type="reset"], [type="submit"], [type="color"], [type="file"], [type="range"], label > [type="checkbox"]:enabled, label > [type="radio"]:enabled { cursor: pointer; } [readonly] { cursor: default; } /* stylelint-disable-next-line selector-max-specificity */ :disabled, [type="checkbox"][id]:disabled + [for], [type="radio"][id]:disabled + [for] { cursor: not-allowed; } :root { --max-body-width: 48rem; } html { height: 100%; line-height: 1.4; } h1, h2, h3 { line-height: 1.15; } body { display: flex; flex-direction: column; width: calc(100% - 1rem); max-width: var(--max-body-width); min-height: 100%; margin: 0 auto; overflow-wrap: break-word; } main { flex-grow: 1; } img { max-width: 100%; max-height: 100vh; } table { display: block; overflow-x: auto; } pre { padding: 1rem; /* Prism hack */ /* stylelint-disable declaration-no-important */ margin-top: 1rem !important; margin-bottom: 1rem !important; /* stylelint-enable */ overflow-x: auto; line-height: 1.15; } code { padding: 0.25rem; } pre code { padding: unset; } kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; max-width: calc(100% - 0.1rem * 2); min-height: 1.5rem; padding: 0 0.25rem; margin: 0 0.1rem; overflow: hidden; } kbd kbd { min-width: unset; min-height: unset; padding: 0; margin: 0; } kbd kbd:not(:first-child) { padding-left: 0.25rem; } kbd kbd:not(:last-child) { padding-right: 0.25rem; } iframe { width: 100%; border: none; } dialog { max-height: calc(100% - 1rem); overflow-y: auto; border: none; } audio, video, embed, object { width: 100%; } [type="range"], meter, progress { display: block; width: 100%; height: 2.25rem; } [type="color"] { height: 2.25rem; vertical-align: top; } td, th, details, button, [type="button"], [type="reset"], [type="submit"] { padding: 0.5rem; } input:not([type]), [type="email"], [type="hidden"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="url"] { display: block; width: 100%; height: 2.25rem; padding: 0.5rem; } [type="file"] { display: block; width: 100%; height: 2.25rem; /* Works in Chrome (but poorly), doesn't work in Firefox */ padding-top: 0.35rem; } [type="date"], [type="datetime-local"], [type="time"], [type="month"], [type="week"] { display: block; width: 100%; height: 2.25rem; /* 0.4rem is a hack for mobile Chrome */ padding: 0.4rem 0.5rem; } output { display: block; width: 100%; } textarea { display: block; width: 100%; min-height: 8em; padding: 0.5rem; } select { display: block; width: 100%; min-height: 2.25rem; /* "padding: 0.5rem;" messes up the height of selects */ padding: 0.45rem 0.5rem; } summary { padding: 0.5rem; margin: -0.5rem; } [type="image"] { vertical-align: bottom; } fieldset { padding: 0.75rem; } label > [type="color"] { margin-left: 0.25rem; } label { display: flex; flex-wrap: wrap; align-items: center; width: 100%; margin-top: 1rem; } legend + label { margin-top: 0; } [type="checkbox"] + label, [type="radio"] + label { display: inline-flex; width: unset; vertical-align: text-bottom; } /* stylelint-disable-next-line plugin/stylelint-group-selectors */ blockquote > p:first-child, fieldset > label:first-child { margin-top: 0; } label > [type="checkbox"], label > [type="radio"] { min-height: 1rem; margin-right: 0.25rem; } blockquote { padding: 1rem 2rem; margin-right: 0; margin-left: 0; } blockquote > p:last-child { margin-bottom: 0; } footer { margin-top: 1rem; } figure > figcaption, body > header { text-align: center; } body > footer { padding-bottom: 1rem; text-align: center; } figure { margin-right: 0; margin-left: 0; text-align: center; } /* stylelint-disable-next-line selector-max-universal */ figure > * { text-align: initial; } dt { font-weight: bold; } dd { margin-bottom: 1rem; } li { margin-top: 0.5rem; margin-bottom: 0.5rem; } picture { position: relative; left: calc(-50vw + 50%); display: block; width: 100vw; text-align: center; } /* highlight.js hack */ /* stylelint-disable-next-line selector-max-class */ .hljs { /* stylelint-disable-next-line declaration-no-important */ padding: 1rem !important; margin: -1rem; } @media (max-width: 50rem) { table { width: calc(100% + 1rem); margin-left: -0.5rem; } video { width: calc(100% + 1rem); max-height: 100vh; margin-left: -0.5rem; } pre { width: calc(100% + 1rem); /* !important is Prism hack */ /* stylelint-disable declaration-no-important */ padding-right: 0.5rem !important; padding-left: 0.5rem !important; margin-left: -0.5rem !important; /* stylelint-enable */ } /* highlight.js hack */ /* stylelint-disable-next-line selector-max-class */ .hljs { /* stylelint-disable declaration-no-important */ padding-right: 0.5rem !important; padding-left: 0.5rem !important; /* stylelint-enable */ margin: -1rem -0.5rem; } } @media (hover: hover) { body { overflow-x: hidden; } nav { display: flex; background-color: var(--background-color); border-bottom: var(--border-width) solid var(--border-color); } body > nav { position: relative; left: calc(-50vw + 50%); width: 100vw; } nav ul { padding-left: 0; } body > nav > ul { width: calc(var(--max-body-width) + 2rem); padding-right: 0.5rem; padding-left: 0.5rem; margin: 0.5rem auto; } nav ul li { position: relative; display: inline-block; } nav > ul > li { padding: 0.5rem; margin: 0; } nav ul li a { text-decoration: none; white-space: nowrap; } nav ul li ul { position: absolute; left: -9999px; z-index: 1; min-width: calc(100% + var(--border-width) * 2); padding: 0.25rem 0.5rem; margin-top: 0.5rem; margin-left: calc(-0.5rem - var(--border-width)); background-color: var(--background-color); border: var(--border-width) solid var(--border-color); border-radius: var(--border-radius); } nav ul li ul li { width: 100%; } /* stylelint-disable-next-line selector-max-compound-selectors, selector-max-type */ nav ul li ul li ul { min-width: calc(100% + 1rem + var(--border-width) * 2); margin-top: 0.75rem; } nav :focus ~ ul, nav :focus ~ ul ul, nav ul ul:focus-within, nav ul li:hover ul { left: initial; } /* stylelint-disable-next-line selector-max-universal */ nav li > *:not(ul):not(a):not(:only-child) { cursor: default; } /* stylelint-disable-next-line selector-max-universal */ nav li > *:not(ul):not(:only-child)::after { content: " ▾"; } } @media not all and (hover: hover) { nav { position: relative; left: calc(-50vw + 50%); width: 100vw; padding-top: 2rem; background-image: url('data:image/svg+xml;utf8,'); background-repeat: no-repeat; background-position: top; border-bottom: var(--border-width) solid var(--border-color); } /* stylelint-disable-next-line selector-max-universal */ nav > * { display: none; } nav:hover > ul { display: inherit; } /* stylelint-disable-next-line selector-max-universal */ nav:hover > *:not(ul) { display: unset; } @media (prefers-color-scheme: dark) { nav { background-image: url('data:image/svg+xml;utf8,'); } } } :root { color-scheme: light dark; --border-color: #dbdbdb; --border-hover-color: #b5b5b5; --background-color: #fff; --highlighted-background-color: #f5f5f5; --text-color: #363636; --danger-color: #f14668; --danger-text-color: #fff; --danger-hover-color: #f03a5f; --success-color: #48c774; --success-text-color: #fff; --success-hover-color: #3ec46d; --danger-text-background-color: #fde0e6; --success-text-background-color: #effaf3; --border-radius: 0.25rem; --border-width: 1px; --code-text-color: #f14668; --code-background-color: #f5f5f5; --link-color: #3273dc; --link-visited-color: #b86bff; --link-hover-color: #363636; --link-active-color: #363636; } @media (prefers-color-scheme: dark) { :root { --border-color: #5f6267; --border-hover-color: #bcbebd; --background-color: #202124; --highlighted-background-color: #292b2e; --text-color: #fff; --danger-color: #770018; --danger-text-color: #fff; --danger-hover-color: #6b0015; --success-color: #006624; --success-text-color: #fff; --success-hover-color: #006122; --danger-text-background-color: #770018; --success-text-background-color: #006624; --code-text-color: #f1a0b0; --code-background-color: #292b2e; --link-color: #90b3ed; --link-visited-color: #cb93ff; --link-hover-color: #fff; --link-active-color: #fff; } input::-webkit-calendar-picker-indicator { filter: invert(); } } input { border-radius: var(--border-radius); } body { color: var(--text-color); background-color: var(--background-color); } pre { background-color: var(--code-background-color); /* Prism Dracula theme hack */ /* stylelint-disable-next-line declaration-no-important */ border-radius: 0 !important; } code { color: var(--code-text-color); background-color: var(--code-background-color); } pre code { background-color: inherit; } a, a code { color: var(--link-color); text-decoration: none; } a:visited, a:visited code { color: var(--link-visited-color); } a:hover, a:hover code { color: var(--link-hover-color); } a:active, a:active code { color: var(--link-active-color); } button, dialog, textarea, select { color: var(--text-color); background-color: var(--background-color); border: var(--border-width) solid var(--border-color); border-radius: var(--border-radius); } fieldset, details { border: var(--border-width) solid var(--border-color); border-radius: var(--border-radius); } summary { margin: calc(-0.5rem - var(--border-width)); border: var(--border-width) solid transparent; border-radius: var(--border-radius); } input:not([type]), [type="date"], [type="datetime-local"], [type="email"], [type="hidden"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], [type="button"], [type="color"] { color: var(--text-color); background-color: var(--background-color); border: var(--border-width) solid var(--border-color); } [type="reset"] { color: var(--danger-text-color); background-color: var(--danger-color); border: var(--border-width) solid transparent; } [type="submit"], button:not([type]) { color: var(--success-text-color); background-color: var(--success-color); border: var(--border-width) solid transparent; } input:not([type]):disabled, [type="date"]:disabled, [type="datetime-local"]:disabled, [type="email"]:disabled, [type="hidden"]:disabled, [type="month"]:disabled, [type="number"]:disabled, [type="password"]:disabled, [type="search"]:disabled, [type="tel"]:disabled, [type="text"]:disabled, [type="time"]:disabled, [type="url"]:disabled, [type="week"]:disabled, textarea:disabled, select:disabled { background-color: var(--highlighted-background-color); } select:enabled, [type="date"]:enabled, [type="datetime-local"]:enabled, [type="time"]:enabled, [type="month"]:enabled, [type="week"]:enabled { background-color: var(--background-color); } button:focus, [type="button"]:focus, [type="color"]:focus, [type="reset"]:focus, [type="submit"]:focus, button:not([type]):focus, input:not([type]):focus, [type="date"]:focus, [type="datetime-local"]:focus, [type="email"]:focus, [type="hidden"]:focus, [type="image"]:focus, [type="month"]:focus, [type="number"]:focus, [type="password"]:focus, [type="search"]:focus, [type="tel"]:focus, [type="text"]:focus, [type="time"]:focus, [type="url"]:focus, [type="week"]:focus, textarea:focus, select:focus, summary:focus { border-color: var(--border-hover-color); outline: none; box-shadow: 0 0 0.2rem 0.01rem var(--border-hover-color); } [type="image"]:enabled:hover { filter: brightness(95%); } /* stylelint-disable-next-line selector-max-specificity */ button:enabled:hover, [type="button"]:enabled:hover, [type="color"]:enabled:hover, input:not([type]):enabled:hover, [type="date"]:enabled:hover, [type="datetime-local"]:enabled:hover, [type="email"]:enabled:hover, [type="hidden"]:enabled:hover, [type="month"]:enabled:hover, [type="number"]:enabled:hover, [type="password"]:enabled:hover, [type="range"]:enabled:hover, [type="search"]:enabled:hover, [type="tel"]:enabled:hover, [type="text"]:enabled:hover, [type="time"]:enabled:hover, [type="url"]:enabled:hover, [type="week"]:enabled:hover, textarea:enabled:hover, select:enabled:hover, summary:hover { border-color: var(--border-hover-color); } [type="reset"]:enabled:hover { background-color: var(--danger-hover-color); border-color: transparent; } /* stylelint-disable-next-line selector-max-specificity */ [type="submit"]:enabled:hover, button:not([type]):enabled:hover { background-color: var(--success-hover-color); border-color: transparent; } table { border-collapse: collapse; } caption { font-weight: bold; } thead { border-bottom: calc(var(--border-width) * 2) solid var(--border-color); } tfoot { border-top: calc(var(--border-width) * 2) solid var(--border-color); } thead > tr:not(:first-child), tbody > tr:not(:first-child), tfoot > tr:not(:first-child) { border-top: var(--border-width) solid var(--border-color); } /* stylelint-disable-next-line plugin/stylelint-group-selectors */ thead > tr:nth-child(even), tbody > tr:nth-child(even), tfoot > tr:nth-child(even) { background-color: var(--highlighted-background-color); } kbd { background-color: var(--highlighted-background-color); border: var(--border-width) solid var(--border-hover-color); border-radius: var(--border-radius); box-shadow: inset 0 0 0 0.2rem var(--background-color); } kbd kbd { border: unset; border-radius: 0; box-shadow: inset 0 -0.2rem 0 0 var(--background-color), inset 0 0.2rem 0 0 var(--background-color); } [open] summary { margin-bottom: 0.5rem; } del { background-color: var(--danger-text-background-color); } ins { text-decoration: none; background-color: var(--success-text-background-color); } blockquote { background-color: var(--highlighted-background-color); border-left: 0.5rem solid var(--border-color); } body > footer { padding-top: 1rem; border-top: var(--border-width) solid var(--border-color); } hr { border-color: var(--border-color); border-style: solid; border-width: var(--border-width) 0 0; } /* stylelint-disable-next-line selector-max-specificity */ :disabled, [type="checkbox"][id]:disabled + [for], [type="radio"][id]:disabled + [for] { opacity: 0.5; } :invalid:not(form) { border-color: var(--danger-color); border-style: solid; border-width: var(--border-width); } :disabled :disabled { opacity: unset; } :invalid:not([type="checkbox"]):focus { border-color: var(--danger-hover-color); outline: none; box-shadow: 0 0 0.2rem 0.05rem var(--danger-hover-color); } /* Firefox hack */ :invalid:not([type="checkbox"]):not(:focus) { box-shadow: none; } /* stylelint-disable-next-line selector-max-pseudo-class, selector-max-specificity */ :invalid:not(form):enabled:hover { border-color: var(--danger-hover-color); }