/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } @property --font-color { syntax: ""; inherits: true; initial-value: oklch(25.11% 0.006 258.36); } @property --background-color { syntax: ""; inherits: true; initial-value: #F6F0F0; } @property --code-background-color { syntax: ""; inherits: true; initial-value: #c7c1c1; } @property --hover-color { syntax: ""; inherits: true; initial-value: #A4B465; } @property --url-color { syntax: ""; inherits: true; initial-value: #626F47; } @media (prefers-color-scheme: dark) { :root { --font-color: oklch(91.87% 0.003 264.54); --background-color: #29261f; --hover-color: #626F47; --url-color: #A4B465; --code-background-color: #3d392e; } } body { font-family: "Open Sans", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-variation-settings: "wdth" 100; display: flex; justify-content: center; background-color: var(--background-color); color: var(--font-color); } a { color: var(--url-color); text-decoration: none; transition: all 0.25s ease-in-out; } a:hover { color: var(--hover-color); transition: all 0.25s ease-in-out; } a:visited { color: #C14600; transition: all 0.25s ease-in-out; } a:visited:hover { color: var(--hover-color); transition: all 0.25s ease-in-out; } @supports (font-size-adjust: 1) { .content { font-size-adjust: 0.5; } } ul { list-style: square; } li { line-height: 160%; margin-bottom: 0.5rem; } .content { line-height: calc(1ex / 0.32); text-rendering: optimizeLegibility; max-width: 80ch; padding-left: 1rem; } .content h1 { font-size: 2.5em; line-height: calc(1ex / 0.42); margin: calc(1ex / 0.42) 0; } .content h2 { font-size: 2em; line-height: calc(1ex / 0.42); margin: calc(1ex / 0.42) 0; } .content h3 { font-size: 1.75em; line-height: calc(1ex / 0.38); margin: calc(1ex / 0.38) 0; } .content h4 { font-size: 1.5em; line-height: calc(1ex / 0.37); margin: calc(1ex / 0.37) 0; } .content p { font-size: 1em; line-height: calc(1ex / 0.32); margin: calc(1ex / 0.32) 0; text-align: justify; hyphens: auto; } .sidebar { padding-top: 4rem; line-height: calc(1ex / 0.32); text-rendering: optimizeLegibility; } .holder { display: flex; flex-direction: row; margin: auto; }