/* ========================= π Bear Halloween Theme 2025 by robertbirming.com ========================= */
@import url("https://fonts.bunny.net/css2?family=Henny+Penny&family=Nosifer&display=swap");
/* ========================= Base colors & typography ========================= */
:root { --width: 720px; --font-main: Verdana, sans-serif; --font-secondary: Verdana, sans-serif; --font-scale: 1em; --background-color: #fff9f5; --heading-color: #1a1a1a; --text-color: #333; --link-color: #c25400; --visited-color: #8b6fcb; --code-background-color: #fff2e5; --code-color: #222; --blockquote-color: #222; --divider: rgba(0, 0, 0, 0.2); --pumpkin: #ff7a18; --vampire: #8b6fcb; }
@media (prefers-color-scheme: dark) { :root { --background-color: #0c1416; --heading-color: #f6f6f6; --text-color: #ddd; --link-color: #ffa24a; --visited-color: #b197f7; --code-background-color: #111; --code-color: #ddd; --blockquote-color: #ccc; --divider: rgba(255, 255, 255, 0.25); } }
/* ========================= Layout ========================= */
body { font-family: var(--font-secondary); font-size: var(--font-scale); margin: auto; padding: 24px; max-width: var(--width); line-height: 1.6; color: var(--text-color); background: radial-gradient(900px 600px at 10% -10%, rgba(255, 122, 24, 0.08), transparent), radial-gradient(800px 400px at 110% -20%, rgba(139, 111, 203, 0.06), transparent), var(--background-color); transition: background 0.4s ease; }
/* ========================= Headings ========================= */
h1, h2, h3, h4, h5, h6 { font-family: "Nosifer", sans-serif; color: var(--heading-color); margin-top: 1.4em; margin-bottom: 0.6em; letter-spacing: 0.2px; line-height: 1.25; text-align: left; }
h1 { font-size: 2em; } h2 { font-size: 1.6em; } h3 { font-size: 1.3em; }
h1::before { content: "πΈοΈ "; } h2::before { content: "π¦ "; } h3::before { content: "π―οΈ "; }
/* subtle flicker animation */ @media (prefers-reduced-motion: no-preference) { h1 { animation: flicker 6s infinite steps(60, end); } @keyframes flicker { 0%, 100% { opacity: 1; } 5% { opacity: 0.85; } 7% { opacity: 0.6; } 8% { opacity: 1; } } }
/* ========================= Text & links ========================= */
p { margin: 1em 0; }
strong, b { color: var(--heading-color); } em { color: var(--link-color); }
a { font-family: "Henny Penny", system-ui, sans-serif; color: var(--link-color); text-decoration: none; background: linear-gradient(to right, currentColor 0 0) left bottom / 0 2px no-repeat; transition: background-size 0.3s ease, color 0.2s ease-in-out; } a:hover { background-size: 100% 2px; color: var(--visited-color); }
/* ========================= Dividers ========================= */
hr { border: 0; height: 14px; background: linear-gradient(to right, transparent, var(--divider), transparent) center/100% 1px no-repeat, radial-gradient(6px 6px at left center, var(--divider) 1px, transparent 1px), radial-gradient(6px 6px at right center, var(--divider) 1px, transparent 1px); margin: 2rem 0; }
/* ========================= Lists ========================= */
ul, ol { padding-left: 1.4rem; margin: 1em 0; } ul li::marker { content: "π "; } ul ul li::marker { content: "π "; opacity: 0.7; }
/* ========================= Images & captions ========================= */
img { max-width: 100%; border-radius: 6px; box-shadow: 0 0 0 1px var(--divider); transition: transform 0.2s ease, box-shadow 0.2s ease; } img:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255, 122, 24, 0.25); } figcaption, img + figcaption { display: block; margin-top: 0.5rem; font-size: 0.95em; text-align: center; color: color-mix(in oklab, var(--text-color) 70%, transparent); }
/* ========================= Blockquotes ========================= */
blockquote { border-left: 3px solid var(--pumpkin); padding-left: 18px; font-style: italic; background: linear-gradient(to right, rgba(255, 122, 24, 0.05), transparent 120px); border-radius: 3px; margin: 1.5em 0; position: relative; } blockquote::before { content: "β"; position: absolute; left: -10px; top: -10px; font-size: 2.2rem; line-height: 1; color: rgba(255, 122, 24, 0.4); }
/* ========================= Code ========================= */
code, pre, .highlight { font-family: monospace; background: linear-gradient(180deg, rgba(255, 122, 24, 0.08), var(--code-background-color) 40%); color: var(--code-color); border-radius: 5px; padding: 3px 6px; } pre, .highlight { display: block; padding: 1em; overflow-x: auto; margin: 1.2em 0; }
/* ========================= Tables ========================= */
table { width: 100%; border-collapse: collapse; border: 1px solid var(--divider); margin: 1.5em 0; } th, td { padding: 0.5rem 0.6rem; border-top: 1px dashed var(--divider); } th { text-align: left; background: rgba(255, 122, 24, 0.1); }
/* ========================= Title & footer ========================= */
.title h1 { font-size: 1.5em; position: relative; } .title h1::after { margin-left: 5px; content: "π»"; }
nav a { margin-right: 8px; border-radius: 6px; padding: 2px 4px; outline: 0 solid transparent; transition: outline-color 0.15s ease, outline-width 0.15s ease; } nav a:hover { text-decoration: none; outline: 3px solid rgba(255, 122, 24, 0.3); }
footer { padding: 25px 0; text-align: center; color: color-mix(in oklab, var(--text-color) 80%, transparent); }
/* ========================= Accessibility ========================= */
:focus-visible { outline: 3px solid rgba(255, 122, 24, 0.5); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
- { animation: none !important; transition: none !important; } }