/* Dark theme and the light/dark switcher. Light mode is untouched: every rule below only applies in dark mode, which follows the visitor's system setting unless they picked a theme with the switcher (data-theme="light" or "dark" on ). Generated: the same rules are emitted once for each case. The purple header and the business cards look the same in both themes. */ :root { color-scheme: light dark; } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } :root:not([data-theme="light"]), :root:not([data-theme="light"]) body { background: #16181b; } :root:not([data-theme="light"]) #card { box-shadow: 0 0 18px rgba(0, 0, 0, .75); } :root:not([data-theme="light"]) #previous { border-right-color: #3d4249; } :root:not([data-theme="light"]) #next { border-left-color: #3d4249; } :root:not([data-theme="light"]) #previous:hover { border-right-color: #9aa0a6; } :root:not([data-theme="light"]) #next:hover { border-left-color: #9aa0a6; } :root:not([data-theme="light"]) #help-wrapper { background-color: #1f2226; border-top-color: #3d4249; } :root:not([data-theme="light"]) #help { color: #d0d3d7; } :root:not([data-theme="light"]) #help a, :root:not([data-theme="light"]) #help a:visited { color: #7db8ff; } :root:not([data-theme="light"]) .border { background-color: #33383e; } :root:not([data-theme="light"]) footer { background-color: #111315; } :root:not([data-theme="light"]) #osx-container { background-color: #1f2226; color: #e3e5e8; } :root:not([data-theme="light"]) #osx-container #osx-modal-title { color: #e3e5e8; background-color: #2c3035; border-bottom-color: #3d4249; } :root:not([data-theme="light"]) #osx-container .close a { color: #9aa0a6; } :root:not([data-theme="light"]) #osx-container .close a:hover { color: #fff; } :root:not([data-theme="light"]) #osx-container span { color: #9aa0a6; } :root:not([data-theme="light"]) #osx-container input { background-color: #16181b; color: #e3e5e8; border: 1px solid #4a4f56; } :root:not([data-theme="light"]) #osx-container button { background-color: #2f343a; color: #eceef1; border: 1px solid #6a7078; border-radius: 3px; padding: 2px 12px; } :root:not([data-theme="light"]) #osx-container button:hover { background-color: #3b4148; } } :root[data-theme="dark"], :root[data-theme="dark"] body { background: #16181b; } :root[data-theme="dark"] #card { box-shadow: 0 0 18px rgba(0, 0, 0, .75); } :root[data-theme="dark"] #previous { border-right-color: #3d4249; } :root[data-theme="dark"] #next { border-left-color: #3d4249; } :root[data-theme="dark"] #previous:hover { border-right-color: #9aa0a6; } :root[data-theme="dark"] #next:hover { border-left-color: #9aa0a6; } :root[data-theme="dark"] #help-wrapper { background-color: #1f2226; border-top-color: #3d4249; } :root[data-theme="dark"] #help { color: #d0d3d7; } :root[data-theme="dark"] #help a, :root[data-theme="dark"] #help a:visited { color: #7db8ff; } :root[data-theme="dark"] .border { background-color: #33383e; } :root[data-theme="dark"] footer { background-color: #111315; } :root[data-theme="dark"] #osx-container { background-color: #1f2226; color: #e3e5e8; } :root[data-theme="dark"] #osx-container #osx-modal-title { color: #e3e5e8; background-color: #2c3035; border-bottom-color: #3d4249; } :root[data-theme="dark"] #osx-container .close a { color: #9aa0a6; } :root[data-theme="dark"] #osx-container .close a:hover { color: #fff; } :root[data-theme="dark"] #osx-container span { color: #9aa0a6; } :root[data-theme="dark"] #osx-container input { background-color: #16181b; color: #e3e5e8; border: 1px solid #4a4f56; } :root[data-theme="dark"] #osx-container button { background-color: #2f343a; color: #eceef1; border: 1px solid #6a7078; border-radius: 3px; padding: 2px 12px; } :root[data-theme="dark"] #osx-container button:hover { background-color: #3b4148; } /* Phones: a second pair of arrows, under the card */ @media (max-width: 900px) { @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #nprev { border-color: transparent #3d4249 transparent transparent; } :root:not([data-theme="light"]) #nnext { border-color: transparent transparent transparent #3d4249; } } :root[data-theme="dark"] #nprev { border-color: transparent #3d4249 transparent transparent; } :root[data-theme="dark"] #nnext { border-color: transparent transparent transparent #3d4249; } } /* Ads are light-scheme pages in frames. In dark mode the browser would paint a white backdrop behind them (visible beside ads narrower than their slot); matching schemes keeps it transparent. */ .adsbygoogle, .adsbygoogle iframe { color-scheme: light; } /* Theme switcher: right-hand end of the purple header; a moon in light mode, a sun in dark mode */ header { position: relative; } #theme-toggle { position: absolute; top: 50%; right: 20px; transform: translateY(-50%); width: 36px; height: 36px; padding: 7px; border: 1px solid rgba(255, 254, 252, .6); border-radius: 50%; background: rgba(255, 254, 252, .12); color: #FFFEFC; cursor: pointer; line-height: 0; } #theme-toggle:hover, #theme-toggle:focus-visible { background: rgba(255, 254, 252, .25); border-color: #FFFEFC; } #theme-toggle[hidden] { display: none; } #theme-toggle svg { width: 20px; height: 20px; } #theme-toggle .icon-sun { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #theme-toggle .icon-sun { display: inline; } :root:not([data-theme="light"]) #theme-toggle .icon-moon { display: none; } } :root[data-theme="dark"] #theme-toggle .icon-sun { display: inline; } :root[data-theme="dark"] #theme-toggle .icon-moon { display: none; } @media (max-width: 900px) { #theme-toggle { right: 10px; width: 32px; height: 32px; padding: 5px; } }