* { box-sizing: border-box; } body { font-family: 'Georgia', 'Times New Roman', serif; font-size: 18px; line-height: 1.6; letter-spacing: 0.02em; word-spacing: 0.1em; color: #e2e8f0; background-color: #1a202c; text-shadow: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; margin: 0; padding: 2rem; max-width: 80ch; margin: 0 auto; } .reading-container, main, article, .content { max-width: 65ch; margin: 0 auto; padding: 3rem 2rem; background-color: #2d3748; border-radius: 12px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2); border: 1px solid #4a5568; } p { margin-bottom: 1.5em; margin-top: 0; orphans: 3; widows: 3; text-align: center; hyphens: none; -webkit-hyphens: none; -moz-hyphens: none; } h1, h2, h3, h4, h5, h6 { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif; font-weight: 700; line-height: 1.2; margin-top: 2em; margin-bottom: 0.5em; letter-spacing: -0.02em; text-align: center; color: #f7fafc; } h1 { font-size: 2.25em; margin-top: 0; } h2 { font-size: 1.75em; } h3 { font-size: 1.5em; } h4 { font-size: 1.25em; } ul, ol { margin: 1.5em 0; padding-left: 2em; text-align: left; max-width: max-content; margin-left: auto; margin-right: auto; } li { margin-bottom: 0.5em; line-height: 1.5; } a { color: #63b3ed; text-decoration: underline; transition: color 0.1s ease; } a:hover { color: #90cdf4; } a:visited { color: #b794f6; } code, pre { font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace; font-size: 0.9em; background-color: #4a5568; padding: 0.2em 0.4em; border-radius: 4px; border: 1px solid #718096; color: #e2e8f0; } pre { padding: 1.5em; overflow-x: auto; line-height: 1.4; text-align: left; border-radius: 8px; } table { border-collapse: collapse; width: 100%; margin: 1.5em auto; border-radius: 8px; overflow: hidden; border: 1px solid #4a5568; } th, td { border: 1px solid #4a5568; padding: 0.75em; text-align: center; } th { background-color: #4a5568; font-weight: 600; color: #f7fafc; } blockquote { margin: 1.5em 0; padding: 1.5em 2em; border-left: 4px solid #4a5568; background-color: #2d3748; font-style: italic; text-align: center; border-radius: 0 8px 8px 0; color: #cbd5e0; } *, *::before, *::after { animation-duration: 0s !important; animation-delay: 0s !important; transition-duration: 0s !important; transition-delay: 0s !important; } a { transition: color 0.1s ease !important; } @media screen and (max-width: 768px) { body { font-size: 16px; line-height: 1.5; } .reading-container, main, article, .content { padding: 2rem 1.5rem; border-radius: 8px; } h1 { font-size: 2em; } h2 { font-size: 1.5em; } h3 { font-size: 1.25em; } } @media screen and (min-width: 1200px) { body { font-size: 19px; } .reading-container, main, article, .content { padding: 4rem 3rem; } } @media (prefers-contrast: high) { body { color: #ffffff; background-color: #000000; } .reading-container, main, article, .content { background-color: #000000; border: 2px solid #ffffff; box-shadow: none; } h1, h2, h3, h4, h5, h6 { color: #ffffff; } a { color: #00ffff; } a:visited { color: #ff00ff; } code, pre { background-color: #000000; border: 1px solid #ffffff; color: #ffffff; } th { background-color: #000000; color: #ffffff; } blockquote { background-color: #000000; border-left: 4px solid #ffffff; color: #ffffff; } } @media (prefers-reduced-motion: reduce) { a { transition: none !important; } } @media print { body { font-size: 12pt; line-height: 1.4; color: #000000; background-color: transparent; } .reading-container, main, article, .content { max-width: none; margin: 0; padding: 0; background-color: transparent; border: none; box-shadow: none; } a { color: #000000; text-decoration: underline; } p, blockquote { text-align: left; } } a:focus, button:focus, input:focus, textarea:focus, select:focus { outline: 2px solid #63b3ed; outline-offset: 2px; }