@charset "UTF-8"; body.light-theme, :root { /* light theme color */ --background: #fff; --background-secondary: #eaeaea; --header: #fafafa; --color: #222; --color-secondary: #999; --border-color: #dcdcdc; /* variables for js, must be the same as these in @custom-media queries */ --phoneWidth: (max-width: 684px); --tabletWidth: (max-width: 900px); }body.dark-theme { /* dark theme colors */ --background: #292a2d; --background-secondary: #3b3d42; --header: #252627; --color: #a9a9b3; --color-secondary: #73747b; --border-color: #4a4b50; }@media (prefers-color-scheme: light) { body:not(.dark-theme) { /* light theme color */ --background: #fff; --background-secondary: #eaeaea; --header: #fafafa; --color: #222; --color-secondary: #999; --border-color: #dcdcdc; } }@media (prefers-color-scheme: dark) { body:not(.light-theme) { /* dark theme colors */ --background: #292a2d; --background-secondary: #3b3d42; --header: #252627; --color: #a9a9b3; --color-secondary: #73747b; --border-color: #4a4b50; } }/* MEDIA QUERIES */ /* HOW TO USE */ /*@media ($phone) {*/ /*margin-top: 0;*/ /*}*/ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-feature-settings: "liga", "tnum", "case", "calt", "zero", "ss01", "locl"; src: url("../fonts/Inter-Regular.woff2") format("woff2"); font-display: swap; }@font-face { font-family: 'Inter'; font-style: italic; font-weight: 400; font-feature-settings: "liga", "tnum", "case", "calt", "zero", "ss01", "locl"; src: url("../fonts/Inter-Italic.woff2") format("woff2"); font-display: swap; }@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-feature-settings: "liga", "tnum", "case", "calt", "zero", "ss01", "locl"; src: url("../fonts/Inter-Medium.woff2") format("woff2"); font-display: swap; }@font-face { font-family: 'Inter'; font-style: italic; font-weight: 600; font-feature-settings: "liga", "tnum", "case", "calt", "zero", "ss01", "locl"; src: url("../fonts/Inter-MediumItalic.woff2") format("woff2"); font-display: swap; }@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-feature-settings: "liga", "tnum", "case", "calt", "zero", "ss01", "locl"; src: url("../fonts/Inter-Bold.woff2") format("woff2"); font-display: swap; }@font-face { font-family: 'Inter'; font-style: italic; font-weight: 800; font-feature-settings: "liga", "tnum", "case", "calt", "zero", "ss01", "locl"; src: url("../fonts/Inter-BoldItalic.woff2") format("woff2"); font-display: swap; }.button-container { display: table; margin-left: auto; margin-right: auto; }button, .button, a.button { position: relative; display: flex; align-items: center; justify-content: center; padding: 8px 18px; margin-bottom: 5px; background: var(--background-secondary); text-decoration: none; text-align: center; font-weight: 500; border-radius: 8px; border: 1px solid transparent; appearance: none; cursor: pointer; outline: none; /* variants */ /* sizes */ } button.outline, .button.outline, a.button.outline { background: transparent; border-color: var(--background-secondary); box-shadow: none; padding: 8px 18px; } button.outline :hover, .button.outline :hover, a.button.outline :hover { transform: none; box-shadow: none; } button.primary, .button.primary, a.button.primary { box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); } button.primary:hover, .button.primary:hover, a.button.primary:hover { box-shadow: 0 2px 6px rgba(50, 50, 93, 0.21), 0 1px 3px rgba(0, 0, 0, 0.08); } button.link, .button.link, a.button.link { background: none; font-size: 1rem; } button.small, .button.small, a.button.small { font-size: .8rem; } button.wide, .button.wide, a.button.wide { min-width: 200px; padding: 14px 24px; }a.read-more, a.read-more:hover, a.read-more:active { display: inline-flex; background: none; box-shadow: none; padding: 0; margin: 20px 0; font-weight: bold; }.code-toolbar { margin-bottom: 20px; } .code-toolbar .toolbar-item a { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 3px 8px; margin-bottom: 5px; background: var(--background-secondary); text-decoration: none; text-align: center; font-size: 13px; font-weight: 500; border-radius: 8px; border: 1px solid transparent; appearance: none; cursor: pointer; outline: none; }.header { background: var(--header); display: flex; align-items: center; justify-content: center; position: relative; padding: 20px; } .header__right { display: flex; flex-direction: row; align-items: center; } @media (max-width: 684px) { .header__right { flex-direction: row-reverse; } } .header__inner { display: flex; align-items: center; justify-content: space-between; margin: 0 auto; width: 760px; max-width: 100%; }.theme-toggle { display: flex; align-items: center; justify-content: center; line-height: 1; cursor: pointer; }.theme-toggler { fill: currentColor; }.logo { display: flex; align-items: center; flex: 0 0 auto; text-decoration: none; font-weight: bold; } .logo img { height: 44px; } .logo__mark { display: inline-flex; align-items: center; margin-right: 5px; } .logo__mark .greater-icon { width: 0.95rem; height: 100%; } .logo__mark .greater-icon path { stroke: currentColor; stroke-width: 8px; } .logo__text { font-size: 1.125rem; } .logo__cursor { display: inline-block; width: 10px; height: 1rem; background: #fe5186; margin-left: 5px; border-radius: 1px; animation: cursor 1s infinite; }@keyframes cursor { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }.menu { --color: rgba(0, 0, 0, .12); --shadow: 0 8px 20px var(--color); border-right: 1px solid; margin-right: 18px; padding-right: 24px; font-weight: 500; } @media (max-width: 684px) { .menu { position: absolute; background: var(--header); box-shadow: var(--shadow); margin: 0; padding: 5px; list-style: none; border-radius: 5px; z-index: 99; border: none; top: 50px; right: 10px; } } .menu a { text-decoration: none; } .menu__inner { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; } @media (max-width: 684px) { .menu__inner--desktop { display: none; } } .menu__inner--mobile { display: none; } @media (max-width: 684px) { .menu__inner--mobile { display: block; } } .menu__inner li { text-align: left; flex: 0 0 auto; } .menu__inner li:not(:first-of-type) { margin-left: 20px; } @media (max-width: 684px) { .menu__inner { flex-direction: column; align-items: flex-start; padding: 0; } .menu__inner li { margin-left: 0 !important; padding: 10px; } } .menu__sub-inner { position: relative; list-style: none; padding: 0; margin: 0; } .menu__sub-inner:not(:only-child) { margin-left: 20px; } .menu__sub-inner-more { position: absolute; background: var(--header); box-shadow: var(--shadow); margin: 0; padding: 5px; list-style: none; border-radius: 5px; z-index: 99; top: 35px; left: 0; } .menu__sub-inner-more-trigger { display: inline-flex; align-items: center; user-select: none; cursor: pointer; } .menu__sub-inner-more-trigger-icon { display: inline-flex; align-items: center; margin-left: 3px; transform: rotate(90deg); line-height: 1; } .menu__sub-inner-more-trigger-icon .greater-icon { width: 0.95rem; height: 100%; } .menu__sub-inner-more-trigger-icon .greater-icon path { stroke: currentColor; stroke-width: 5px; } .menu__inner .menu__sub-inner-more li { margin-left: 0; white-space: nowrap; } .menu__inner .menu__sub-inner-more li:hover { background: rgba(0, 0, 0, 0.05); border-radius: 3px; cursor: pointer; } .menu__sub-inner-more li a { width: 100%; display: inline-block; padding: 10px; } .menu-trigger { width: 24px; height: 24px; fill: currentColor; margin-left: 10px; cursor: pointer; }html { box-sizing: border-box; }*, *:before, *:after { box-sizing: inherit; }body { margin: 0; padding: 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", Helvetica, Arial, sans-serif; font-size: 1rem; font-weight: 500; font-feature-settings: "liga", "tnum", "case", "calt", "zero", "ss01", "locl"; line-height: 1.54; background-color: var(--background); color: var(--color); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -webkit-overflow-scrolling: touch; -webkit-text-size-adjust: 100%; } @media (max-width: 684px) { body { font-size: 1rem; } } h1, h2, h3, h4, h5, h6 { line-height: 1.3; }h1 { font-size: 2.625rem; }h2 { font-size: 1.625rem; }h3 { font-size: 1.375rem; }h4 { font-size: 1.125rem; }@media (max-width: 684px) { h1 { font-size: 2rem; } h2 { font-size: 1.4rem; } h3 { font-size: 1.15rem; } h4 { font-size: 1.125rem; } }a { color: inherit; }img { display: block; max-width: 100%; } img.left { margin-right: auto; } img.center { margin-left: auto; margin-right: auto; } img.right { margin-left: auto; }figure { display: table; max-width: 100%; margin: 25px 0; } figure.left { margin-right: auto; } figure.center { margin-left: auto; margin-right: auto; } figure.right { margin-left: auto; } figure figcaption { font-size: .9rem; margin-top: 5px; opacity: .8; } figure figcaption.left { text-align: left; } figure figcaption.center { text-align: center; } figure figcaption.right { text-align: right; }code, kbd { font-family: Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace; background: var(--background-secondary); padding: 1px 6px; margin: 0 2px; border-radius: 5px; font-size: .9rem; font-weight: normal; font-feature-settings: normal; } code code, code kbd, kbd code, kbd kbd { background: transparent; padding: 0; margin: 0; }pre { font-feature-settings: normal; background: #212020; padding: 20px; border-radius: 8px; font-size: .9rem; overflow: auto; } @media (max-width: 684px) { pre { white-space: pre-wrap; word-wrap: break-word; } } pre code { font-feature-settings: normal; background: none !important; color: #ccc; margin: 0; padding: 0; font-size: inherit; }blockquote { border-left: 2px solid; margin: 40px; padding: 10px 20px; } @media (max-width: 684px) { blockquote { margin: 10px; padding: 10px; } } blockquote:before { content: '”'; font-family: Georgia, serif; font-size: 3.875rem; position: absolute; left: -40px; top: -20px; } blockquote p:first-of-type { margin-top: 0; } blockquote p:last-of-type { margin-bottom: 0; }/* Fix for gist integration */ table:not(.js-file-line-container) { table-layout: fixed; border-collapse: collapse; width: 100%; margin: 40px 0; border-radius: 5px; }/* Fix for gist integration */ table, th, td:not(.js-line-number) { border: 1px solid; padding: 10px; }th { background: var(--background-secondary); }ul, ol { margin-left: 40px; padding: 0; } @media (max-width: 684px) { ul, ol { margin-left: 20px; } } ol ol { list-style-type: lower-alpha; }.container { display: flex; flex-direction: column; justify-content: center; }.content { display: flex; flex-direction: column; flex: 1 auto; align-items: center; justify-content: center; margin: 5px 0; } @media (max-width: 684px) { .content { margin-top: 0; } } hr { width: 100%; border: none; background: var(--border-color); height: 1px; }.hidden { display: none; }.framed { padding: 50px; margin: 0 -50px 40px; border-radius: 10px; border: 1px solid var(--border-color); width: 100%; max-width: 860px; } @media (max-width: 900px) { .framed { width: auto; max-width: 680px; margin: 20px 20px 40px; padding: 30px; } } blockquote.twitter-tweet { background: rgba(44, 124, 186, 0.1); border: none; padding: 30px; color: inherit; font-size: inherit; line-height: inherit; border-radius: 8px; }.h-anchor { margin-left: 1px; color: var(--color-secondary); text-decoration: none; visibility: hidden; opacity: 0; transition: visibility 0s linear 0.1s, opacity 0.1s linear; }h1:hover a, h2:hover a, h3:hover a, h4:hover a { visibility: visible; opacity: 1; transition-delay: 0s; }.framed .h-anchor { visibility: hidden; }.post { width: 100%; max-width: 800px; text-align: left; padding: 20px; margin: 20px auto; } @media (max-width: 900px) { .post { max-width: 660px; } } .post:not(:last-of-type) { border-bottom: 1px solid var(--border-color); } .post-meta { font-size: 1rem; margin-bottom: 10px; } @media (max-width: 684px) { .post-meta { font-size: .85rem; } } .post-title { font-size: 2.625rem; margin: 0 0 20px; } @media (max-width: 684px) { .post-title { font-size: 2rem; } } .post-title a { text-decoration: none; } .post-tags { display: block; margin-bottom: 20px; font-size: 1rem; opacity: .5; } .post-tags a { text-decoration: none; } .post-content { margin-top: 30px; } .post-cover { margin: 40px -50px; width: 860px; max-width: 860px; } .post-cover img { margin: 0 auto; border-radius: 8px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15); } @media (max-width: 900px) { .post-cover { margin: 20px 0; width: 100%; } } .post--regulation h1 { justify-content: center; }.post--regulation h2 { justify-content: center; margin-bottom: 10px; } .post--regulation h2 + h2 { margin-top: -10px; margin-bottom: 20px; }.pagination { margin-top: 50px; } .pagination__title { display: flex; text-align: center; position: relative; margin: 100px 0 20px; } .pagination__title-h { text-align: center; margin: 0 auto; padding: 5px 10px; background: var(--background); color: var(--color-secondary); font-size: .8rem; text-transform: uppercase; text-decoration: none; letter-spacing: .1em; z-index: 1; } .pagination__title hr { position: absolute; left: 0; right: 0; width: 100%; margin-top: 15px; z-index: 0; } .pagination__buttons { display: flex; align-items: center; justify-content: center; } .pagination__buttons a { text-decoration: none; font-weight: bold; }.button { position: relative; display: inline-flex; align-items: center; justify-content: center; background: var(--background-secondary); font-size: 1rem; font-weight: 500; border-radius: 8px; max-width: 40%; padding: 0; cursor: pointer; appearance: none; } .button + .button { margin-left: 10px; } .button a { display: flex; padding: 8px 16px; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .button__text { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .button.next .button__icon { margin-left: 8px; } .button.previous .button__icon { margin-right: 8px; }.footer { padding: 40px 20px; flex-grow: 0; color: var(--color-secondary); } .footer__inner { display: flex; align-items: center; justify-content: space-between; margin: 0 auto; width: 760px; max-width: 100%; } @media (max-width: 900px) { .footer__inner { flex-direction: column; } } .footer a { color: inherit; } .footer .copyright { display: flex; flex-direction: row; align-items: center; font-size: 1rem; } .footer .copyright--user { margin: auto; text-align: center; } .footer .copyright > *:first-child:not(:only-child) { border-right: 1px solid; padding-right: 10px; margin-right: 10px; } @media (max-width: 900px) { .footer .copyright > *:first-child:not(:only-child) { border: none; padding: 0; margin: 0; } } @media (max-width: 900px) { .footer .copyright { flex-direction: column; margin-top: 10px; } } .terms { width: 100%; max-width: 800px; text-align: left; padding: 20px; margin: 0 auto; } .terms__list { padding: 0; padding-left: 20px; margin: 0; } .terms__list a { text-decoration: none; } .terms__term { margin-bottom: 15px; } .terms__term-count { background: var(--background-secondary); font-size: 12px; margin-left: 5px; padding: 2px 10px; border-radius: 5px; text-decoration: none; }.archive { width: 100%; max-width: 800px; text-align: left; padding: 20px; margin: 0 auto; } .archive__group-month { display: flex; align-items: flex-start; padding: 10px 0; } @media (max-width: 684px) { .archive__group-month { flex-direction: column; } } .archive__group-month:not(:last-of-type) { border-bottom: 1px solid var(--border-color); } .archive__group-year { margin-top: 40px; } @media (max-width: 684px) { .archive__group-year { margin-top: 20px; } } .archive__group-year:not(:last-of-type) { border-bottom: 1px solid var(--border-color); } .archive__group-year-header { margin: 10px 0; } .archive__group-month-header { margin: 25px 0; width: 200px; opacity: .5; } @media (max-width: 684px) { .archive__group-month-header { margin: 10px 0 0; } } .archive__group-posts { width: 100%; } .archive__post { padding: 20px 0; } .archive__post:not(:last-of-type) { border-bottom: 1px solid var(--border-color); } .archive__post-title { margin: 5px 0; } .archive__post-title a { display: block; text-decoration: none; }/* PrismJS 1.15.0 https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript+actionscript+apacheconf+applescript+c+csharp+bash+cpp+coffeescript+ruby+csp+css-extras+diff+django+docker+elixir+elm+markup-templating+erlang+fsharp+flow+git+go+graphql+less+handlebars+haskell+http+java+json+kotlin+latex+markdown+makefile+objectivec+ocaml+perl+php+php-extras+sql+processing+scss+python+jsx+typescript+reason+textile+rust+sass+stylus+scheme+pug+swift+yaml+haml+toml+twig+tsx+vim+visual-basic+wasm&plugins=line-numbers+toolbar+jsonp-highlight+command-line+copy-to-clipboard */ /** * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML * Based on https://github.com/chriskempson/tomorrow-theme * @author Rose Pritchard */ code[class*="language-"], pre[class*="language-"] { background: none; font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; word-wrap: normal; /* line-height: 1.5; */ -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; }/* Code blocks */ pre[class*="language-"] { padding: 1em; margin: .5em 0; overflow: auto; }:not(pre) > code[class*="language-"], pre[class*="language-"] { background: #212020 !important; color: inherit !important; border-radius: 8px; }/* Inline code */ :not(pre) > code[class*="language-"] { padding: .1em; border-radius: .3em; white-space: normal; }.token.comment, .token.block-comment, .token.prolog, .token.doctype, .token.cdata { color: rgba(255, 255, 255, 0.4); }.token.punctuation { color: #a9a9b3; }.token.tag, .token.attr-name, .token.namespace, .token.deleted { color: #e2777a; }.token.function-name { color: #6196cc; }.token.boolean, .token.number, .token.function { color: #f08d49; }.token.property, .token.class-name, .token.constant, .token.symbol { color: #f8c555; }.token.selector, .token.important, .token.atrule, .token.keyword, .token.builtin { color: #cc99cd; }.token.string, .token.char, .token.attr-value, .token.regex, .token.variable { color: #7ec699; }.token.operator, .token.entity, .token.url { color: #67cdcc; }.token.important, .token.bold { font-weight: bold; }.token.italic { font-style: italic; }.token.entity { cursor: help; }.token.inserted { color: green; }pre[class*="language-"].line-numbers { position: relative; padding-left: 3.8em; counter-reset: linenumber; }pre[class*="language-"].line-numbers > code { position: relative; white-space: inherit; }.line-numbers .line-numbers-rows { position: absolute; pointer-events: none; top: 0; font-size: 100%; left: -3.8em; width: 3em; /* works for line-numbers below 1000 lines */ letter-spacing: -1px; border-right: 1px solid #999; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }.line-numbers-rows > span { pointer-events: none; display: block; counter-increment: linenumber; }.line-numbers-rows > span:before { content: counter(linenumber); color: #999; display: block; padding-right: 0.8em; text-align: right; }div.code-toolbar { position: relative; }div.code-toolbar > .toolbar { position: absolute; top: .3em; right: .2em; transition: opacity 0.3s ease-in-out; opacity: 0; }div.code-toolbar:hover > .toolbar { opacity: 1; }div.code-toolbar > .toolbar .toolbar-item { display: inline-block; }div.code-toolbar > .toolbar a { cursor: pointer; }div.code-toolbar > .toolbar button { background: none; border: 0; color: inherit; font: inherit; line-height: normal; overflow: visible; padding: 0; -webkit-user-select: none; /* for button */ -moz-user-select: none; -ms-user-select: none; }div.code-toolbar > .toolbar a, div.code-toolbar > .toolbar button, div.code-toolbar > .toolbar span { color: #bbb; font-size: .8em; padding: 0 .5em; background: #f5f2f0; background: rgba(224, 224, 224, 0.2); box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); border-radius: .5em; }div.code-toolbar > .toolbar a:hover, div.code-toolbar > .toolbar a:focus, div.code-toolbar > .toolbar button:hover, div.code-toolbar > .toolbar button:focus, div.code-toolbar > .toolbar span:hover, div.code-toolbar > .toolbar span:focus { color: inherit; text-decoration: none; }.command-line-prompt { border-right: 1px solid #999; display: block; float: left; font-size: 100%; letter-spacing: -1px; margin-right: 1em; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }.command-line-prompt > span:before { color: #999; content: ' '; display: block; padding-right: 0.8em; }.command-line-prompt > span[data-user]:before { content: "[" attr(data-user) "@" attr(data-host) "] $"; }.command-line-prompt > span[data-user="root"]:before { content: "[" attr(data-user) "@" attr(data-host) "] #"; }.command-line-prompt > span[data-prompt]:before { content: attr(data-prompt); }.collapsable-code { position: relative; width: 100%; margin: 40px 0; } .collapsable-code input[type="checkbox"] { position: absolute; visibility: hidden; } .collapsable-code input[type="checkbox"]:checked ~ pre, .collapsable-code input[type="checkbox"]:checked ~ .code-toolbar pre { height: 0; padding: 0; border-top: none; } .collapsable-code input[type="checkbox"]:checked ~ .code-toolbar { padding: 0; border-top: none; } .collapsable-code input[type="checkbox"]:checked ~ .code-toolbar .toolbar { display: none; } .collapsable-code input[type="checkbox"]:checked ~ label { border-radius: 10px; } .collapsable-code input[type="checkbox"]:checked ~ label .collapsable-code__toggle:after { content: attr(data-label-expand); } .collapsable-code label { position: relative; display: flex; justify-content: space-between; background: var(--background-secondary); padding: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; min-width: 30px; min-height: 30px; margin: 0; cursor: pointer; } .collapsable-code__title { flex: 1; color: var(--color); padding: 3px 10px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .collapsable-code__language { background: var(--background); color: var(--color); border-radius: 10px; padding: 3px 10px; } .collapsable-code__toggle { color: var(--color); font-size: 16px; padding: 3px 10px; } .collapsable-code__toggle:after { content: attr(data-label-collapse); } .collapsable-code pre { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; } .collapsable-code pre::first-line { line-height: 0; } .collapsable-code code::first-line { line-height: 0; } .collapsable-code .code-toolbar { margin: 0; }