@@ -471,27 +471,32 @@
471 If you found a broken link, please <a href="https://github.com/XXIIVV/webring/issues/new" target="_blank">report it</a>.<br />
471 If you found a broken link, please <a href="https://github.com/XXIIVV/webring/issues/new" target="_blank">report it</a>.<br />
472 Learn <a href="https://github.com/XXIIVV/webring" target="_blank">more</a> | <a href="#twtxt">Show twtxt</a> | <a href="#rss">Show rss</a><span class='hide'> | <a href='#'>Hide Feeds</a></span>
472 Learn <a href="https://github.com/XXIIVV/webring" target="_blank">more</a> | <a href="#twtxt">Show twtxt</a> | <a href="#rss">Show rss</a><span class='hide'> | <a href='#'>Hide Feeds</a></span>
474− <img src="icon.black.large.svg" alt="icon"/>
474+ <img id="icon" src="icon.black.large.svg" alt="icon"/>
475 </footer>
475 </footer>
477+:root { --color-alpha: white; --color-beta: black; }
477−body { padding: 0; margin: 0 0 0 0; font-family: serif; max-width: 900px; }
478+body { padding: 0; margin: 0 0 0 0; background-color: var(--color-alpha); color: var(--color-beta); font-family: serif; max-width: 900px; }
478−body a { color: black; text-decoration: none; }
479+body a { color: var(--color-beta); text-decoration: none; }
479−body a:hover { background-color: black; color: white; }
480+body a:hover { background-color: var(--color-beta); color: var(--color-alpha); }
480body a:before { content: '{'; }
481body a:before { content: '{'; }
481body a:after { content: '}'; }
482body a:after { content: '}'; }
482−body > ol { margin: 30px; padding: 0px 30px 30px; column-count: 3; display: block; border-bottom: 2px solid black; }
483+body > ol { margin: 30px; padding: 0px 30px 30px; column-count: 3; display: block; border-bottom: 2px solid var(--color-beta); }
483body > ol > li { padding-right: 30px; }
484body > ol > li { padding-right: 30px; }
484−body > ol > li:target { background: black; }
485+body > ol > li:target { background: var(--color-beta); }
485body > ol > li a.rss, body > ol > li a.twtxt { display: none; }
486body > ol > li a.rss, body > ol > li a.twtxt { display: none; }
486−body > ol > li:target a { color: white; }
487+body > ol > li:target a { color: var(--color-alpha); }
487body > footer { margin: 30px; }
488body > footer { margin: 30px; }
488body > footer > p { max-width: 600px; }
489body > footer > p { max-width: 600px; }
489body > footer > p span.hide { display: none; }
490body > footer > p span.hide { display: none; }
490body > footer > img { display: inline-block; width: 100px; margin-bottom: -5px; margin-bottom: 30px; }
491body > footer > img { display: inline-block; width: 100px; margin-bottom: -5px; margin-bottom: 30px; }
491−body:target > ol li a.twtxt, html:target li a.rss { background: black; color: white; display: inline; }
492+body:target > ol li a.twtxt, html:target li a.rss { background: var(--color-beta); color: var(--color-alpha); display: inline; }
492body:target > footer > p > span.hide, html:target footer > p > span.hide { display: inline; }
493body:target > footer > p > span.hide, html:target footer > p > span.hide { display: inline; }
493@media screen and (max-width: 800px) { body > ol { column-count: 2; } }
494@media screen and (max-width: 800px) { body > ol { column-count: 2; } }
494@media screen and (max-width: 600px) { body > ol { column-count: 1; } }
495@media screen and (max-width: 600px) { body > ol { column-count: 1; } }
496+@media (prefers-color-scheme: dark) {
497+ :root { --color-alpha: black; --color-beta: white; }
498+ #icon { filter: invert(100%); }