/* CSS Reset (based on Bootstrap Reboot v4.3.1 | MIT) */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 1rem; font-weight: 400; line-height: 1.4; color: #ddd; background-color: #1b1b1b; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } [tabindex="-1"]:focus:not(:focus-visible) { outline: 0 !important; } hr { margin: 1.25rem 0; color: inherit; background-color: currentColor; border: 0; border-top: 1px solid #444; } h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 0.5rem; font-weight: 600; } h1 { font-size: 2rem; } h2 { font-size: 1.75rem; } h3 { font-size: 1.5rem; } h4 { font-size: 1.375rem; } h5 { font-size: 1.25rem; } h6 { font-size: 1.125rem; } p { margin-top: 0; margin-bottom: 1rem; } abbr[title] { text-decoration: none; cursor: help; border-bottom: 1px dotted #c3c3c3; } address { margin-bottom: 1rem; font-style: normal; line-height: inherit; } ol, ul { padding-left: 2rem; } ol, ul, dl { margin-top: 0; margin-bottom: 1rem; } ol ol, ul ul, ol ul, ul ol { margin-bottom: 0; } dt { font-weight: 700; } dd { margin-bottom: .5rem; margin-left: 0; } blockquote { margin: 0 0 1rem 1rem; } b, strong { font-weight: bolder; } small { font-size: 0.875em; } sub, sup { position: relative; font-size: 0.75em; line-height: 0; vertical-align: baseline; } sub { bottom: -.25em; } sup { top: -.5em; } a { color: #f8ae00; text-decoration: none; } a:hover { color: #fff; text-decoration: underline; } a:not([href]), a:not([href]):hover { color: inherit; text-decoration: none; } pre, code, kbd, samp { font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 1em; } pre { display: block; margin-top: 0; margin-bottom: 1rem; overflow: auto; } pre code { font-size: inherit; color: inherit; word-break: normal; } code { color: #e44; word-wrap: break-word; } a > code { color: inherit; } kbd { padding: 0.125rem 0.1875rem; color: #111; background-color: #888; } kbd kbd { padding: 0; font-size: 1em; } figure { margin: 0 0 1rem; } img { vertical-align: middle; } svg { overflow: hidden; vertical-align: middle; } table { border-collapse: collapse; } caption { padding-top: 0.75rem; padding-bottom: 0.75rem; color: #6c757d; text-align: left; caption-side: bottom; } label { display: inline-block; margin-bottom: 0.5rem; } button { border-radius: 0; } button:focus { outline: 1px dotted; outline: 5px auto -webkit-focus-ring-color; } input, button, select, optgroup, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; } button, input { overflow: visible; } button, select { text-transform: none; } select { word-wrap: normal; } [list]::-webkit-calendar-picker-indicator { display: none; } button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } button:not(:disabled), [type="button"]:not(:disabled), [type="reset"]:not(:disabled), [type="submit"]:not(:disabled) { cursor: pointer; } ::-moz-focus-inner { padding: 0; border-style: none; } input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] { -webkit-appearance: textfield; } textarea { overflow: auto; resize: vertical; } fieldset { min-width: 0; padding: 0; margin: 0; border: 0; } legend { float: left; width: 100%; padding: 0; margin-bottom: 0.5rem; font-size: 1.5rem; line-height: inherit; color: inherit; white-space: normal; } mark { background-color: #f8ae00; } progress { vertical-align: baseline; } ::-webkit-datetime-edit { overflow: visible; line-height: 0; } [type="search"] { outline-offset: -2px; -webkit-appearance: textfield; } ::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-color-swatch-wrapper { padding: 0; } ::-webkit-file-upload-button { font: inherit; -webkit-appearance: button; } output { display: inline-block; } summary { display: list-item; cursor: pointer; } template { display: none; } main { display: block; } [hidden] { display: none !important; } body { max-width: 1200px; margin: 0 auto; text-align: left; word-wrap: break-word; overflow-wrap: break-word; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } @media screen and (min-width: 480px) { ol, ul, dl { padding-left: 2.5rem; } } blockquote { padding: 0 1rem; border-left: 5px solid #f8ae00; } blockquote footer { text-align: right; } pre { padding: 1.25rem; background-color: #111; } code { padding: 1px 3px; background-color: #111; border-radius: 2px; } pre code { padding: 0; background-color: inherit; border-radius: 0; } kbd { font-weight: 700; } figure { display: inline-block; } figcaption { padding: .5rem; background-color: #111; } img { max-width: 100%; } table { width: 100%; margin-bottom: 1rem; border-spacing: 0; border-top: 1px solid #ddd; border-left: 1px solid #ddd; } td, th { padding: .3125rem .625rem; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; } th { font-weight: 700; } .mt { margin-top: 1rem; } .mb { margin-bottom: 1rem; } .mla { margin-left: auto; } .tal { text-align: left; } .tar { text-align: right; } .btn { background-color: #111; border-radius: 3px; } .btn:hover { color: #fff; background-color: #000; } /* Header */ .header { margin: 0 0 .3125rem; overflow: auto; background-color: #2a2a2a; border-color: #333; border-style: solid; border-width: 0 0 1px; } .block { padding: .875rem; margin: .1875rem 0; color: #eee; background-color: #2a2a2a; border-color: #333; border-style: solid; border-width: 1px 0; } @media screen and (min-width: 480px) { .header { margin: 0 .3125rem .3125rem; border-width: 0 1px 1px; } .block { margin: .625rem .3125rem; border-width: 1px; } } .logo { display: inline-block; padding: .625rem .875rem; font-size: 16px; font-weight: 700; } .logo:hover { color: #f8ae00; text-decoration: none; } .js .logo { float: left; } /* Menu */ .main-menu { display: block; font-size: 0; font-weight: 700; } .no-js .main-nav__btn { display: none; } .main-nav__btn { display: block; float: right; padding: 0; font-size: 1em; cursor: pointer; background-color: #2a2a2a; border: 0; border-left: 1px solid #333; outline: 0; fill: #f8ae00; } .main-nav__btn:focus, .main-nav__btn:hover { color: #000; } .main-nav__btn-box { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; } :focus > .main-nav__btn-box { box-shadow: inset 0 0 1px 3px #4285f4; } button:not(:-moz-focusring):focus > .main-nav__btn-box { box-shadow: none; } .main-nav__btn:focus, .main-nav__btn-box:focus { outline: none; } .main-nav__btn .icon-menu__burger { display: inline; } .main-nav__btn .icon-menu__x { display: none; } .main-nav__btn--active .icon-menu__burger { display: none; } .main-nav__btn--active .icon-menu__x { display: inline; } .main-nav__list { font-size: 0; } .main-nav__item { font-size: 1rem; font-weight: 700; border-top: 1px solid #333; } .main-nav__item:hover { background-color: #444; } .main-nav__item--active { padding: .625rem .875rem .625rem .625rem; border-left: 4px solid #888; } .main-nav__item--active:hover { background-color: transparent; } .main-nav__link { display: block; padding: .625rem .875rem .625rem .625rem; border-left: 4px solid transparent; } .main-nav__link:hover { text-decoration: none; border-color: #666; } .main-nav__list { padding: 0; margin: 0; list-style: none; } .js .main-nav__list { display: none; } .js .main-nav__btn { display: block; } .main-nav__list.main-nav__list--active { display: block; width: 100%; clear: both; background-color: #2a2a2a; } @media (min-width: 920px) { .header { display: flex; } .logo { display: inline-block; } .js .main-nav__list { display: block; } .js .main-nav__btn { display: none; } .main-nav__btn { display: none; } .main-nav { display: flex; } .main-nav__item { display: inline-block; border: 0; } .main-nav__item--active { padding: .625rem .625rem .5rem; border-bottom: 2px solid #888; } .main-nav__link { padding: .625rem .625rem .5rem; border-bottom: 2px solid transparent; border-left: 0; } .main-nav--right { margin-left: auto; } .main-nav__list.main-nav__list--active { position: initial; border: 0; } } /* Taxonomies */ .page { margin-bottom: .3125rem; } .page__title { margin-bottom: 0; } .page__content { margin-top: 1rem; } .page__content--notitle { margin: 0; } .page__content p:last-child { margin-bottom: 0; } /* Cards UI */ .cards { display: flex; flex-wrap: wrap; } .card { display: flex; width: 100%; } .card:first-child { border-top: 1px solid #333; } .card__box { display: flex; flex-direction: column; width: 100%; margin: 0; border-width: 0 0 1px; } @media screen and (min-width: 480px) { .card { padding: .3125rem; } .card:first-child { border: 0; } .card__box { border-width: 1px; } } @media screen and (min-width: 720px) { .card--2col { width: 50%; } .card--3col { width: 50%; } } @media screen and (min-width: 860px) { .card--3col { width: 33.333%; } } /* Entry */ .title-excerpt { font-size: 1.25rem; } .entry__featured { width: 100%; min-height: 1px; /* Workaround for IE11 flexbox img height issue https://github.com/philipwalton/flexbugs/issues/75 */ text-align: center; background-color: #1f1f1f; } .featured__figcaption { width: 100%; padding: 1rem; text-align: left; background-color: #111; } .featured__credit::before { content: "© "; } .featured__credit { font-size: .875rem; font-style: normal; color: #888; } .entry__content { flex: 1 0 auto; margin: 0; overflow: auto; color: #c3c3c3; } .entry__content p:last-child { margin-bottom: 0; } .entry__meta { font-size: .875rem; color: #999; } .entry__meta-published, .entry__meta-lastmod { display: block; } .entry__tags { margin-top: 2rem; } .entry__tag { display: inline-block; padding: .25rem .5rem; margin: .25rem; line-height: 1.5; } .toc { padding: .5rem; margin-bottom: 1rem; color: #f8ae00; list-style: none; background-color: #111; } .toc[open] { color: #fff; } .toc__title { padding: .25rem; font-weight: 700; } .toc nav { padding: .5rem 0 .5rem .5rem; } .toc nav ul { padding-left: 25px; } .toc nav ul li { list-style: none; } .toc nav > ul { padding: 0; margin: 0; } .entry__footer { display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 1.5rem; } .entry__tags { display: flex; flex-basis: 100%; flex-wrap: wrap; margin: 0 -.25rem auto; } .entry__share { display: flex; flex-basis: 100%; flex-wrap: wrap; margin: 0 -.25rem auto; } @media screen and (min-width: 720px) { .entry__tags { flex: 1 0 65%; justify-content: flex-start; } .entry__share { flex: 1 0 35%; justify-content: flex-end; } } .share__link { margin: .25rem; font-size: 0; } .share__link:hover { margin: .25rem; text-decoration: none; } .share__icon { width: 32px; height: 32px; fill: #f8ae00; stroke: #f8ae00; } .share__icon:hover { fill: #fff; stroke: #fff; } .breadcrumb { padding: .875rem; margin: .1875rem 0 -.1875rem; color: #c3c3c3; border-width: 1px 0 0; } .breadcrumb--separated { margin: .1875rem 0 .3125rem; border-width: 1px 0; } @media screen and (min-width: 480px) { .breadcrumb { margin: .625rem .3125rem -.625rem; border-width: 1px 1px 0; } .breadcrumb--separated { margin: .625rem .3125rem .3125rem; border-width: 1px; } } .breadcrumb__list { display: flex; flex-wrap: wrap; padding: 0; margin: 0; list-style: none; } .breadcrumb__item { display: flex; } .breadcrumb__item::after { display: block; margin: 0 .3125rem; content: "›"; } .alignleft { float: left; margin: 1rem 1rem 1rem 0; } .alignright { float: right; margin: 1rem 0 1rem 1rem; } .center { text-align: center; } /* Authorbox */ .author { display: flex; align-items: flex-start; } .author__avatar { margin-right: .875rem; margin-bottom: 0; } .author__img { border-radius: 50%; } .author__body { flex: 1; } .author__name { margin-bottom: .625rem; font-weight: 700; } /* Comments */ .comments { margin-top: .625rem; margin-bottom: .625rem; } /* Related */ .related { margin-top: .625rem; } /* Pagination */ .pagination { margin: .3125rem 0; text-align: center; background-color: #2a2a2a; } @media screen and (min-width: 480px) { .pagination { margin: .3125rem .3125rem .625rem; } } .pagination__item { display: inline-block; padding: .25rem .625rem; font-weight: 700; border: 1px solid; } .pagination__item--gap { color: #888; cursor: default; border-color: #888; } /* 404 */ .page404__title { font-size: 2.25rem; font-weight: 700; } .page404__lead { margin-bottom: 2rem; font-size: 1.5rem; } .page404__link { font-size: 1.5rem; } /* Empty state */ .empty__icon { margin-bottom: 2rem; font-size: 3.5rem; } .empty__tip { padding: .5rem; margin: 4rem 0 0; background-color: #202020; } /* Footer */ .footer { padding: .625rem 0; margin: .3125rem 0 0; font-size: .8125rem; color: #888; text-align: center; border-top: 2px solid #333; } .footer__social { display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: .5rem; } .social__link { margin: .25rem; font-size: 0; background-color: #2a2a2a; border: 1px solid #333; fill: #999; stroke: #999; } .social__link:hover { fill: #c3c3c3; stroke: #c3c3c3; } .social__icon { width: 32px; height: 32px; } .footer__links { margin-bottom: .5rem; } @media screen and (min-width: 480px) { .footer { margin: .3125rem .3125rem 0; } } /* Print */ @media print { .entry__content a, .entry__meta a, .entry__tag { color: #000; text-decoration: underline; } .logo, .block, .entry__title, .entry__title-link, .meta-categories__link, .entry__meta, .entry__content { color: #000; } .main-nav, .comments, .entry__toc, .related, .footer__copyright-credits { display: none; } .header, .block { border: 0; } mark { background-color: #25a; } blockquote { border-color: #000; } }