*, *::before, *::after { box-sizing: border-box; } html { font-family: sans-serif; line-height: 1.15; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -ms-overflow-style: scrollbar; -webkit-tap-highlight-color: transparent; } @-ms-viewport { width: device-width; } article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; } body { max-width: 1200px; margin: 0 auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 1rem; font-weight: 400; line-height: 1.4; color: #ddd; text-align: left; background-color: #1b1b1b; -webkit-font-smoothing: antialiased; } hr { margin: 20px 0; border: 0; border-top: 1px solid #444; } h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 0.5rem; } 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, dl { padding-left: 25px; margin-top: 0; margin-bottom: 1rem; } @media screen and (min-width: 480px) { ol, ul, dl { padding-left: 2.5rem; } } ol ol, ul ul, ol ul, ul ol { margin-bottom: 0; } dt { font-weight: 700; } dd { margin-bottom: .5rem; margin-left: 0; } blockquote { padding-left: 15px; margin: 0 0 1rem; border-left: 5px solid #f8ae00; } blockquote footer { text-align: right; } dfn { font-style: italic; } b, strong { font-weight: bolder; } small { font-size: 80%; } sub, sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; } sub { bottom: -.25em; } sup { top: -.5em; } a { color: #f8ae00; text-decoration: none; background-color: transparent; -webkit-text-decoration-skip: objects; } a:hover { color: #fff; text-decoration: underline; } pre, code, kbd, samp { font-family: monospace; font-size: 1em; } pre { padding: 1.25rem; margin-top: 0; margin-bottom: 1rem; overflow: auto; -ms-overflow-style: scrollbar; background-color: #151515; } kbd { padding: 2px 3px; color: #000; background: #999; } figure { margin: 0 0 1rem; } img { max-width: 100%; vertical-align: middle; border-style: none; } svg:not(:root) { overflow: hidden; } table { width: 100%; margin-bottom: 20px; border-spacing: 0; border-collapse: collapse; border-top: 1px solid #ddd; border-left: 1px solid #ddd; } td, th { padding: 5px 10px; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; } caption { padding-top: 0.75rem; padding-bottom: 0.75rem; color: #6c757d; text-align: left; caption-side: bottom; } th { font-weight: 700; text-align: inherit; } 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; } button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { padding: 0; border-style: none; } input[type="radio"], input[type="checkbox"] { box-sizing: border-box; padding: 0; } input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] { -webkit-appearance: listbox; } textarea { overflow: auto; resize: vertical; } fieldset { min-width: 0; padding: 0; margin: 0; border: 0; } legend { display: block; width: 100%; max-width: 100%; padding: 0; margin-bottom: .5rem; font-size: 1.5rem; line-height: inherit; color: inherit; white-space: normal; } [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } [type="search"] { outline-offset: -2px; -webkit-appearance: none; } [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { font: inherit; -webkit-appearance: button; } output { display: inline-block; } summary { display: list-item; cursor: pointer; } mark { background-color: #f8ae00; } .mt { margin-top: 1rem; } .mb { margin-bottom: 1rem; } .mla { margin-left: auto; } .tal { text-align: left; } .tar { text-align: right; } /* Header */ .header { margin: 0 0 5px; overflow: auto; background-color: #2a2a2a; border-color: #333; border-style: solid; border-width: 0 0 1px; } .block { padding: 14px; margin: 3px 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 5px 5px; border-width: 0 1px 1px; } .block { margin: 5px; border-width: 1px; } } .logo { display: inline-block; float: left; padding: 10px 12px; font-size: 16px; font-weight: 700; } .logo:hover { color: #f8ae00; text-decoration: none; } /* Cards UI*/ .cards { display: flex; flex-wrap: wrap; } .card { display: flex; width: 100%; padding: 3px 0; } @media screen and (min-width: 480px) { .card { padding: 5px; } } @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%; } } .card__box { display: flex; flex-direction: column; width: 100%; margin: 0; } /* Taxonomies */ .page__title { margin-bottom: 0; } .page__content { margin-top: 1rem; } /* Post */ .post__meta { font-size: 14px; color: #888; } .post__meta-published, .post__meta-lastmod { display: block; } .post__tags { margin-top: 2rem; } .post__tag { display: inline-block; padding: 0 6px 3px; margin: 0 5px 5px 0; line-height: 1.5; background: #151515; } /* Pagination */ .pagination { margin-bottom: 10px; text-align: center; background-color: #2a2a2a; } .pagination__item { display: inline-block; padding: 4px 10px; font-weight: 700; border: 1px solid; } .pagination__item--gap { color: #888; cursor: default; border-color: #888; } /* Footer */ .footer { padding: 10px 0; margin: 5px 0 0; font-size: 13px; color: #888; border-top: 2px solid #333; } .footer__copyright { text-align: center; } @media screen and (min-width: 480px) { .footer { margin: 5px 5px 0; } }