Light and dark mode!

Thanks to @trwnh and @yourdevilfriends, we now have a light and dark mode, so thank you both! <3

about.html

@@ -30,7 +30,7 @@
 
 <p>While I that it's cool, I'm also not on Mastodon, but I follow some of my friends there thanks to Masto supporting RSS. If you want to chat, I'm on email: xenia@thedigitallancabin.net</p>
 
-<p>Xenia: Over and out!</p>
+<p><font color="#8b0000">Xenia</font>: Over and out!</p>
 					<hr>
 
 					<p>Copyright © Xenia  <script type="text/javascript">

banner/index.html

@@ -24,6 +24,8 @@ Contents of this folder:
 * <a href="banner_alt.png">banner_alt.png</a>: Art by <a href="https://www.newgrounds.com/art/view/puapka/xenia-commission">Puapka</a>
 * <a href="banner_gimp_compat.psd">banner_gimp_compat.psd</a>: For GIMP
 * <a href="banner_temp.png">banner_temp.png</a>: Banner that's a PNG
+* <a href="banner_temp_blank.png">banner_temp_blank.png</a>: No Xenia!
+* <a href="banner_temp_tux.png">banner_temp_tux.png</a>: Now with Tux >:D
 * <a href="love_letter_tw.zip">love_letter_tw.zip</a>: ZIP for the font used, Love Letter TW</pre>                </td>
             </tr>
         </table>

chicken.html

@@ -33,7 +33,7 @@
 	
 <p>Anyway, this is the first time that I am talking about the farm on this website, so it's kind of bad that it had to be about me cleaning up a dead chicken, whoops! But not everything on the farm is <strong>bad</strong>. For example, it's great that I get to not sit in an office chair for 8 hours everyday, so working out makes me all strong and stuff (I think men like buff women..? LOL) and it's so rewarding to know that I'm helping my family with their farmland :)</p>
 
-<p>Anyway, Xenia: Over and out!</p>
+<p>Anyway, <font color="#8b0000">Xenia</font>: Over and out!</p>
 	
 <hr>
 

index.html

@@ -65,6 +65,8 @@
 						</center>
 						
 					<hr>
+						<p><center><img src="acab.png" alt="Banner that says A.C.A.B. and 13 12 on - art by shroom.ink" title="Banner that says A.C.A.B. and 13 12 on - art by shroom.ink"></center></p>
+
 										<p><center><img src="aifree.svg" width="96" height="96" alt="Sticker that says 'AI Free', made by Kilcat." title="Sticker that says 'AI Free', made by Kilcat."> <a href="myrss.xml"><img src="rss.png" width="96" height="96" alt="Yellow and orange RSS logo." title="Yellow and orange RSS logo."></a> <a href="mailto:xenia@thedigitallancabin.net"><img src="WP20Symbols_mail.svg" width="96" height="96" alt="Post box. Click here to send Xenia an Email." title="Post box. Click here to send Xenia an Email."></a></center></p>
 					
 					 <center><a href="http://mabsland.com/Adoption.html"><img src="Censor_PGc.png" alt="Small banner that says that this website is rated PG!" title="Small banner that says that this website is rated PG!"></a> <a href="https://en.wikipedia.org"><img src="wikipedia.png" alt="Wikipedia banner" title="Wikipedia banner"></a> <a href="https://gimp.org"><img src="gimp.png" alt="GIMP banner" title="GIMP banner"></a> <a href="https://mozilla.org"><img src="firefox.png" alt="Firefox banner" title="Firefox banner"></a> <img src="xenia.png" alt="Banner that says 'Linux' on with my face" title="Banner that says 'Linux' on with my face"> <a href="http://thedigitallancabin.net"><img src="thedigitallancabin.png" alt="Banner for thedigitallancabin dot net" title="Banner for thedigitallancabin dot net"></a> <a href="https://archlinux.org"><img src="arch.png" alt="Banner for Arch Linux" title="Banner for Arch Linux"></a> <img src="catboys-meow.gif" alt="Banner that says 'Catboys Meow!' with a GIF of a cat flicking their ears. Banner by yourdevilfriends.art" title="Banner that says 'Catboys Meow!' with a GIF of a cat flicking their ears. Banner by yourdevilfriends.art"> <a href="https://owly.fans"><img src="owlyfans.png" alt="Banner for OwlyFans" title="Banner for OwlyFans"></a>
@@ -87,7 +89,10 @@ var today = new Date()
 var year = today.getFullYear()
 document.write(year)
 						</script>. <a href="license.html">Some rights reserved</a>. Please see <a href="humans.txt">humans.txt</a> for full credits!</p>
-					<p>RSS image from <a href="https://commons.wikimedia.org/wiki/File:Crystal_Project_konqsidebar_news.png">Wikimedia Commons</a>, AI image from <a href="https://github.com/DynTylluan/aifree">here</a> and was made by Kilcat. The background image and the face below this text was taken from <a href="https://freedoom.github.io/">the Freedoom game</a>. Welsh flag from <a href="https://commons.wikimedia.org/wiki/File:Farm-Fresh_flag_wales.png">here</a>. The EMail box was from <a href="https://commons.wikimedia.org/wiki/File:WP20Symbols_mail.svg">here</a>.</p><p>Made for Onfim.</p>
+					<p>RSS image from <a href="https://commons.wikimedia.org/wiki/File:Crystal_Project_konqsidebar_news.png">Wikimedia Commons</a>, AI image from <a href="https://github.com/DynTylluan/aifree">here</a> and was made by Kilcat. Welsh flag from <a href="https://commons.wikimedia.org/wiki/File:Farm-Fresh_flag_wales.png">here</a>. The EMail box was from <a href="https://commons.wikimedia.org/wiki/File:WP20Symbols_mail.svg">here</a>.</p>
+			<p>If you have light mode on your computer, then the background image and the face below this text was taken from <a href="https://freedoom.github.io/">the Freedoom game</a>, if you have dark mode, then it was taken from <a href="https://github.com/MissLavender-LQ/LibreQuake">LibreQuake</a>.</p>
+			
+			<p>Made for Onfim.</p>
 <p><center><img src="sw2_3.png" onmouseover="this.src=' sw2_4.png '" onmouseout="this.src=' sw2_3.png '" alt="A creepy-looking green face with horns on the head with glowingread eyes." title="A creepy-looking green face with horns on the head with glowingread eyes."></center></p><p></p>
                 </td>
             </tr>

style.css

@@ -1,11 +1,12 @@
-body {
-	max-width: 800px ;
-	margin: auto ;
-	color:#002626;
-	background: url(mural1.png);
-	background-color:hsl(204, 44%, 65%);
-}
+/* Such a big THANK YOU to devils of yourdevilfriends.art for showing me how this should be done! */
 
+/* LIGHT MODE */
+:root {
+    --color: #002626;
+    --link-color: #4A234A;
+    --bg-image: url(mural1.png);
+    --bg-color: hsl(204, 44%, 65%);
+}
 /* unvisited link */
 a:link {
     color: #4A234A;
@@ -26,6 +27,48 @@ a:active {
     color: #5D2E87;
 }
 
+/* DARK MODE */
+@media (prefers-color-scheme: dark) {
+    :root {
+        --color: #00A5A5;
+        --link-color: #B758B7;
+        --bg-image: url(tek_grate.png);
+        --bg-color: hsl(30, 36%, 4%);
+    }
+/* unvisited link */
+a:link {
+	color: #B758B7;
+}
+
+/* visited link */
+a:visited {
+	color: #74DB74;
+}
+
+/* mouse over link */
+a:hover {
+	color: #889DCE;
+}
+
+/* selected link */
+a:active {
+	color: #9469BC;
+}
+}
+
+body {
+    max-width: 800px ;
+    margin: auto ;
+    color: var(--color);
+    background-image: var(--bg-image);
+    background-color: var(--bg-color);
+}
+
+/* unvisited link */
+a:link {
+    color: var(--link-color);
+}
+
 /* The following was written by yourdevilfriends.art - thank you */
 uppercase,yell {
 	text-transform: uppercase;