/* Globals */ :root { --color-scheme: light; --logo-brightness: brightness(1); --sidebar-width: 280px; --sidebar-resize-indicator-width: 0px; --sidebar-resize-indicator-space: 2px; --page-padding: 15px; --content-max-width: 690px; --menu-bar-height: 64px; --font: "IA Writer Quattro S", sans-serif; --title-font: "Lora", "Helvetica Neue", Helvetica, Arial, sans-serif; --mono-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace; --code-font-size: 0.875em /* please adjust the ace font size accordingly in editor.js */; --noise-opacity: 0.024; --bg: hsla(50, 25%, 96%); --fg: hsl(220, 13%, 34%); --title-color: hsl(220, 92%, 42%); --border: hsl(220, 13%, 80%); --border-light: hsl(220, 13%, 90%); --border-hover: hsl(220, 13%, 70%); --border-footer: hsl(220, 13%, 91%); --media-bg: hsl(50, 25%, 92%); --sidebar-bg: hsla(50, 25%, 94%); --sidebar-fg: hsl(0, 0%, 0%); --sidebar-non-existant: #aaaaaa; --sidebar-active: hsl(220, 93%, 42%); --sidebar-active-bg: hsl(220, 93%, 42%, 0.1); --sidebar-mobile-shadow: 0px 16px 16px hsl(0, 0%, 0%, 0.1); --divider: hsl(220, 50%, 45%, 0.1); --scrollbar: #8f8f8f; --icons: #747474; --icons-hover: #000000; --icon-btn-bg-hover: hsl(220, 93%, 42%, 0.15); --links: hsl(220, 92%, 42%); --link-line-decoration: hsl(220, 93%, 42%, 0.2); --link-line-decoration-hover: hsl(220, 93%, 42%, 0.5); --full-contrast: #000; --inline-code-color: #301900; --code-text: hsl(220, 13%, 10%); --code-bg: hsl(220, 93%, 42%, 0.1); --keybinding-bg: hsl(0, 0%, 94%); --pre-bg: #fff; --pre-border: hsla(220, 93%, 42%, 0.3); --pre-shadow: hsla(220, 93%, 42%, 0.07); --popover-bg: #fafafa; --popover-border: #cccccc; --popover-shadow: 0 10px 15px -3px hsl(0, 0%, 0%, 0.1), 0 4px 6px -4px hsl(0, 0%, 0%, 0.1); --theme-hover: #e6e6e6; --hover-section-title: hsl(50, 25%, 88%); --quote-bg: hsl(197, 37%, 96%); --quote-border: hsl(197, 37%, 84%); --warning-border: hsl(25, 100%, 85%); --warning-bg: hsl(42, 100%, 60%, 0.1); --warning-icon: hsl(42, 100%, 30%); --table-header-bg: hsl(220, 50%, 90%, 0.4); --table-border-color: hsl(220, 93%, 42%, 0.15); --table-alternate-bg: hsl(220, 10%, 90%, 0.4); --toc-link-underline: hsl(0, 0%, 0%, 0.1); --toc-link-underline-hover: hsl(0, 0%, 0%, 0.5); --searchbar-border-color: #aaa; --searchbar-bg: #fafafa; --searchbar-fg: #000; --searchbar-shadow-color: #aaa; --searchresults-header-fg: #666; --searchresults-li-bg: #e4f2fe; --search-mark-bg: #a2cff5; --download-btn-bg: hsl(220, 60%, 95%); --download-btn-bg-hover: hsl(220, 60%, 93%); --download-btn-color: hsl(220, 60%, 30%); --download-btn-border: hsla(220, 60%, 40%, 0.2); --download-btn-border-hover: hsla(220, 60%, 50%, 0.2); --download-btn-shadow: hsla(220, 40%, 60%, 0.1); --search-btn-bg: hsl(220, 100%, 100%); --search-btn-bg-hover: hsla(50, 25%, 97%); --search-btn-border: hsl(220, 50%, 45%, 0.2); --toast-bg: hsla(220, 93%, 98%); --toast-border: hsla(220, 93%, 42%, 0.3); --toast-border-success: hsla(120, 73%, 42%, 0.3); --toast-border-error: hsla(0, 90%, 50%, 0.3); --footer-btn-bg: hsl(220, 60%, 98%, 0.4); --footer-btn-bg-hover: hsl(220, 60%, 93%, 0.5); --footer-btn-border: hsla(220, 60%, 40%, 0.15); --footer-btn-border-hover: hsla(220, 60%, 50%, 0.2);} .dark { --color-scheme: dark; --logo-brightness: brightness(2); --noise-opacity: 0.012; --bg: hsl(220, 13%, 7.5%); --fg: hsl(220, 14%, 70%); --title-color: hsl(220, 92%, 80%); --border: hsl(220, 13%, 20%); --border-light: hsl(220, 13%, 15%); --border-hover: hsl(220, 13%, 40%); --border-footer: hsl(220, 13%, 12%); --media-bg: hsl(220, 13%, 8%); --sidebar-bg: hsl(220, 13%, 6.5%); --sidebar-fg: hsl(220, 14%, 71%); --sidebar-non-existant: #505254; --sidebar-active: hsl(220, 92%, 75%); --sidebar-active-bg: hsl(220, 93%, 42%, 0.25); --sidebar-mobile-shadow: 0px 16px 16px hsl(0, 0%, 0%, 0.6); --divider: hsl(220, 13%, 12%); --scrollbar: hsl(220, 13%, 30%); --icons: hsl(220, 14%, 71%); --icons-hover: hsl(220, 14%, 90%); --icon-btn-bg-hover: hsl(220, 93%, 42%, 0.4); --links: hsl(220, 93%, 75%); --link-line-decoration: hsl(220, 92%, 80%, 0.4); --link-line-decoration-hover: hsl(220, 92%, 80%, 0.8); --full-contrast: #fff; --inline-code-color: hsl(40, 100%, 80%); --code-text: hsl(220, 13%, 95%); --code-bg: hsl(220, 93%, 50%, 0.2); --keybinding-bg: hsl(0, 0%, 12%); --pre-bg: hsl(220, 13%, 5%); --pre-border: hsla(220, 93%, 70%, 0.3); --pre-shadow: hsla(220, 93%, 70%, 0.1); --popover-bg: hsl(220, 13%, 8%); --popover-border: hsl(220, 13%, 20%); --popover-shadow: 0 10px 15px -3px hsl(0, 0%, 0%, 0.1), 0 4px 6px -4px hsl(0, 0%, 0%, 0.1); --theme-hover: hsl(220, 13%, 25%); --hover-section-title: hsl(220, 13%, 11%); --quote-bg: hsl(220, 13%, 25%, 0.4); --quote-border: hsl(220, 13%, 32%, 0.5); --table-border-color: hsl(220, 13%, 30%, 0.5); --table-header-bg: hsl(220, 13%, 25%, 0.5); --table-alternate-bg: hsl(220, 13%, 20%, 0.4); --toc-link-underline: hsl(255, 100%, 100%, 0.1); --toc-link-underline-hover: hsl(255, 100%, 100%, 0.4); --warning-border: hsl(25, 100%, 85%, 0.2); --warning-bg: hsl(42, 100%, 40%, 0.1); --warning-icon: hsl(42, 100%, 80%); --searchbar-border-color: hsl(220, 13%, 30%); --searchbar-bg: hsl(220, 13%, 22%, 0.5); --searchbar-fg: hsl(220, 14%, 71%); --searchbar-shadow-color: hsl(220, 13%, 15%); --searchresults-header-fg: hsl(220, 14%, 60%); --searchresults-li-bg: hsl(220, 13%, 25%); --search-mark-bg: hsl(220, 93%, 60%); --download-btn-bg: hsl(220, 90%, 30%, 0.5); --download-btn-bg-hover: hsl(220, 90%, 50%, 0.4); --download-btn-color: hsl(220, 90%, 95%); --download-btn-border: hsla(220, 90%, 80%, 0.2); --download-btn-border-hover: hsla(220, 90%, 80%, 0.4); --download-btn-shadow: hsla(220, 50%, 60%, 0.15); --search-btn-bg: hsl(220, 90%, 90%, 0.05); --search-btn-bg-hover: hsl(220, 90%, 90%, 0.1); --search-btn-border: hsla(220, 90%, 80%, 0.1); --toast-bg: hsla(220, 20%, 98%, 0.05); --toast-border: hsla(220, 93%, 70%, 0.2); --toast-border-success: hsla(120, 90%, 60%, 0.3); --toast-border-error: hsla(0, 90%, 80%, 0.3); --footer-btn-bg: hsl(220, 90%, 95%, 0.01); --footer-btn-bg-hover: hsl(220, 90%, 50%, 0.05); --footer-btn-border: hsla(220, 90%, 90%, 0.05); --footer-btn-border-hover: hsla(220, 90%, 80%, 0.2);}
/* Globals */
:root {
--color-scheme: light;
--logo-brightness: brightness(1);
--sidebar-width: 280px;
--sidebar-resize-indicator-width: 0px;
--sidebar-resize-indicator-space: 2px;
--page-padding: 15px;
--content-max-width: 690px;
--menu-bar-height: 64px;
--font: "IA Writer Quattro S", sans-serif;
--title-font: "Lora", "Helvetica Neue", Helvetica, Arial, sans-serif;
--mono-font:
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono,
Courier New, monospace;
--code-font-size: 0.875em
/* please adjust the ace font size accordingly in editor.js */;
--noise-opacity: 0.024;
--bg: hsla(50, 25%, 96%);
--fg: hsl(220, 13%, 34%);
--title-color: hsl(220, 92%, 42%);
--border: hsl(220, 13%, 80%);
--border-light: hsl(220, 13%, 90%);
--border-hover: hsl(220, 13%, 70%);
--border-footer: hsl(220, 13%, 91%);
--media-bg: hsl(50, 25%, 92%);
--sidebar-bg: hsla(50, 25%, 94%);
--sidebar-fg: hsl(0, 0%, 0%);
--sidebar-non-existant: #aaaaaa;
--sidebar-active: hsl(220, 93%, 42%);
--sidebar-active-bg: hsl(220, 93%, 42%, 0.1);
--sidebar-mobile-shadow: 0px 16px 16px hsl(0, 0%, 0%, 0.1);
--divider: hsl(220, 50%, 45%, 0.1);
--scrollbar: #8f8f8f;
--icons: #747474;
--icons-hover: #000000;
--icon-btn-bg-hover: hsl(220, 93%, 42%, 0.15);
--links: hsl(220, 92%, 42%);
--link-line-decoration: hsl(220, 93%, 42%, 0.2);
--link-line-decoration-hover: hsl(220, 93%, 42%, 0.5);
--full-contrast: #000;
--inline-code-color: #301900;
--code-text: hsl(220, 13%, 10%);
--code-bg: hsl(220, 93%, 42%, 0.1);
--keybinding-bg: hsl(0, 0%, 94%);
--pre-bg: #fff;
--pre-border: hsla(220, 93%, 42%, 0.3);
--pre-shadow: hsla(220, 93%, 42%, 0.07);
--popover-bg: #fafafa;
--popover-border: #cccccc;
--popover-shadow:
0 10px 15px -3px hsl(0, 0%, 0%, 0.1), 0 4px 6px -4px hsl(0, 0%, 0%, 0.1);
--theme-hover: #e6e6e6;
--hover-section-title: hsl(50, 25%, 88%);
--quote-bg: hsl(197, 37%, 96%);
--quote-border: hsl(197, 37%, 84%);
--warning-border: hsl(25, 100%, 85%);
--warning-bg: hsl(42, 100%, 60%, 0.1);
--warning-icon: hsl(42, 100%, 30%);
--table-header-bg: hsl(220, 50%, 90%, 0.4);
--table-border-color: hsl(220, 93%, 42%, 0.15);
--table-alternate-bg: hsl(220, 10%, 90%, 0.4);
--toc-link-underline: hsl(0, 0%, 0%, 0.1);
--toc-link-underline-hover: hsl(0, 0%, 0%, 0.5);
--searchbar-border-color: #aaa;
--searchbar-bg: #fafafa;
--searchbar-fg: #000;
--searchbar-shadow-color: #aaa;
--searchresults-header-fg: #666;
--searchresults-li-bg: #e4f2fe;
--search-mark-bg: #a2cff5;
--download-btn-bg: hsl(220, 60%, 95%);
--download-btn-bg-hover: hsl(220, 60%, 93%);
--download-btn-color: hsl(220, 60%, 30%);
--download-btn-border: hsla(220, 60%, 40%, 0.2);
--download-btn-border-hover: hsla(220, 60%, 50%, 0.2);
--download-btn-shadow: hsla(220, 40%, 60%, 0.1);
--search-btn-bg: hsl(220, 100%, 100%);
--search-btn-bg-hover: hsla(50, 25%, 97%);
--search-btn-border: hsl(220, 50%, 45%, 0.2);
--toast-bg: hsla(220, 93%, 98%);
--toast-border: hsla(220, 93%, 42%, 0.3);
--toast-border-success: hsla(120, 73%, 42%, 0.3);
--toast-border-error: hsla(0, 90%, 50%, 0.3);
--footer-btn-bg: hsl(220, 60%, 98%, 0.4);
--footer-btn-bg-hover: hsl(220, 60%, 93%, 0.5);
--footer-btn-border: hsla(220, 60%, 40%, 0.15);
--footer-btn-border-hover: hsla(220, 60%, 50%, 0.2);
}
.dark {
--color-scheme: dark;
--logo-brightness: brightness(2);
--noise-opacity: 0.012;
--bg: hsl(220, 13%, 7.5%);
--fg: hsl(220, 14%, 70%);
--title-color: hsl(220, 92%, 80%);
--border: hsl(220, 13%, 20%);
--border-light: hsl(220, 13%, 15%);
--border-hover: hsl(220, 13%, 40%);
--border-footer: hsl(220, 13%, 12%);
--media-bg: hsl(220, 13%, 8%);
--sidebar-bg: hsl(220, 13%, 6.5%);
--sidebar-fg: hsl(220, 14%, 71%);
--sidebar-non-existant: #505254;
--sidebar-active: hsl(220, 92%, 75%);
--sidebar-active-bg: hsl(220, 93%, 42%, 0.25);
--sidebar-mobile-shadow: 0px 16px 16px hsl(0, 0%, 0%, 0.6);
--divider: hsl(220, 13%, 12%);
--scrollbar: hsl(220, 13%, 30%);
--icons: hsl(220, 14%, 71%);
--icons-hover: hsl(220, 14%, 90%);
--icon-btn-bg-hover: hsl(220, 93%, 42%, 0.4);
--links: hsl(220, 93%, 75%);
--link-line-decoration: hsl(220, 92%, 80%, 0.4);
--link-line-decoration-hover: hsl(220, 92%, 80%, 0.8);
--full-contrast: #fff;
--inline-code-color: hsl(40, 100%, 80%);
--code-text: hsl(220, 13%, 95%);
--code-bg: hsl(220, 93%, 50%, 0.2);
--keybinding-bg: hsl(0, 0%, 12%);
--pre-bg: hsl(220, 13%, 5%);
--pre-border: hsla(220, 93%, 70%, 0.3);
--pre-shadow: hsla(220, 93%, 70%, 0.1);
--popover-bg: hsl(220, 13%, 8%);
--popover-border: hsl(220, 13%, 20%);
--popover-shadow:
0 10px 15px -3px hsl(0, 0%, 0%, 0.1), 0 4px 6px -4px hsl(0, 0%, 0%, 0.1);
--theme-hover: hsl(220, 13%, 25%);
--hover-section-title: hsl(220, 13%, 11%);
--quote-bg: hsl(220, 13%, 25%, 0.4);
--quote-border: hsl(220, 13%, 32%, 0.5);
--table-border-color: hsl(220, 13%, 30%, 0.5);
--table-header-bg: hsl(220, 13%, 25%, 0.5);
--table-alternate-bg: hsl(220, 13%, 20%, 0.4);
--toc-link-underline: hsl(255, 100%, 100%, 0.1);
--toc-link-underline-hover: hsl(255, 100%, 100%, 0.4);
--warning-border: hsl(25, 100%, 85%, 0.2);
--warning-bg: hsl(42, 100%, 40%, 0.1);
--warning-icon: hsl(42, 100%, 80%);
--searchbar-border-color: hsl(220, 13%, 30%);
--searchbar-bg: hsl(220, 13%, 22%, 0.5);
--searchbar-fg: hsl(220, 14%, 71%);
--searchbar-shadow-color: hsl(220, 13%, 15%);
--searchresults-header-fg: hsl(220, 14%, 60%);
--searchresults-li-bg: hsl(220, 13%, 25%);
--search-mark-bg: hsl(220, 93%, 60%);
--download-btn-bg: hsl(220, 90%, 30%, 0.5);
--download-btn-bg-hover: hsl(220, 90%, 50%, 0.4);
--download-btn-color: hsl(220, 90%, 95%);
--download-btn-border: hsla(220, 90%, 80%, 0.2);
--download-btn-border-hover: hsla(220, 90%, 80%, 0.4);
--download-btn-shadow: hsla(220, 50%, 60%, 0.15);
--search-btn-bg: hsl(220, 90%, 90%, 0.05);
--search-btn-bg-hover: hsl(220, 90%, 90%, 0.1);
--search-btn-border: hsla(220, 90%, 80%, 0.1);
--toast-bg: hsla(220, 20%, 98%, 0.05);
--toast-border: hsla(220, 93%, 70%, 0.2);
--toast-border-success: hsla(120, 90%, 60%, 0.3);
--toast-border-error: hsla(0, 90%, 80%, 0.3);
--footer-btn-bg: hsl(220, 90%, 95%, 0.01);
--footer-btn-bg-hover: hsl(220, 90%, 50%, 0.05);
--footer-btn-border: hsla(220, 90%, 90%, 0.05);
--footer-btn-border-hover: hsla(220, 90%, 80%, 0.2);
}