/* Global customization */ :root { --code-max-height: 60rem; --header-font-family: "DancingScript"; --body-font-family: "DancingScript"; --code-font-family: "DancingScript"; } /* Light mode theming */ :root, :root[color-theme="light"] { --header-background: #4ec58a; --header-font-color: #ffffff; --body-background: #ffffff; --body-font-color: #343a40; --mark-color: #ffab00; --button-background: #62cb97; --button-border-color: #4ec58a; --link-color: #518169; --link-color-visited: #c54e8a; --code-background: #f5f6f8; --code-accent-color: #e3e7eb; --code-accent-color-lite: #eff1f3; --code-font-color: #5f5f5f; --code-copy-background: #f5f6f8; --code-copy-font-color: #6b7784; --code-copy-border-color: #adb4bc; --code-copy-success-color: #00c853; --accent-color: #e9ecef; --accent-color-lite: #f8f9fa; --control-icons: #b2bac1; --footer-background: #112b3c; --footer-font-color: #ffffff; --footer-link-color: #ffcc5c; --footer-link-color-visited: #ffcc5c; } @media (prefers-color-scheme: light) { :root { --header-background: #4ec58a; --header-font-color: #ffffff; --body-background: #ffffff; --body-font-color: #343a40; --mark-color: #ffab00; --button-background: #62cb97; --button-border-color: #4ec58a; --link-color: #518169; --link-color-visited: #c54e8a; --code-background: #f5f6f8; --code-accent-color: #e3e7eb; --code-accent-color-lite: #eff1f3; --code-font-color: #5f5f5f; --code-copy-background: #f5f6f8; --code-copy-font-color: #6b7784; --code-copy-border-color: #adb4bc; --code-copy-success-color: #00c853; --accent-color: #e9ecef; --accent-color-lite: #f8f9fa; --control-icons: #b2bac1; --footer-background: #112b3c; --footer-font-color: #ffffff; --footer-link-color: #ffcc5c; --footer-link-color-visited: #ffcc5c; } } /* Dark mode theming */ :root[color-theme="dark"] { --header-background: #4ec58a; --header-font-color: #ffffff; --body-background: #343a40; --body-font-color: #ced3d8; --mark-color: #ffab00; --button-background: #62cb97; --button-border-color: #4ec58a; --link-color: #7ac29e; --link-color-visited: #c27a9e; --code-background: #2f353a; --code-accent-color: #262b2f; --code-accent-color-lite: #2b3035; --code-font-color: #b9b9b9; --code-copy-background: #343a40; --code-copy-font-color: #6b7784; --code-copy-border-color: #6b7784; --code-copy-success-color: #37905c; --accent-color: #2b3035; --accent-color-lite: #2f353a; --control-icons: #b2bac1; --footer-background: #112b3c; --footer-font-color: #ffffff; --footer-link-color: #ffcc5c; --footer-link-color-visited: #ffcc5c; } @media (prefers-color-scheme: dark) { :root { --header-background: #4ec58a; --header-font-color: #ffffff; --body-background: #343a40; --body-font-color: #ced3d8; --mark-color: #ffab00; --button-background: #62cb97; --button-border-color: #4ec58a; --link-color: #7ac29e; --link-color-visited: #c27a9e; --code-background: #2f353a; --code-accent-color: #262b2f; --code-accent-color-lite: #2b3035; --code-font-color: #b9b9b9; --code-copy-background: #343a40; --code-copy-font-color: #6b7784; --code-copy-border-color: #6b7784; --code-copy-success-color: #37905c; --accent-color: #2b3035; --accent-color-lite: #2f353a; --control-icons: #b2bac1; --footer-background: #112b3c; --footer-font-color: #ffffff; --footer-link-color: #ffcc5c; --footer-link-color-visited: #ffcc5c; } } @font-face { font-family: "DancingScript"; src: url("fonts/DancingScript.woff2") format("woff2"), url("fonts/DancingScript.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; }