body { --c0: #ffffff; --c03: #fcfcfc; --c07: #fafafa; --c1: #f5f5f5; --c2: #e0e0e0; --c3: #cccccc; --c4: #b3b3b3; --c5: #999999; --c6: #808080; --c7: #5c5c5c; --c8: #2e2e2e; --c9: #000000; --c-link: #0d6efd; --icon-shadow: drop-shadow(0px 0px 2px var(--c0)); --default-image: url(framework/default.png); } body.dark { --c0: #000000; --c03: #0a0a0a; --c07: #171717; --c1: #2e2e2e; --c2: #5c5c5c; --c3: #808080; --c4: #999999; --c5: #b3b3b3; --c6: #cccccc; --c7: #e0e0e0; --c8: #f5f5f5; --c9: #ffffff; --c-link: #bdd7ff; --icon-shadow: drop-shadow(0px 0px 2px var(--c9)); --default-image: url(framework/default_dark.png); } body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue; padding: 20; max-width: 960; margin: auto; color: var(--c9); background-color: var(--c0); line-height: 1.5; } .debug { box-shadow: inset 0 0 0 1px #3399ff; } a { color: var(--c-link); text-decoration: none; } img { max-width: 100%; } img.debug { border: 1px solid #3399ff; box-sizing: border-box; } iframe { max-width: 100%; border: none; } table { color: var(--c9); } .setting-button { position: relative; width: 20; height: 20; filter: var(--icon-shadow); opacity: 0.8; } .setting-button:hover { opacity: 0.5; } .album { position: relative; display: flex; justify-content: center; align-items: center; background-color: var(--c07); } .background-cover { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; background-size: cover; background-position: center; filter: blur(3px); } .text-shadow { text-shadow: 1px 1px 0px var(--c0), -1px 1px 0px var(--c0), 1px -1px 0px var(--c0), -1px -1px 0px var(--c0); } .language-option-link { color: var(--c1); background-color: var(--c9); padding: 0 3 0 3; white-space: nowrap; border-radius: 3px; } .language-option-link:hover { color: var(--c9); background-color: var(--c1); }