diff --git a/_src/_includes/base.njk b/_src/_includes/base.njk
index 1f70fe0..c07816e 100644
--- a/_src/_includes/base.njk
+++ b/_src/_includes/base.njk
@@ -1,5 +1,6 @@
 ---
 paw: "m 15.700739,16.184194 c 0,4.483 -2.555,2.038 -5.7060001,2.038 -3.151,0 -5.706,2.445 -5.706,-2.038 0,-2.925 2.555,-6.113001 5.706,-6.113001 3.1510001,0 5.7060001,3.188001 5.7060001,6.113001 z M 4.0687389,8.1071934 c 0.394,1.336 0.007,2.6259996 -0.862,2.8819996 -0.87,0.256001 -1.8929999,-0.619 -2.28599993,-1.9539996 -0.393,-1.336 -0.007,-2.626 0.86199993,-2.882 0.87,-0.256 1.893,0.619 2.286,1.954 z m 15.0000001,0.945 c -0.407,1.3319996 -1.442,2.1960006 -2.312,1.9299996 -0.869,-0.266 -1.244,-1.5609996 -0.837,-2.8919996 0.407,-1.332 1.442,-2.196 2.312,-1.93 0.869,0.265 1.244,1.56 0.837,2.892 z m -10.1100001,-4.859 c 0.365,1.897 -0.218,3.606 -1.302,3.814 -1.085,0.209 -2.261,-1.16 -2.626,-3.059 -0.365,-1.898 0.218,-3.6060001 1.302,-3.8150001 1.085,-0.20799996 2.261,1.1620001 2.626,3.0600001 z m 5.9960001,0.778 c -0.388,1.893 -1.578,3.25 -2.66,3.029 -1.082,-0.222 -1.647,-1.937 -1.26,-3.83 0.388,-1.894 1.578,-3.25000006 2.66,-3.0290001 1.082,0.222 1.647,1.9370001 1.26,3.8300001 z"
+meow: "m18.8003 13.7653q0-1.7737-1.156-2.943-1.1563-1.1693-3.2321-1.3925v-.0525q1.8918-.3939 2.8772-1.4976.9986-1.1167.9986-2.8905 0-2.3122-1.5502-3.5996Q15.2006.0889 12.4153.0889q-2.5488 0-4.1778 1.2744-1.616 1.2741-1.8788 3.5471l2.3785.1843q.1577-1.4583 1.1167-2.2597.972-.8014 2.5355-.8014 1.7208 0 2.588.8673.8802.8539.8802 2.3385 0 1.4976-1.0774 2.3516-1.0642.8409-3.0086.8409h-1.2873v2.0495h1.3399q2.1942 0 3.3502.8539 1.1692.8406 1.1692 2.3515 0 1.7342-1.0249 2.6144-1.0116.8802-2.7983.8802-3.5604 0-4.0334-3.2847l-2.4437.2236q.3154 2.4829 1.984 3.7573 1.6815 1.2611 4.4931 1.2611 3.0219 0 4.6509-1.4058t1.629-3.9676zM2.5618 18.8759v-2.7195H-0v2.7195zm0-11.4959V4.6606H-0V7.38z"
 ---
 
 <!DOCTYPE html>
@@ -15,46 +16,61 @@ paw: "m 15.700739,16.184194 c 0,4.483 -2.555,2.038 -5.7060001,2.038 -3.151,0 -5.
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <meta charset="utf-8">
         <link rel="stylesheet" href="/assets/css/reset.css">
-        <link rel="stylesheet" href="/assets/css/default.css">
+        <link rel="stylesheet" href="/assets/css/default/default.css">
+        <link rel="stylesheet" href="/assets/css/default/system.css" id="custom">
         {% set availableStyles = ['home', 'blog', 'gallery'] %}
         {% if page.url %}
             {% if availableStyles.indexOf(page.url|firstSegment) !== -1 %}
-                <link rel="stylesheet" href="/assets/css/{{ page.url|firstSegment }}.css">
+                <link rel="stylesheet" href="/assets/css/default/{{ page.url|firstSegment }}.css">
             {% endif %}
         {% endif %}
     </head>
     <body id="{{ page.url|firstSegment }}">
-        <header></header>
         <nav>
             <details>
                 <summary>
                     <svg width="20" height="20" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-                        <path d="{{ paw }}"></svg>Navigation</summary>
-                    <a href="../">
-                        <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg">
-                            <path d="M 4 11 L 12 5 L 15 5 L 9 10 L 28 10 L 28 12 L 9 12 L 15 17 L 12 17 Z"></path>
-                        </svg>
-                        Back
-                    </a>
+                        <path d="{{ paw }}"></svg>
+                        Navigation
+                    </summary>
                     {% set currentUrl %}{{ page.url }}{% endset %}
                     {% set sortedPages = collections.pages|sort(attribute='data.order') %}
-                    <ul>
-                        {% for page in sortedPages %}
-                            <li>
-                                <a {% if currentUrl === page.url %} aria-current="page" {% endif %} href="{{ page.url }}">
-                                    <svg width="20" height="20" viewbox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
-                                        <path d="{{ page.data.icon }}"></path>
-                                    </svg>
-                                    {{ page.data.title }}</a>
+                    <ul role="list">
+                        <li>
+                            <a href="../">
+                                <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg">
+                                    <path d="M 4 11 L 12 5 L 15 5 L 9 10 L 28 10 L 28 12 L 9 12 L 15 17 L 12 17 Z"></path>
+                                </svg>
+                                Back
+                            </a>
+                        </li>
+                        <li>
+                            <button id="theme-toggle">
+                                <svg width="20" height="20" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                                    <path d="{{ meow }}"></svg>
+                                    Toggle theme
+                                </button>
                             </li>
-                        {% endfor %}
+                            {% for page in sortedPages %}
+                                <li>
+                                    <a {% if currentUrl === page.url %} aria-current="page" {% endif %} href="{{ page.url }}">
+                                        <svg width="20" height="20" viewbox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+                                            <path d="{{ page.data.icon }}"></path>
+                                        </svg>
+                                        {{ page.data.title }}</a>
+                                </li>
+                            {% endfor %}
+                            <script src="/assets/js/theme.js"></script>
+                        </li>
                     </ul>
                 </details>
                 <details>
                     <summary>
                         <svg width="20" height="20" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-                            <path d="{{ paw }}"></svg>Outgoing</summary>
-                        <ul>
+                            <path d="{{ paw }}"></svg>
+                            Outgoing
+                        </summary>
+                        <ul role="list">
                             {% for item in outgoing.items %}
                                 <li>
                                     <a href="{{ item.src }}"><img src="{{ item.icon }}" alt="">{{ item.title }}</a>
@@ -67,7 +83,6 @@ paw: "m 15.700739,16.184194 c 0,4.483 -2.555,2.038 -5.7060001,2.038 -3.151,0 -5.
                 <main>
                     {{ content | safe }}
                 </main>
-                <footer></footer>
             </body>
         </html>
     </body>
diff --git a/_src/_includes/gallery.njk b/_src/_includes/gallery.njk
index 93f4897..57f3811 100644
--- a/_src/_includes/gallery.njk
+++ b/_src/_includes/gallery.njk
@@ -7,9 +7,9 @@ icon: "M 30 26 L 27 26 L 21 14 L 16 23 L 11 17 L 5 26 L 2 26 L 2 2 Q 2 2 10 6 A
     <h3>{{ page.fileSlug }}</h3>
     <section>
         {% for image in images %}
-            <a href="{{ image.src }}" {% if image.width %} style="max-width:{{ image.width }}" {% endif %}>
+            <a href="{{ image.src }}">
                 <figure>
-                    <img src="{{ image.src }}" alt="{{ image.alt }}" {% if image.width %}style="image-rendering: pixelated"{% endif %}>
+                    <img src="{{ image.src }}" alt="{{ image.alt }}" {% if image.pixel %}style="image-rendering: pixelated"{% endif %}>
                         <figcaption><time datetime="{{ image.date|ISO }}">{{ image.date|readable }}</time>{{ image.alt }}</figcaption>
                     </figure>
                 </a>
diff --git a/_src/assets/css/citrus/citrus.css b/_src/assets/css/citrus/citrus.css
new file mode 100644
index 0000000..5f95719
--- /dev/null
+++ b/_src/assets/css/citrus/citrus.css
@@ -0,0 +1,45 @@
+@import url("./variables.css");
+@import url("../default/variables.css");
+@import url("./nav.css");
+
+body {
+	background-attachment: local, fixed;
+	background-color: var(--citrus-primary);
+	background-image: var(--checker),
+		linear-gradient(var(--citrus-primary), var(--citrus-secondary));
+	background-size: 32px, contain;
+}
+body > nav {
+	background-attachment: fixed;
+	background-blend-mode: screen;
+	background-image: var(--dot),
+		linear-gradient(var(--citrus-primary), var(--citrus-secondary) 20%);
+	background-size: 6px;
+	& a,
+	button {
+		background-image: linear-gradient(
+			var(--citrus-light),
+			var(--citrus-primary) 20%,
+			var(--citrus-primary) 80%,
+			var(--citrus-light) 100%
+		);
+		border-radius: 0 1rem 1rem 0;
+		box-shadow: 0 0 0 2px var(--citrus-dark),
+			inset 0 0 8px 2px var(--citrus-primary);
+		color: var(--citrus-dark) !important;
+		margin: 0 0 var(--pad-sm) 0 !important;
+		&[aria-current] {
+			background-image: linear-gradient(
+				darkorange,
+				var(--citrus-dark) 10%,
+				chocolate
+			);
+			box-shadow: 0 0 0 2px var(--citrus-dark),
+				inset 0 0 4px 2px var(--citrus-dark);
+			color: var(--citrus-light) !important;
+		}
+		&:is(:hover, :focus):not([aria-current="page"]) {
+			box-shadow: 0 0 0 2px var(--citrus-dark);
+		}
+	}
+}
diff --git a/_src/assets/css/citrus/nav.css b/_src/assets/css/citrus/nav.css
new file mode 100644
index 0000000..8f1cc1e
--- /dev/null
+++ b/_src/assets/css/citrus/nav.css
@@ -0,0 +1,12 @@
+nav {
+	padding: 0 var(--pad-xl) var(--pad-xl) 0 !important;
+    & ul {
+        margin: 0 !important;
+    }
+	& details {
+		border: 0 !important;
+	}
+	& a, button {
+        border: 0 !important;
+	}
+}
diff --git a/_src/assets/css/citrus/variables.css b/_src/assets/css/citrus/variables.css
new file mode 100644
index 0000000..c32ac93
--- /dev/null
+++ b/_src/assets/css/citrus/variables.css
@@ -0,0 +1,10 @@
+:root {
+	--citrus-primary: rgb(255, 190, 0);
+	--citrus-secondary: rgb(255, 110, 0);
+	--citrus-light: rgb(255, 236, 180);
+	--citrus-dark: rgb(105, 50, 0);
+	--checker: url('/assets/img/theme/citrus/checker.png');
+	--checker-dark: url('/assets/img/theme/citrus/checker-dark.png');
+	--dot: url('/assets/img/theme/citrus/dot.png');
+	--dot-dark: url('/assets/img/theme/citrus/dot-dark.png');
+}
\ No newline at end of file
diff --git a/_src/assets/css/blog.css b/_src/assets/css/default/blog.css
similarity index 87%
rename from _src/assets/css/blog.css
rename to _src/assets/css/default/blog.css
index 0dbf953..261656f 100644
--- a/_src/assets/css/blog.css
+++ b/_src/assets/css/default/blog.css
@@ -15,37 +15,31 @@ article {
 		border-radius: var(--round);
 		width: 66%;
 	}
-	& p[aria-label="Post warning"] {
-		border-style: solid;
-		border-width: 2px;
-		border-radius: var(--pad-sm);
-		padding: var(--pad-sm) 0;
+	& [aria-label="Post warning"] {
 		font-size: 1.4rem;
 		font-weight: bold;
 		text-align: center;
-
+		font-family: monospace;
 		&::before,
 		&::after {
-			content: "⚠️";
+			content: "";
+			display: inherit;
+			border-width: 2px;
+			border-style: dashed;
 		}
 	}
-
-	& aside,
-	[aria-label="Addendum"] {
-		margin: var(--pad-l) 0;
+}
+[aria-label="Addendum"], [aria-label="Post warning"], article aside {
+	margin: var(--pad-l) 0;
+	padding: var(--pad-l);
+}
+article > [aria-label="Addendum"] {
 		border-image-slice: 1;
 		border-image-width: 2px;
 		border-image-outset: 4px;
-		padding: var(--pad-l);
-	}
-}
-
-article > [aria-label="Addendum"] {
 	& > p:first-child {
 		display: flex;
-		justify-content: center;
-		margin-block-start: 0;
-		font-weight: bold;
+		text-align: center;
 	}
 }
 
@@ -119,7 +113,6 @@ article > [aria-label="Postscript"] {
 		gap: var(--pad-l);
 		margin: 0;
 		padding: 0;
-		list-style-type: none;
 	}
 
 	& li p {
diff --git a/_src/assets/css/default.css b/_src/assets/css/default/default.css
similarity index 57%
rename from _src/assets/css/default.css
rename to _src/assets/css/default/default.css
index b9c803b..d63114f 100644
--- a/_src/assets/css/default.css
+++ b/_src/assets/css/default/default.css
@@ -1,8 +1,6 @@
-@import url("/assets/css/variables.css");
-@import url("/assets/css/nav.css");
-@import url("/assets/css/theme-light.css");
-@import url("/assets/css/theme-dark.css");
-@import url("/assets/css/mobile.css");
+@import url("./variables.css");
+@import url("./nav.css");
+@import url("./mobile.css");
 :root {
 	--view: 18rem;
 }
@@ -12,13 +10,16 @@ body {
 	font-size: 100%;
 	margin: 0;
 	padding: 0;
-	& a {
-		transition: background-color var(--trans), border-color var(--trans), color var(--trans);
+	& a, button {
+		&:is(:hover, :focus) {
+			outline: 0;
+		}
 	}
 }
 
 main {
-	padding: var(--pad-xl) var(--pad-xl) 4rem calc(var(--view) + var(--pad-xl));
+	padding: var(--pad-xl);
+	padding-left: calc(var(--view) + var(--pad-xl));
 	overflow: hidden;
 }
 
@@ -31,6 +32,12 @@ article {
 	& a {
 		font-weight: 500;
 	}
+	& a:has(figure) {
+		border-radius: var(--round);
+		& figure {
+			border-color: inherit;
+		}
+	}
 
 	& s {
 		text-decoration-style: line-through;
@@ -40,7 +47,6 @@ article {
 	& ul {
 		& li {
 			margin: 0;
-
 			& p {
 				margin: 0;
 			}
@@ -72,13 +78,13 @@ article {
 		padding: var(--pad-m);
 		white-space: pre-wrap;
 		word-break: break-word;
+		border-style: solid;
+		border-width: 2px;
 	}
 
 	& pre,
 	code:not(pre *) {
 		transition: background-color var(--trans), border-color var(--trans);
-		border-style: solid;
-		border-width: 2px;
 		border-radius: var(--round);
 		font-weight: bold;
 	}
@@ -103,6 +109,9 @@ article {
 		border-radius: var(--round);
 		display: flex;
 		flex-direction: column;
+		& img {
+			border-radius: inherit;
+		}
 	}
 	& section {
 		& a:has(figure) {
@@ -120,84 +129,6 @@ article {
 	}
 }
 
-/* Navigation */
-body > nav {
-	display: flex;
-	flex-direction: column;
-	overflow: hidden;
-	padding: 1rem;
-	position: fixed;
-	top: 0;
-	width: var(--view);
-	height: 100%;
-}
-
-body > nav ul {
-	margin: 0;
-	padding: 0;
-}
-
-nav > details {
-	font-size: 1.4rem;
-}
-nav > details > summary::marker {
-	content: none;
-}
-
-body > nav ul li {
-	display: inherit;
-	flex-direction: row;
-}
-
-body > nav a {
-	display: flex;
-	font-size: 1.125rem;
-	font-weight: bold;
-	height: var(--pad-xl);
-	line-height: var(--pad-xl);
-}
-
-details {
-	cursor: pointer;
-}
-
-/* Navigation > Icons */
-svg {
-	fill: currentColor;
-	stroke: currentColor;
-	stroke-width: 0;
-}
-
-body > nav li img {
-	border-radius: 100%;
-}
-
-body > nav a svg,
-body > nav li img,
-body > nav summary svg {
-	margin: 0 8px 0 8px;
-	width: 20px;
-	height: 20px;
-}
-
-body > nav li img,
-body > nav a svg {
-	align-self: center;
-}
-
-body > nav details {
-	display: flex;
-	align-items: center;
-}
-
-body > nav > ul > svg {
-	overflow: visible;
-	text-anchor: start;
-}
-
-ul:has(img, svg):not(article ul) {
-	list-style-type: none;
-}
 :is(main article, main section):not(:last-child) {
 	margin-bottom: var(--pad-xl);
 }
@@ -208,3 +139,7 @@ img[src*="/assets/img/flag/"] {
 	border-width: 2px;
 	border-color: #fff;
 }
+a:has(img[src*="/assets/img/button"]):is(:hover, :focus) img {
+	transform: translateY(-4px);
+	transition: var(--trans);
+}
diff --git a/_src/assets/css/gallery.css b/_src/assets/css/default/gallery.css
similarity index 84%
rename from _src/assets/css/gallery.css
rename to _src/assets/css/default/gallery.css
index 7b712a1..229820f 100644
--- a/_src/assets/css/gallery.css
+++ b/_src/assets/css/default/gallery.css
@@ -25,9 +25,7 @@
 	& a {
 		display: block;
 		text-decoration: unset;
-		border-radius: var(--round);
 		& figure {
-			border-radius: inherit;
 			margin: 0;
 			padding: var(--pad-sm);
 			border-width: 2px;
@@ -38,7 +36,6 @@
 				height: var(--thumb);
 				border-bottom: unset;
 				object-fit: contain;
-				border-radius: inherit;
 			}
 
 			& figcaption {
@@ -64,10 +61,8 @@
 		margin: var(--pad-l) 0;
 		& a {
 			display: flex;
-			height: max-content;
-			border-radius: var(--round);
+			width: calc(var(--post) - var(--view));
 			flex-direction: column;
-			max-width: calc(var(--post) - var(--view));
 		}
 	}
 	& time {
diff --git a/_src/assets/css/home.css b/_src/assets/css/default/home.css
similarity index 93%
rename from _src/assets/css/home.css
rename to _src/assets/css/default/home.css
index 417e714..5d4d42f 100644
--- a/_src/assets/css/home.css
+++ b/_src/assets/css/default/home.css
@@ -18,9 +18,10 @@
 #pkmn {
 	display: flex;
 	flex-wrap: wrap;
+	justify-content: center;
 	background-image: url("/assets/img/pkmn/bg/box.png");
 	border-radius: 5px;
-	width: max-content;
+	width: fit-content;
 	border-bottom-color: #78a068;
 	border-left-color: #c8f8c0;
 	border-right-color: #78a068;
@@ -64,7 +65,7 @@ body [id]:not(:nth-child(1)) ul {
 #pansexual {
 	background-image: linear-gradient(#f09 33.33%, #ffd700 0 66.66%, #00bfff 0);
 }
-#intro {
+#bio {
 	& p,
 	ul {
 		font-family: "Urbanist", sans-serif;
@@ -115,18 +116,12 @@ body [id]:not(:nth-child(1)) ul {
 	& ul {
 		gap: 1rem;
 		padding: 0;
-		list-style-type: none;
 	}
 	& a {
-		outline: none;
 		display: flex;
 		padding: inherit;
 		margin: 0;
 	}
-	& a:is(:hover, :focus) img {
-		transform: translateY(-4px);
-		transition: var(--trans);
-	}
 }
 #collection div:has(img)::after {
 	content: url("/assets/img/icon/shortcut.png");
diff --git a/_src/assets/css/index.css b/_src/assets/css/default/index.css
similarity index 66%
rename from _src/assets/css/index.css
rename to _src/assets/css/default/index.css
index c9592b5..3d5f302 100644
--- a/_src/assets/css/index.css
+++ b/_src/assets/css/default/index.css
@@ -1,6 +1,6 @@
-@import url("/assets/css/variables.css");
-@import url("/assets/css/theme-light.css");
-@import url("/assets/css/theme-dark.css");
+@import url("./variables.css");
+@import url("./theme-light.css");
+@import url("./theme-dark.css");
 
 #index {
 	width: 100%;
@@ -12,7 +12,8 @@
 		align-items: center;
 		height: 100vh;
 		width: inherit;
-		& p {
+		flex-direction: column;
+		& a {
 			font-family: "Urbanist", sans-serif;
 			font-size: 500%;
 			margin: 0;
@@ -26,4 +27,11 @@
 			}
 		}
 	}
+	& footer {
+		position: absolute;
+		bottom: var(--pad-l);
+		& p {
+			text-align: center;
+		}
+	}
 }
diff --git a/_src/assets/css/mobile.css b/_src/assets/css/default/mobile.css
similarity index 79%
rename from _src/assets/css/mobile.css
rename to _src/assets/css/default/mobile.css
index 139dba9..b28dc43 100644
--- a/_src/assets/css/mobile.css
+++ b/_src/assets/css/default/mobile.css
@@ -2,14 +2,12 @@
 	/* gallery.css */
 	#art section:has(a:nth-child(n + 2)) {
 		flex-direction: column !important;
-		width: 100% !important;
+		& a {
+			width: 100%;
+		}
 	}
 }
 @media screen and (max-width: 920px) {
-	/* gallery .css */
-	#art section {
-		align-self: center !important;
-	}
 	/* blog.css */
 	article aside {
 		float: none !important;
@@ -25,7 +23,7 @@
 	[aria-label="Postscript"] {
 		& p {
 			margin-right: unset !important;
-			&> img {
+			& > img {
 				height: auto !important;
 				max-height: var(--view) !important;
 			}
@@ -59,8 +57,7 @@
 
 	body > nav {
 		flex-direction: row !important;
-		top: 0 !important;
-		border-right: 0 !important;
+		border: 0 !important;
 		width: 100% !important;
 		& details {
 			height: fit-content !important;
@@ -70,18 +67,28 @@
 	body::after {
 		content: "" !important;
 	}
+	/* gallery.css */
+	#art a:has(img) {
+		width: 100% !important
+	}
 	/* home.css */
 	#collection {
 		display: flex !important;
 		flex-direction: column !important;
+		& ul {
+			justify-content: center !important;
+		}
+		& li a {
+			padding: 0 !important;
+		}
 	}
 }
-
-@media screen and (max-width: 400px) {
+@media screen and (max-width: 450px) {
 	article {
-		padding: var(--pad-l) !important;
+		padding: var(--pad-sm) !important;
+		background-color: unset !important;
+		border: 0 !important;
 	}
-
 	body > nav {
 		flex-direction: column !important;
 		justify-content: start !important;
diff --git a/_src/assets/css/nav.css b/_src/assets/css/default/nav.css
similarity index 59%
rename from _src/assets/css/nav.css
rename to _src/assets/css/default/nav.css
index bf08b4b..9c53712 100644
--- a/_src/assets/css/nav.css
+++ b/_src/assets/css/default/nav.css
@@ -27,11 +27,68 @@ body::after {
 	-webkit-mask-position-x: 0;
 	-webkit-mask-position-y: bottom;
 }
+body > nav {
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+	padding: 1rem;
+	position: fixed;
+	width: var(--view);
+	height: 100%;
+	& * svg,
+	li img {
+		margin: 0 8px 0 8px;
+		width: 20px;
+		align-self: center;
+	}
+	& details {
+		cursor: pointer;
+		display: flex;
+		& summary::marker {
+			content: none;
+		}
+	}
+	& ul {
+		margin: var(--pad-sm);
+		padding: 0;
+		& li, button {
+			padding: 0;
+			align-items: center;
+			margin-bottom: inherit;
+			& img {
+				border-radius: 100%;
+			}
+		}
+	}
+	& svg {
+		fill: currentColor;
+		stroke: currentColor;
+		stroke-width: 0;
+	}
+	& details {
+		font-size: 1.4rem;
+	}
+	& a,
+	button {
+		display: flex;
+		font-size: 1.125rem;
+		width: 100%;
+		font-weight: bold;
+		height: var(--pad-xl);
+		line-height: var(--pad-xl);
+	}
+}
 
 body {
 	font-family: "Rubik", sans-serif;
 	& > nav {
 		gap: var(--pad-m);
+		& a,
+		button {
+			border-style: solid;
+			border-width: 2px;
+			border-radius: var(--round);
+		}
 		& details {
 			gap: inherit;
 			border-radius: var(--round);
@@ -39,7 +96,6 @@ body {
 		}
 		& details > summary {
 			display: flex;
-			align-items: center;
 			justify-content: center;
 			padding: 0 var(--pad-lm) 0 0;
 			height: var(--pad-xl);
@@ -64,14 +120,6 @@ body {
 					transform: rotate(45deg);
 				}
 			}
-
-			& a {
-				border-style: solid;
-				border-width: 2px;
-				margin: 0 var(--pad-sm);
-				margin-bottom: var(--pad-sm);
-				border-radius: var(--round);
-			}
 		}
 	}
 }
diff --git a/_src/assets/css/default/system.css b/_src/assets/css/default/system.css
new file mode 100644
index 0000000..7a7b182
--- /dev/null
+++ b/_src/assets/css/default/system.css
@@ -0,0 +1,2 @@
+@import url("./theme-light.css");
+@import url("./theme-dark.css");
\ No newline at end of file
diff --git a/_src/assets/css/theme-dark.css b/_src/assets/css/default/theme-dark.css
similarity index 73%
rename from _src/assets/css/theme-dark.css
rename to _src/assets/css/default/theme-dark.css
index b5a84c3..d7970c6 100644
--- a/_src/assets/css/theme-dark.css
+++ b/_src/assets/css/default/theme-dark.css
@@ -8,11 +8,6 @@
 			box-shadow: inset 0 0 0 2px var(--secondary-500);
 			background-color: var(--secondary-300);
 		}
-		& figure {
-			color: var(--secondary-light-400);
-			border-color: var(--secondary-600);
-			background-color: var(--secondary-300);
-		}
 
 		& s,
 		u {
@@ -20,7 +15,8 @@
 		}
 
 		& code:not(pre *) {
-			background-color: var(--secondary-400);
+			color: var(--secondary-400);
+			background-color: var(--secondary-light-400);
 		}
 
 		& pre {
@@ -37,15 +33,43 @@
 		code {
 			border-color: var(--secondary-400);
 		}
+		/* blog.css */
+		& [aria-label="Postscript"]::after {
+			background-color: var(--secondary);
+		}
+		& [aria-label="Post warning"] {
+			background-color: var(--secondary);
+			color: var(--secondary-100);
+			&::before,
+			&::after {
+				background-color: var(--secondary);
+			}
+		}
+		& [aria-label="Addendum"] {
+			box-shadow: inset 0 0 0 2px var(--secondary);
+			border-image-source: linear-gradient(
+				45deg,
+				var(--secondary),
+				var(--secondary-600),
+				var(--secondary)
+			);
+			background-color: var(--secondary-400);
+		}
 	}
-
+	#posts {
+		& p:not(:last-child) {
+			color: var(--secondary-light-700);
+		}
+	}
+	/* default.css */
 	body {
 		background-color: var(--secondary-100);
 		color: var(--secondary-light-300);
-		& a:not(article *) {
-			color: var(--secondary);
+
+		& a:not(article p *, #badges *, [aria-current]), button {
+			color: var(--secondary-light-400);
 			border-color: var(--secondary-600);
-			background-color: var(--secondary-400);
+			background-color: var(--secondary-300);
 			&:is(:hover, :focus) {
 				color: var(--secondary-light-500);
 				border-color: currentColor;
@@ -88,64 +112,7 @@
 			}
 		}
 	}
-	/* blog.css */
-	article {
-		& [aria-label="Postscript"]::after {
-			background-color: var(--secondary);
-		}
-		& p[aria-label="Post warning"] {
-			border-color: currentColor;
-			background-color: var(--secondary-100);
-			color: var(--secondary);
-		}
-
-		& [aria-label="Addendum"] {
-			box-shadow: inset 0 0 0 2px var(--secondary);
-			border-image-source: linear-gradient(
-				45deg,
-				var(--secondary),
-				var(--secondary-600),
-				var(--secondary)
-			);
-			background-color: var(--secondary-400);
-		}
-	}
-
-	#posts {
-		& p:not(:last-child) {
-			color: var(--secondary-light-700);
-		}
-	}
-	/* gallery.css */
-	#artworks {
-		& a {
-			transition: color var(--trans), background-color var(--trans),
-				border-color var(--trans);
-
-			& figure {
-				color: var(--secondary-light-400);
-				border-color: var(--secondary-600);
-				background-color: var(--secondary-300);
-
-				& time {
-					color: var(--secondary-light-500);
-				}
-
-				& figcaption {
-					color: var(--secondary-light-500);
-				}
-
-				&:is(:hover, :focus) {
-					border-color: currentColor;
-					background-color: var(--secondary-500);
-				}
-			}
-		}
-	}
 	/* home.css */
-	#badges a:is(:hover, :focus) img {
-		filter: drop-shadow(4px 6px 0 var(--secondary-500));
-	}
 	#collection {
 		& a:is(:hover, :focus) {
 			box-shadow: 0 0 0 1px currentColor;
@@ -156,4 +123,7 @@
 				color-mix(in lch, transparent, var(--secondary-500) 70%);
 		}
 	}
+	a:has(img[src*="/assets/img/button"]):is(:hover, :focus) img {
+		filter: drop-shadow(4px 6px 0 var(--secondary-500));
+	}
 }
diff --git a/_src/assets/css/theme-light.css b/_src/assets/css/default/theme-light.css
similarity index 72%
rename from _src/assets/css/theme-light.css
rename to _src/assets/css/default/theme-light.css
index 3121286..5918811 100644
--- a/_src/assets/css/theme-light.css
+++ b/_src/assets/css/default/theme-light.css
@@ -8,11 +8,6 @@
 			box-shadow: inset 0 0 0 2px var(--primary-500);
 			background-color: var(--primary-300);
 		}
-		& figure {
-			color: var(--primary-dark-400);
-			border-color: var(--primary-600);
-			background-color: var(--primary-300);
-		}
 
 		& s,
 		u {
@@ -20,7 +15,8 @@
 		}
 
 		& code:not(pre *) {
-			background-color: var(--primary-400);
+			color: var(--primary-400);
+			background-color: var(--primary-dark-400);
 		}
 
 		& pre {
@@ -37,13 +33,40 @@
 		code {
 			border-color: var(--primary-400);
 		}
+		/* blog.css */
+		& [aria-label="Postscript"]::after {
+			background-color: var(--primary);
+		}
+		& [aria-label="Post warning"] {
+			background-color: var(--primary);
+			color: var(--primary-dark-100);
+			&::before,
+			&::after {
+				background-color: var(--primary);
+			}
+		}
+		& [aria-label="Addendum"] {
+			box-shadow: inset 0 0 0 2px var(--primary);
+			border-image-source: linear-gradient(
+				45deg,
+				var(--primary),
+				var(--primary-600),
+				var(--primary)
+			);
+			background-color: var(--primary-400);
+		}
 	}
-
+	#posts {
+		& p:not(:last-child) {
+			color: var(--primary-dark-700);
+		}
+	}
+	/* default.css */
 	body {
 		background-color: var(--primary-100);
 		color: var(--primary-dark-300);
-		& a:not(article *) {
-			color: var(--primary);
+		& a:not(article p *, #badges *, [aria-current]), button {
+			color: var(--primary-dark-400);
 			border-color: var(--primary-600);
 			background-color: var(--primary-400);
 			&:is(:hover, :focus) {
@@ -55,7 +78,7 @@
 		& > nav {
 			border-right: 1px solid var(--primary);
 			&::before,
-			::after {
+			&::after {
 				background-color: var(--primary);
 			}
 		}
@@ -87,64 +110,7 @@
 			}
 		}
 	}
-	/* blog.css */
-	article {
-		& [aria-label="Postscript"]::after {
-			background-color: var(--primary);
-		}
-		& p[aria-label="Post warning"] {
-			border-color: currentColor;
-			background-color: var(--primary-dark-200);
-			color: var(--primary);
-		}
-
-		& [aria-label="Addendum"] {
-			box-shadow: inset 0 0 0 2px var(--primary);
-			border-image-source: linear-gradient(
-				45deg,
-				var(--primary),
-				var(--primary-600),
-				var(--primary)
-			);
-			background-color: var(--primary-400);
-		}
-	}
-
-	#posts {
-		& p:not(:last-child) {
-			color: var(--primary-dark-700);
-		}
-	}
-	/* gallery.css */
-	#artworks {
-		& a {
-			transition: color var(--trans), background-color var(--trans),
-				border-color var(--trans);
-
-			& figure {
-				color: var(--primary-dark-400);
-				border-color: var(--primary-600);
-				background-color: var(--primary-300);
-
-				& time {
-					color: var(--primary-dark-500);
-				}
-
-				& figcaption {
-					color: var(--primary-dark-500);
-				}
-
-				&:is(:hover, :focus) {
-					border-color: currentColor;
-					background-color: var(--primary-500);
-				}
-			}
-		}
-	}
 	/* home.css */
-	#badges a:is(:hover, :focus) img {
-		filter: drop-shadow(4px 6px 0 var(--primary-500));
-	}
 	#collection {
 		& a:is(:hover, :focus) {
 			box-shadow: 0 0 0 1px currentColor;
@@ -155,4 +121,7 @@
 				color-mix(in lch, transparent, var(--primary-dark-500) 30%);
 		}
 	}
+	a:has(img[src*="/assets/img/button"]):is(:hover, :focus) img {
+		filter: drop-shadow(4px 6px 0 var(--primary-500));
+	}
 }
diff --git a/_src/assets/css/variables.css b/_src/assets/css/default/variables.css
similarity index 100%
rename from _src/assets/css/variables.css
rename to _src/assets/css/default/variables.css
diff --git a/_src/assets/img/theme/citrus/checker-dark.png b/_src/assets/img/theme/citrus/checker-dark.png
new file mode 100644
index 0000000..6e18ab3
Binary files /dev/null and b/_src/assets/img/theme/citrus/checker-dark.png differ
diff --git a/_src/assets/img/theme/citrus/checker.png b/_src/assets/img/theme/citrus/checker.png
new file mode 100644
index 0000000..6b427f3
Binary files /dev/null and b/_src/assets/img/theme/citrus/checker.png differ
diff --git a/_src/assets/img/theme/citrus/dot-dark.png b/_src/assets/img/theme/citrus/dot-dark.png
new file mode 100644
index 0000000..edb6b9f
Binary files /dev/null and b/_src/assets/img/theme/citrus/dot-dark.png differ
diff --git a/_src/assets/img/theme/citrus/dot.png b/_src/assets/img/theme/citrus/dot.png
new file mode 100644
index 0000000..5d5048c
Binary files /dev/null and b/_src/assets/img/theme/citrus/dot.png differ
diff --git a/_src/assets/img/theme/citrus/enter.png b/_src/assets/img/theme/citrus/enter.png
new file mode 100644
index 0000000..ee53c97
Binary files /dev/null and b/_src/assets/img/theme/citrus/enter.png differ
diff --git a/_src/assets/img/theme/citrus/sundae.png b/_src/assets/img/theme/citrus/sundae.png
new file mode 100644
index 0000000..a15f33f
Binary files /dev/null and b/_src/assets/img/theme/citrus/sundae.png differ
diff --git a/_src/assets/js/theme.js b/_src/assets/js/theme.js
new file mode 100644
index 0000000..51c6789
--- /dev/null
+++ b/_src/assets/js/theme.js
@@ -0,0 +1,24 @@
+const basePath = "/assets/css";
+const themeToggle = document.getElementById("theme-toggle");
+const themeStylesheet = document.getElementById("custom");
+
+const themes = [
+	{ name: "system", file: "default/system.css" },
+	{ name: "citrus", file: "citrus/citrus.css" },
+];
+
+let currentTheme = localStorage.getItem("theme") || themes[0].name;
+setTheme(currentTheme);
+
+function setTheme(themeName) {
+	const theme = themes.find(t => t.name === themeName);
+	if (theme) {
+		themeStylesheet.href = `${basePath}/${theme.file}`;
+	}
+}
+
+themeToggle.addEventListener("click", () => {
+	currentTheme = themes[(themes.findIndex(t => t.name === currentTheme) + 1) % themes.length].name;
+	setTheme(currentTheme);
+	localStorage.setItem("theme", currentTheme);
+});
\ No newline at end of file
diff --git a/_src/data/art/artwork/NT sunny spritesheet.md b/_src/data/art/artwork/NT sunny spritesheet.md
index 01af6c3..bc11c1b 100644
--- a/_src/data/art/artwork/NT sunny spritesheet.md	
+++ b/_src/data/art/artwork/NT sunny spritesheet.md	
@@ -3,5 +3,5 @@ images:
   - src: /assets/img/art/nt_sundae_spritesheet.gif
     alt: Various pixel art animations of Sundae as a character from Nuclear Throne.
     date: 2021-01-25
-    width: 1080
+    pixel: true
 ---
diff --git a/_src/data/art/artwork/PETSCII sunny.md b/_src/data/art/artwork/PETSCII sunny.md
index 4ea0d49..a57bff7 100644
--- a/_src/data/art/artwork/PETSCII sunny.md	
+++ b/_src/data/art/artwork/PETSCII sunny.md	
@@ -2,12 +2,12 @@
 images:
   - src: /assets/img/art/petscii_sundae1.png
     alt: Front-facing bust portrait of Sundae. His hair looks a bit ruffled up.
-    width: 240px
     date: 2023-02-26
+    pixel: true
   - src: /assets/img/art/petscii_sundae-redo1.png
     alt: Revisioned front-facing bust portrait of Sundae, with shinier hair.
-    width: 240px
     date: 2023-04-14
+    pixel: true
 ---
 
 A hybrid pixel and PETSCII portrait of sunny. I'm quite fond of both versions!
diff --git a/_src/data/art/artwork/acnl sunny.md b/_src/data/art/artwork/acnl sunny.md
index d89ae01..54ab938 100644
--- a/_src/data/art/artwork/acnl sunny.md	
+++ b/_src/data/art/artwork/acnl sunny.md	
@@ -3,15 +3,15 @@ images:
   - src: /assets/img/art/acnl_sundae.png
     alt: Bust portrait of Sundae smiling at the viewer with his eyes closed, outlined in rainbow colors and a secondary white outline around that.
     date: 2021-09-09
-    width: 320px
+    pixel: true
   - src: /assets/img/art/acnl_sundae-redo1.png
     alt: Revisioned bust portrait of Sundae, smiling at the viewer with his eyes closed, superimposed on the rainbow pride flag.
     date: 2022-01-01
-    width: 320px
+    pixel: true
   - src: /assets/img/art/acnl_sundae-redo2.png
     alt: Latest revision with the view from the front, superimposed on the Agender pride flag.
     date: 2024-10-28
-    width: 320px
+    pixel: true
 ---
 
 ![Rainbow pride flag](/assets/img/flag/rainbow.svg)
diff --git a/_src/data/art/artwork/lick icon.md b/_src/data/art/artwork/lick icon.md
index bfc7f17..3110fc7 100644
--- a/_src/data/art/artwork/lick icon.md	
+++ b/_src/data/art/artwork/lick icon.md	
@@ -3,7 +3,7 @@ images:
   - src: /assets/img/art/sundae_lick.gif
     alt: Pixel art animation of Sundae licking the screen.
     date: 2025-03-18
-    width: 480
+    pixel: true
 ---
 
 I got bored one day and I decided on a whim to make my own lick icon from {%ai"https://www.deviantart.com/sketchmichi/art/Lick-icon-base-201253097"%}Michi's lick icon base{%endai%}.
diff --git a/_src/data/art/artwork/sunny doodle.md b/_src/data/art/artwork/sunny doodle.md
index 464d8ac..d870daf 100644
--- a/_src/data/art/artwork/sunny doodle.md	
+++ b/_src/data/art/artwork/sunny doodle.md	
@@ -3,6 +3,7 @@ images:
   - src: /assets/img/art/sundae.png
     alt: Bust portrait pixel art doodle of Sundae in monochrome and dithering.
     date: 2020-05-06
+    pixel: true
 ---
 
 The first doodle of the boy, done in Microsoft Paint.
diff --git a/_src/data/art/artwork/sunny mimiga.md b/_src/data/art/artwork/sunny mimiga.md
index 6f88f04..5547000 100644
--- a/_src/data/art/artwork/sunny mimiga.md	
+++ b/_src/data/art/artwork/sunny mimiga.md	
@@ -3,5 +3,5 @@ images:
   - src: /assets/img/art/sundae_cs.png
     alt: Pixel art avatar of Sundae as a character from Cave Story, using Sue Sakamoto's portrait as a base.
     date: 2020-11-12
-    width: 480
+    pixel: true
 ---
diff --git a/_src/data/art/artwork/vector bun.md b/_src/data/art/artwork/vector bun.md
index 63b2866..5f57153 100644
--- a/_src/data/art/artwork/vector bun.md	
+++ b/_src/data/art/artwork/vector bun.md	
@@ -16,4 +16,4 @@ Although, I was surprised how cute I could make an avatar that's not restricted
 
 Color palette used: {%ai"https://lospec.com/palette-list/cs112-v2"%}CS112-V2{%endai%}
 
-<section><a href="/assets/img/blog/bun.png"><figure><img src="/assets/img/blog/bun.png"><figcaption>Reference screenshot of the avatar</figcaption></figure></a></section>
\ No newline at end of file
+<section><a href="/assets/img/blog/bun.png"><figure><img src="/assets/img/blog/bun.png"><figcaption>In-game screenshot of the avatar</figcaption></figure></a></section>
\ No newline at end of file
diff --git a/_src/data/art/fanart/PETSCII kass.md b/_src/data/art/fanart/PETSCII kass.md
index 806c01b..ad34d45 100644
--- a/_src/data/art/fanart/PETSCII kass.md	
+++ b/_src/data/art/fanart/PETSCII kass.md	
@@ -3,6 +3,7 @@ images:
   - src: /assets/img/art/petscii_kass.png
     alt: Side portrait of Kass from The Legend of Zelda Breath of the Wild.
     date: 2023-02-23
+    pixel: true
 ---
 
 A PETSCII rendition of a screenshot that I took in The Legend of Zelda: Breath of the Wild, of Kass looking back at the player.
diff --git a/_src/data/art/fanart/PETSCII lurantis.md b/_src/data/art/fanart/PETSCII lurantis.md
index dbc6057..1f10635 100644
--- a/_src/data/art/fanart/PETSCII lurantis.md	
+++ b/_src/data/art/fanart/PETSCII lurantis.md	
@@ -3,6 +3,7 @@ images:
   - src: /assets/img/art/petscii_lurantis.png
     alt: Front-facing half-length portrait PETSCII artwork of Lurantis from Pokémon, but with a zig-zag mouth.
     date: 2023-02-15
+    pixel: true
 ---
 
 This isn't so much PETSCII as it is pixel art, but it's my first artwork that I've done using {%ai"https://lvllvl.com/"%}lvllvl{%endai%}, which is to say that this is done using a bitmap character set, despite it looking like pixel art.
diff --git a/_src/data/blog/System switching.md b/_src/data/blog/System switching.md
index d41f49c..19a3781 100644
--- a/_src/data/blog/System switching.md	
+++ b/_src/data/blog/System switching.md	
@@ -26,7 +26,7 @@ My main "worries" and/or misconceptions before getting into it were:
 *   learning the different directory structure
 *   issues with my Nvidia GPU
 
-<section>
+<section style="overflow:hidden">
 <p style="background-image: linear-gradient(to right, currentColor, transparent 40ch);background-clip: text;-webkit-background-clip: text;text-fill-color: transparent;-webkit-text-fill-color: transparent; width: max-content;">I had grown tired of Windows and Microsoft as a whole yada yada—</p>
 <div style="background: linear-gradient(to right,transparent, orange 8ch);margin: -3ch auto 0 15ch;background-clip: text;color: transparent;width: max-content;" aria-hidden="true"><sub style="font-size: 1rem;transform: rotate(-2deg);display: inline-flex;">blah blah blah</sub>Microsoft<sup style="font-size: 1rem;transform: rotate(2deg);display: inline-flex;">yada yada</sup><b style="color: orange;margin: -0.6rem 0;font-size: 1.5rem;text-shadow: 5px 5px 0 color-mix(in lch,currentColor, transparent 60%), 10px 10px 0 color-mix(in lch,currentColor, transparent 70%)">SNORE</b></div>
 </section>
diff --git a/_src/data/changelog/2023-03-12.md b/_src/data/changelog/2023-03-12.md
index d62fb51..c1a09da 100644
--- a/_src/data/changelog/2023-03-12.md
+++ b/_src/data/changelog/2023-03-12.md
@@ -5,6 +5,6 @@ title: Version 0
 
 * Added [Home](/home), [Gallery](/gallery) and ~~About~~
   * ~~About~~ contains Pokémon boxes and a small bio
-* Added header
+* Added `header`
   * Added buttons to other pages
   * Added a portrait of Sunny of his PETSCII avatar
diff --git a/_src/data/changelog/2023-03-16.md b/_src/data/changelog/2023-03-16.md
index c6ffa6d..d672b27 100644
--- a/_src/data/changelog/2023-03-16.md
+++ b/_src/data/changelog/2023-03-16.md
@@ -1,6 +1,6 @@
 * Added sidebar
-  * Added buttons to socials
-  * Moved portrait from header to sidebar
+  * Added links to socials
+  * Moved portrait from `header` to sidebar
 * Changed backgrounds
   * Checkerboard pattern for the outer background
   * Tiled icon of Sunny for the inner background
diff --git a/_src/data/changelog/2024-06-11.md b/_src/data/changelog/2024-06-11.md
index 2bbec5f..3748ff6 100644
--- a/_src/data/changelog/2024-06-11.md
+++ b/_src/data/changelog/2024-06-11.md
@@ -20,18 +20,16 @@ title: Version 4
   * Changelog is now Windows 98-themed
 * Changed sidebar
   * Moved to the top left corner
-  * Moved header text for current page next to the top of the sidebar
-  * Moved 88x31 buttons to footer
+  * Moved `header` text for current page next to the top of the sidebar
+  * Moved 88x31 buttons to `footer`
   * `SVG` text uses `CSS` rules instead of inline styling
-* Changed footer
-  * Added a sticker to the footer
+* Changed `footer`
+  * Added a sticker to `footer`
     * Randomized on-page-load
-
-  * Added pride flag backgrounds to the footer
+  * Added pride flag backgrounds to `footer`
     * Randomized on-page-load, and are ones that I identify with. Plus they look pretty and my pages need more than 2 colors to look at
-
 * Changed [Gallery](/gallery)
-  * Centered the dates under artworks
+  * Centered the `date` under artworks
 * Updated my 88x31 button!
 [![](/assets/img/button/sunbun_c.gif "sunbun")](/)
 
diff --git a/_src/data/changelog/2025-05-23.md b/_src/data/changelog/2025-05-23.md
index 6155177..21362ce 100644
--- a/_src/data/changelog/2025-05-23.md
+++ b/_src/data/changelog/2025-05-23.md
@@ -5,17 +5,19 @@ Re-wrote the site, again.
 
 Read the [accompanying blog post](/blog/rewrite-2.0)
 
-* Changed footer
+* Changed `footer`
   * Merged buttons with [Home](/home)
   * Added a few new buttons!
+* Removed `header`
 * Changed ~~About~~
   * Merged with [Home](/home)
-  * Headers are now consistent with blog post headers
   * Fixed the Pokemon box cutting off at lower resolutions
 * Changed sidebar
+  * Reverted back to normal text
+  * Added a pawprint flair
   * Sunny is there again, sitting this time.
 * Changed [Blog](/blog)
-  * Fixed header links not working in blog posts
+  * Fixed `h3 a` links not working in blog posts
   * Added functionality for blog-specific avatars and image attachments to the postscript blurb
   * Removed ~~Art notes~~
     * Merged into gallery entries
diff --git a/_src/index.html b/_src/index.html
index b716966..6feff2b 100644
--- a/_src/index.html
+++ b/_src/index.html
@@ -6,9 +6,9 @@
 		<link rel="icon" href="/assets/img/icon/sundae.png">
 		<meta name="viewport" content="width=device-width, initial-scale=1">
 		<link rel="stylesheet" href="/assets/css/reset.css">
-		<link rel="stylesheet" href="/assets/css/index.css">
+		<link rel="stylesheet" href="/assets/css/default/index.css">
 	</head>
 	<body id="index">
-		<main><a href="/home"><p>enter</p></a></main><a rel="me" href="https://denden.world/@fossilisk" style="display: none">Mastodon</a>
+		<main><a href="/home"><img src="/assets/img/theme/citrus/enter.png"></a><footer><p>This site eats cookies for breakfast.<br><i>nom nom nom</i><br><sub>(only used for simple interactivity)</sub></p></footer></main><a rel="me" href="https://denden.world/@fossilisk" style="display: none">Mastodon</a>
 	</body>
 </html>
diff --git a/_src/pages/blog.html b/_src/pages/blog.html
index 8811f30..f5cf444 100644
--- a/_src/pages/blog.html
+++ b/_src/pages/blog.html
@@ -5,13 +5,14 @@ icon: "M 4 2 L 28 2 L 28 30 L 4 30 Z M 8 8 L 24 8 L 24 6 L 8 6 Z M 8 14 L 24 14
 L 8 18 Z"
 ---
 <section id="posts">
-	<ul>
+	<ul role="list">
 		{% for post in collections.posts reversed %}
 		<li>
-			<a href="{{post.url}}"></svg>{{post.fileSlug}}<p>published:<time
-						datetime="{{post.data.date | ISO }}">{{post.data.date
-						| readable }}</time></p>{% if post.data.modified %}<p>last edited:<time
-						datetime="{{post.data.modified}}">{{post.data.modified | readable}}</time></p>{% endif %}
+			<a href="{{post.url}}"></svg>{{post.fileSlug}}
+				<p>published:<time datetime="{{post.data.date|ISO}}">{{post.data.date|readable}}</time></p>
+				{% if post.data.modified %}
+				<p>last edited:<time datetime="{{post.data.modified}}">{{post.data.modified|readable}}</time></p>
+				{%endif%}
 				<p>{{post.data.description}}</p>
 			</a>
 		</li>
diff --git a/_src/pages/gallery.html b/_src/pages/gallery.html
index f0ee322..ce7384d 100644
--- a/_src/pages/gallery.html
+++ b/_src/pages/gallery.html
@@ -4,43 +4,46 @@ order: 4
 icon: "M 30 26 L 27 26 L 21 14 L 16 23 L 11 17 L 5 26 L 2 26 L 2 2 Q 2 2 10 6 A 1 1 0 0 0 10 13 A 1 1 0 0 0 10 6 L 2 2 L
 30 2 L 30 26 L 30 30 L 2 30 L 2 26"
 ---
+
 <section id="artworks">
-    <h2>Original characters</h2>
-    <ul>
-        {% assign sortedArtworks = collections.artworks | sortByFirstDate %}
-        {% for artwork in sortedArtworks %}
-        <li>
-            <a href="{{ artwork.page.url }}">
-                <figure>
-                    {% if artwork.data.images[0] %}
-                        <img src="{{ artwork.data.images[0].src }}" alt="{{ artwork.data.images[0].alt }}">
-                        <figcaption>{{ artwork.page.fileSlug }}</figcaption>
-                        {% if artwork.data.images[0].date %}
-                            <time datetime="{{ artwork.data.images[0].date | ISO }}">{{ artwork.data.images[0].date | readable }}</time>
-                        {% endif %}
-                    {% endif %}
-                </figure>
-            </a>
-        </li>
-        {% endfor %}
-    </ul>
-    <h2>Fan art</h2>
-    <ul>
-        {% assign sortedFanarts = collections.fanarts | sortByFirstDate %}
-        {% for fanart in sortedFanarts %}
-        <li>
-            <a href="{{ fanart.page.url }}">
-                <figure>
-                    {% if fanart.data.images[0] %}
-                        <img src="{{ fanart.data.images[0].src }}" alt="{{ fanart.data.images[0].alt }}">
-                        <figcaption>{{ fanart.page.fileSlug }}</figcaption>
-                        {% if fanart.data.images[0].date %}
-                            <time datetime="{{ fanart.data.images[0].date | ISO }}">{{ fanart.data.images[0].date | readable }}</time>
-                        {% endif %}
-                    {% endif %}
-                </figure>
-            </a>
-        </li>
-        {% endfor %}
-    </ul>
-</section>
\ No newline at end of file
+	<article>
+		<h2>Original characters</h2>
+		<ul role="list">
+			{% assign sortedArtworks = collections.artworks | sortByFirstDate %} {%
+			for artwork in sortedArtworks %}
+			<li>
+				<a href="{{artwork.page.url}}">
+					<figure>
+						{% if artwork.data.images[0] %}
+						<img src="{{artwork.data.images[0].src}}" alt="{{artwork.data.images[0].alt}}" {%if artwork.data.images[0].pixel%} style="image-rendering: pixelated" {%endif%} />
+						<figcaption>{{artwork.page.fileSlug}}</figcaption>
+						{% if artwork.data.images[0].date %}
+						<time datetime="{{artwork.data.images[0].date | ISO}}">{{artwork.data.images[0].date | readable}}</time>
+						{%endif%} {%endif%}
+					</figure>
+				</a>
+			</li>
+			{% endfor %}
+		</ul>
+	</article>
+	<article>
+		<h2>Fan art</h2>
+		<ul role="list">
+			{% assign sortedFanarts = collections.fanarts | sortByFirstDate %} {% for
+			fanart in sortedFanarts %}
+			<li>
+				<a href="{{fanart.page.url}}">
+					<figure>
+						{% if fanart.data.images[0] %}
+						<img src="{{fanart.data.images[0].src}}" alt="{{fanart.data.images[0].alt}}" />
+						<figcaption>{{fanart.page.fileSlug}}</figcaption>
+						{% if fanart.data.images[0].date %}
+						<time datetime="{{fanart.data.images[0].date | ISO}}">{{fanart.data.images[0].date | readable}}</time>
+						{%endif%} {%endif%}
+					</figure>
+				</a>
+			</li>
+			{% endfor %}
+		</ul>
+	</article>
+</section>
diff --git a/_src/pages/home.html b/_src/pages/home.html
index bc82648..d717615 100644
--- a/_src/pages/home.html
+++ b/_src/pages/home.html
@@ -3,66 +3,70 @@ title: "Home"
 order: 1
 icon: "M12 20 L12 30 4 30 4 12 16 2 28 12 28 30 20 30 20 20 Z"
 ---
-<section id="intro">
-	{% for article in collections.articles %}
-	{{article.content}}
-	{% endfor %}
+
+<section id="bio">
+	{% for article in collections.articles %} {{article.content}} {% endfor %}
 </section>
 <section id="collection">
 	<article>
 		<h3>Games</h3>
-	<ul class="games">
-		{% for item in games.items %}
-		<li>
-			<a href="{{item.src}}">
-				<div><img src="{{item.cover}}" alt="Game icon for {{item.title}}"></div>
-				<span>{{item.title}}</span>
-			</a>
-		</li>
-		{% endfor %}
-	</ul>
-</article>
-<article>
-	<h3>Albums</h3>
-	<ul class="music">
-		{% for item in music.items %}
-		<li>
-			<a href="{{item.src}}">
-				<div><img src="{{item.cover}}"></div>
-				<span>{{item.title}}</span>
-			</a>
-		</li>
-		{% endfor %}
-	</ul>
-</article>
+		<ul class="games" role="list">
+			{% for item in games.items %}
+			<li>
+				<a href="{{item.src}}">
+					<div>
+						<img src="{{item.cover}}" alt="Game icon for {{item.title}}"/>
+					</div>
+					<span>{{item.title}}</span>
+				</a>
+			</li>
+			{% endfor %}
+		</ul>
+	</article>
+	<article>
+		<h3>Albums</h3>
+		<ul class="music" role="list">
+			{% for item in music.items %}
+			<li>
+				<a href="{{item.src}}">
+					<div><img src="{{item.cover}}" /></div>
+					<span>{{item.title}}</span>
+				</a>
+			</li>
+			{% endfor %}
+		</ul>
+	</article>
 </section>
 <section id="badges">
 	<article>
 		<nav>
 			<h3>My buttons!</h3>
-			<ul>
+			<ul role="list">
 				{% for item in 88x31-mine.items %}
 				<li>
-					<a href="{{item.src}}" title="{{item.name}}"><img {%if item.id%}id="{{item.id}}" {%endif%}
-							src="{{item.button}}" alt="{{item.alt}}"></a>
+					<a href="{{item.src}}" title="{{item.name}}">
+						<img {%if item.id%}id="{{item.id}}"{%endif%} src="{{item.button}}" alt="{{item.alt}}"/>
+					</a>
 				</li>
 				{% endfor %}
 			</ul>
 			<h3>Critters!</h3>
-			<ul>
+			<ul role="list">
 				{% for item in 88x31-critters.items %}
 				<li>
-					<a href="{{item.src}}" title="{{item.name}}"><img {%if item.id%}id="{{item.id}}" {%endif%}
-							src="{{item.button}}" alt="{{item.alt}}"></a>
+					<a href="{{item.src}}" title="{{item.name}}">
+						<img {%if item.id%}id="{{item.id}}"{%endif%} src="{{item.button}}" alt="{{item.alt}}"/>
+					</a>
 				</li>
 				{% endfor %}
 			</ul>
 			<h3>Fun!</h3>
-			<ul>
+			<ul role="list">
 				{% for item in 88x31.items %}
 				<li>
-					<a href="{{item.src}}" title="{{item.name}}"><img {%if item.id%}id="{{item.id}}" {%endif%}
-							src="{{item.button}}" alt="{{item.alt}}"></a>
+					<a href="{{item.src}}" title="{{item.name}}">
+						<img {%if item.id%}id="{{item.id}}"{%endif%} src="{{item.button}}" alt="{{item.alt}}"/>
+					</a>
 				</li>
 				{% endfor %}
 			</ul>
@@ -70,6 +74,8 @@ icon: "M12 20 L12 30 4 30 4 12 16 2 28 12 28 30 20 30 20 20 Z"
 			<script src="/assets/js/fox.js"></script>
 			<script src="/assets/js/bob.js"></script>
 		</nav>
-		<div id="pkmn" aria-label="Randomized list of my favorite Pokémon"><script src="/assets/js/poke.js"></script></div>
+		<div id="pkmn" aria-label="Randomized list of my favorite Pokémon">
+			<script src="/assets/js/poke.js"></script>
+		</div>
 	</article>
-</section>
\ No newline at end of file
+</section>
